@charset "UTF-8";
/* CSS Document */

/* ▼------- Slider -------▼ */
#slideWrap {
	width: 100%;
	height: 485px;
	margin: 65px 0 0 0;
	overflow: hidden;
	background: #FAF4EB;
	position: relative;
}

	#slideWrap .sliderInner {
		width: 100%;
		max-width: 980px;
		height: 485px;
		margin: 0 auto;
		position: absolute;
		left: calc((100% - 980px) / 2);
		top: 0;
		z-index: 50;
		display: flex;
		justify-content: space-between;
	}

		#slideWrap .sliderInner .catch {
			width: 43.82%;
			display: flex;
			align-content: center;
			align-items: center;
		}

			#slideWrap .sliderInner .catch img {
				width: 100%;
				max-width: 430px;
			}

		#slideWrap .sliderInner .photo {
			width: 56.12%;
			display: flex;
			align-content: center;
			align-items: center;
			margin: 20px 0 0 0;
		}

			#slideWrap .sliderInner .photo img {
				width: 100%;
				max-width: 550px;
			}

	#slideWrap .scroll {
		position: absolute;
		right: 0;
		bottom: 15px;
		z-index: 52;
	}

		#slideWrap .scroll a:hover img {
			opacity: 0.5;
		}

/* ▼------- Concept -------▼ */
#concept {
	width: 100%;
	background: url("../../img/conceptBg01.png") #DCF4FF no-repeat left bottom;
	background-size: cover;
	display: flex;
	align-content: flex-end;
	align-items: flex-end;
}

	@media only screen and (-webkit-min-device-pixel-ratio: 2) {
		#concept {
			background-image: url("../../img/conceptBg01@2x.png");
			background-size: cover;
		}
	}

	#concept .conceptWrap {
		width: 100%;
		background: url("../../img/conceptBg02.png") center no-repeat;
		background-size: auto 100%;
		display: flex;
		align-content: flex-end;
		align-items: flex-end;
	}

		@media only screen and (-webkit-min-device-pixel-ratio: 2) {
			#concept .conceptWrap {
				background: url("../../img/conceptBg02@2x.png") center no-repeat;
				background-size: auto 100%;
			}
		}

	#concept .conceptInner {
		width: 100%;
		max-width: 980px;
		margin: 80px auto 200px auto;
	}

	#concept .titleBox {
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}

		#concept .titleBox .en {
			width: 100%;
			text-align: left;
			font-family: 'Palanquin Dark', sans-serif;
			font-size: 40px;
			font-size: 4rem;
			line-height: 1em;
			font-weight: 500;
			letter-spacing: 2px;
			background: linear-gradient(to right, #333333 0%,#999999 50%,#333333 100%);
			-webkit-background-clip: text;
			color: transparent;
		}

			@media all and (-ms-high-contrast: none){
				#concept .titleBox .en {
					background: none;
					color: #333;
					font-family: 'Palanquin Dark', sans-serif;
					font-weight: 500;
				}
			}

			@supports (-ms-ime-align:auto) {
				#concept .titleBox .en {
					background: none;
					color: #333;
					font-family: 'Palanquin Dark', sans-serif;
					font-weight: 500;
				}
			}

			#concept .titleBox .en:before {
				content:"";
				display: inline-block;
				width: 16px;
				height: 13px;
				background: url("../img/titleIcon.png") 0 0 no-repeat;
				background-size: 16px 13px;
				position: relative;
				top: -6px;
				padding-right: 10px;
			}

			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
				#concept .titleBox .en:before {
					background: url("../img/titleIcon@2x.png") 0 0 no-repeat;
					background-size: 16px 13px;
				}
			}

		#concept .titleBox .jp {
			width: auto;
			text-align: left;
			font-size: 14px;
			font-size: 1.4rem;
			line-height: 1em;
			letter-spacing: 2px;
			margin: 10px 0 0 26px;
			font-weight: normal;
			color: #666;
		}

	#concept .catch {
		width: 100%;
		text-align: right;
	}

		#concept .catch img {
			width: 100%;
			max-width: 453px;
		}

	#concept .conceptInner p {
		width: 80%;
		text-align: center;
		margin: 50px auto;
	}

/* ▼------- Message -------▼ */
#messageWrap {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 80px 0 0 0;
	position: relative;
	overflow: hidden;
	z-index: 99;
}

	#messageWrap .titleBox {
		width: 50%;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

		#messageWrap .titleBox .en {
			width: 100%;
			text-align: left;
			font-family: 'Palanquin Dark', sans-serif;
			font-size: 40px;
			font-size: 4rem;
			line-height: 1em;
			font-weight: 500;
			letter-spacing: 2px;
			background: linear-gradient(to right, #333333 0%,#999999 50%,#333333 100%);
			-webkit-background-clip: text;
			color: transparent;
		}

			@media all and (-ms-high-contrast: none){
				#messageWrap .titleBox .en {
					background: none;
					color: #333;
					font-family: 'Palanquin Dark', sans-serif;
					font-weight: 500;
				}
			}

			@supports (-ms-ime-align:auto) {
				#messageWrap .titleBox .en {
					background: none;
					color: #333;
					font-family: 'Palanquin Dark', sans-serif;
					font-weight: 500;
				}
			}

			#messageWrap .titleBox .en:before {
				content:"";
				display: inline-block;
				width: 16px;
				height: 13px;
				background: url("../img/titleIcon.png") 0 0 no-repeat;
				background-size: 16px 13px;
				position: relative;
				top: -6px;
				padding-right: 10px;
			}

			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
				#messageWrap .titleBox .en:before {
					background: url("../img/titleIcon@2x.png") 0 0 no-repeat;
					background-size: 16px 13px;
				}
			}

		#messageWrap .titleBox .jp {
			width: auto;
			text-align: left;
			font-size: 14px;
			font-size: 1.4rem;
			line-height: 1em;
			letter-spacing: 2px;
			margin: 10px 0 0 26px;
			font-weight: normal;
			color: #666;
		}

	#messageWrap .catch {
		width: 50%;
		text-align: right;
	}

		#messageWrap .catch img {
			width: 100%;
			max-width: 384px;
		}

	#messageWrap .conParaWrap {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

		#messageWrap .conParaWrapL {
			width: 63%;
			margin: 20px 0 0 0;
		}

			#messageWrap .conParaWrapL h4 {
				width: 100%;
				margin: 0 0 30px 0;
				text-align: left;
				font-size: 24px;
				font-size: 2.4rem;
				line-height: 1.5em;
				letter-spacing: 2px;
				font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", sans-serif;
				font-weight: normal;
			}

			#messageWrap .conParaWrapL .name {
				width: 100%;
				text-align: right;
			}

				#messageWrap .conParaWrapL .name span {
					font-size: 20px;
					font-size: 2rem;
					line-height: 1.5em;
					letter-spacing: 2px;
					font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", sans-serif;
					font-weight: normal;
					display: block;
				}

			#messageWrap .conParaWrapL .more {
				width: 180px;
				margin: 0 auto;
			}

				#messageWrap .conParaWrapL .more a {
					width: 100%;
					display: block;
					background: url("../img/entryArrowWhite.png") right 25px no-repeat #E50112;
					background-size: 30px auto;
					border: 2px solid #E50112;
					color: #FFF;
					font-size: 18px;
					font-size: 1.8rem;
					line-height: 1em;
					font-family: 'Palanquin Dark', sans-serif;
					font-weight: 400;
					text-align: center;
					text-decoration: none;
					padding: 18px 5px 22px 0;
					box-sizing: border-box;
				}

				@media all and (-ms-high-contrast: none){
					#messageWrap .conParaWrapL .more a {
						font-family: 'Palanquin Dark R', sans-serif;
						font-weight: 400;
					}
				}

				@supports (-ms-ime-align:auto) {
					#messageWrap .conParaWrapL .more a {
						font-family: 'Palanquin Dark R', sans-serif;
						font-weight: 400;
					}
				}

				#messageWrap .conParaWrapL .more a:hover {
					border: 2px solid #008CD5;
					color: #008CD5;
					background: url("../img/entryArrowBlue.png") right 25px no-repeat #FFF;
					background-size: 30px auto;
				}

				@media only screen and (-webkit-min-device-pixel-ratio: 2) {

					#messageWrap .conParaWrapL .more a {
						background: url("../img/entryArrowWhite@2x.png") right 25px no-repeat #E50112;
						background-size: 30px auto;
					}

					#messageWrap .conParaWrapL .more a:hover {
						background: url("../img/entryArrowBlue@2x.png") right 25px no-repeat #FFF;
						background-size: 30px auto;
					}

				}

		#messageWrap .conParaWrapR {
			width: 35%;
		}

			#messageWrap .conParaWrapR img {
				width: 100%;
			}

/* ▼------- List -------▼ */
#conList {
	width: 100%;
	margin: 0 0 50px 0;
	display: flex;
	justify-content: space-between;
}

#conListL {
	width: 48.33%;
	height: 450px;
	background: url("../../img/conListLBg.png") left top no-repeat;
	background-size: 80% 370px;
	padding-left: calc((100% - 980px) / 2);
	box-sizing: border-box;
}

#conListR {
	width: 48.33%;
	height: 450px;
	background: url("../../img/conListRBg.png") right top no-repeat;
	background-size: 80% 370px;
	padding-right: calc((100% - 980px) / 2);
	box-sizing: border-box;

}

#conListLInner,
#conListRInner {
	width: 100%;
	height: 450px;
	overflow: hidden;
	position: relative;
}

	#conListL .photo {
		width: 85%;
		margin: 0 0 0 15%;
	}

	#conListR .photo {
		width: 85%;
		margin: 0 15% 0 0;
		position: absolute;
		bottom: 0;
	}

		#conListL .photo img,
		#conListR .photo img {
			width: 100%;
			max-width: 400px;
		}

	#conListL .text {
		width: 380px;
		position: absolute;
		top: 220px;
		background: rgba(255,255,255,0.9);
		box-shadow: 0 0 8px #CCC;
		padding: 30px;
		box-sizing: border-box;
		text-align: left;
	}

	#conListR .text {
		width: 380px;
		position: absolute;
		top: 0;
		right: 30px;
		background: rgba(255,255,255,0.9);
		box-shadow: 0 0 8px #CCC;
		padding: 30px;
		box-sizing: border-box;
		text-align: left;
	}

		#conListL .text .titleBox,
		#conListR .text .titleBox {
			width: 100%;
			margin: 0 0 10px 0;
			display: flex;
			flex-wrap: wrap;
		}

			#conListL .text .titleBox .en,
			#conListR .text .titleBox .en {
				width: 100%;
				text-align: left;
				font-family: 'Palanquin Dark', sans-serif;
				font-size: 40px;
				font-size: 4rem;
				line-height: 1em;
				font-weight: 500;
				letter-spacing: 2px;
				background: linear-gradient(to right, #333333 0%,#999999 50%,#333333 100%);
				-webkit-background-clip: text;
				color: transparent;
			}

				@media all and (-ms-high-contrast: none){
					#conListL .text .titleBox .en,
					#conListR .text .titleBox .en {
						background: none;
						color: #333;
						font-family: 'Palanquin Dark', sans-serif;
						font-weight: 500;
					}
				}

				@supports (-ms-ime-align:auto) {
					#conListL .text .titleBox .en,
					#conListR .text .titleBox .en {
						background: none;
						color: #333;
						font-family: 'Palanquin Dark', sans-serif;
						font-weight: 500;
					}
				}

				#conListL .text .titleBox .en:before,
				#conListR .text .titleBox .en:before {
					content:"";
					display: inline-block;
					width: 16px;
					height: 13px;
					background: url("../img/titleIcon.png") 0 0 no-repeat;
					background-size: 16px 13px;
					position: relative;
					top: -6px;
					padding-right: 10px;
				}

				@media only screen and (-webkit-min-device-pixel-ratio: 2) {
					#conListL .text .titleBox .en:before,
					#conListR .text .titleBox .en:before {
						background: url("../img/titleIcon@2x.png") 0 0 no-repeat;
						background-size: 16px 13px;
					}
				}

			#conListL .text .titleBox .jp,
			#conListR .text .titleBox .jp {
				width: auto;
				text-align: left;
				font-size: 14px;
				font-size: 1.4rem;
				line-height: 1em;
				letter-spacing: 2px;
				margin: 10px 0 0 26px;
				font-weight: normal;
				color: #666;
			}

		#conListL .text p,
		#conListR .text p {
			width: 100%;
			margin: 0;
			padding: 0 0 0 26px;
			box-sizing: border-box;
		}

		#conListL .more {
			width: 180px;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		#conListR .more {
			width: 180px;
			position: absolute;
			right: 0;
			top: 160px;
		}

			#conListL .more a,
			#conListR .more a {
				width: 100%;
				display: block;
				background: url("../img/entryArrowWhite.png") right 25px no-repeat #E50112;
				background-size: 30px auto;
				border: 2px solid #E50112;
				color: #FFF;
				font-size: 18px;
				font-size: 1.8rem;
				line-height: 1em;
				font-family: 'Palanquin Dark', sans-serif;
				font-weight: 400;
				text-align: center;
				text-decoration: none;
				padding: 18px 5px 22px 0;
				box-sizing: border-box;
			}

				@media all and (-ms-high-contrast: none){
					#conListL .more a,
					#conListR .more a {
						font-family: 'Palanquin Dark R', sans-serif;
						font-weight: 400;
					}
				}

				@supports (-ms-ime-align:auto) {
					#conListL .more a,
					#conListR .more a {
						font-family: 'Palanquin Dark R', sans-serif;
						font-weight: 400;
					}
				}

			#conListL .more a:hover,
			#conListR .more a:hover {
				border: 2px solid #008CD5;
				color: #008CD5;
				background: url("../img/entryArrowBlue.png") right 25px no-repeat #FFF;
				background-size: 30px auto;
			}

			@media only screen and (-webkit-min-device-pixel-ratio: 2) {

				#conListL .more a,
				#conListR .more a {
					background: url("../img/entryArrowWhite@2x.png") right 25px no-repeat #E50112;
					background-size: 30px auto;
				}

				#conListL .more a:hover,
				#conListR .more a:hover {
					background: url("../img/entryArrowBlue@2x.png") right 25px no-repeat #FFF;
					background-size: 30px auto;
				}

			}


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

	#slideWrap .sliderInner {
		width: 90%;
		max-width: auto;
		left: 5%;
	}

		#concept .conceptWrap {
			background-size: 145% auto;
		}

			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
				#concept .conceptWrap {
					background-size: 145% auto;
				}
			}

		#concept .conceptInner {
			width: 90%;
			max-width: auto;
			margin: 50px auto 130px auto;
		}

		#concept .catch img {
			max-width: 300px;
		}

		#concept .conceptInner p {
			margin: 30px auto 20px auto;
		}

	#messageWrap {
		width: 90%;
		max-width: auto;
		margin: 0 5%;
		padding: 80px 0 0 0;
	}

		#messageWrap .conParaWrap {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

			#messageWrap .conParaWrapL {
				width: 63%;
				margin: 20px 0 0 0;
			}

				#messageWrap .conParaWrapL h4 {
					width: 100%;
					margin: 0 0 30px 0;
					text-align: left;
					font-size: 24px;
					font-size: 2.4rem;
					line-height: 1.5em;
					letter-spacing: 2px;
					font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", sans-serif;
					font-weight: normal;
				}

				#messageWrap .conParaWrapL .name {
					width: 100%;
					text-align: right;
				}

					#messageWrap .conParaWrapL .name span {
						font-size: 20px;
						font-size: 2rem;
						line-height: 1.5em;
						letter-spacing: 2px;
						font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", sans-serif;
						font-weight: normal;
						display: block;
					}

				#messageWrap .conParaWrapL .more {
					width: 180px;
					margin: 0 auto;
				}

					#messageWrap .conParaWrapL .more a {
						width: 100%;
						display: block;
						background: url("../img/entryArrowWhite.png") right 25px no-repeat #E50112;
						background-size: 30px auto;
						border: 2px solid #E50112;
						color: #FFF;
						font-size: 18px;
						font-size: 1.8rem;
						line-height: 1em;
						font-family: 'Palanquin Dark', sans-serif;
						font-weight: 400;
						text-align: center;
						text-decoration: none;
						padding: 18px 5px 22px 0;
						box-sizing: border-box;
					}

					@media all and (-ms-high-contrast: none){
						#messageWrap .conParaWrapL .more  {
							font-family: 'Palanquin Dark R', sans-serif;
							font-weight: 400;
						}
					}

					@supports (-ms-ime-align:auto) {
						#messageWrap .conParaWrapL .more  {
							font-family: 'Palanquin Dark R', sans-serif;
							font-weight: 400;
						}
					}

					#messageWrap .conParaWrapL .more a:hover {
						border: 2px solid #008CD5;
						color: #008CD5;
						background: url("../img/entryArrowBlue.png") right 25px no-repeat #FFF;
						background-size: 30px auto;
					}

					@media only screen and (-webkit-min-device-pixel-ratio: 2) {

						#messageWrap .conParaWrapL .more a {
							background: url("../img/entryArrowWhite@2x.png") right 25px no-repeat #E50112;
							background-size: 30px auto;
						}

						#messageWrap .conParaWrapL .more a:hover {
							background: url("../img/entryArrowBlue@2x.png") right 25px no-repeat #FFF;
							background-size: 30px auto;
						}

					}

			#messageWrap .conParaWrapR {
				width: 35%;
				display: flex;
				align-items: flex-end;
			}

				#messageWrap .conParaWrapR img {
					width: 100%;
				}



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

		#slideWrap {
			height: calc(100vh - 65px);
		}

			#slideWrap .infiniteslide_wrap img {
				height: calc(100vh - 65px);
			}

			#slideWrap .sliderInner {
				height: calc(100vh - 65px);
				flex-direction: column-reverse;
				justify-content: center;
				padding-bottom: 120px;
				box-sizing: border-box;
			}

				#slideWrap .sliderInner .catch {
					width: 100%;
				}

					#slideWrap .sliderInner .catch img {
						max-width: none;
					}

				#slideWrap .sliderInner .photo {
					width: 100%;
				}

					#slideWrap .sliderInner .photo img {
						max-width: none;
					}

			#slideWrap .scroll {
				position: absolute;
				right: 0;
				left: 0;
				margin: 0 auto;
				bottom: 15px;
				z-index: 52;
			}

				#slideWrap .scroll a:hover img {
					opacity: 0.5;
				}




		#concept {
			background-image: url("../../img/conceptBg01Sp.png");
		}

			@media only screen and (-webkit-min-device-pixel-ratio: 2) {
				#concept {
					background-image: url("../../img/conceptBg01Sp@2x.png");
				}
			}

			#concept .conceptWrap {
				width: 90%;
				margin: 0 auto;
				background: url("../../img/conceptBg02Sp.png") center 160px no-repeat;
				background-size: 100% 80%;
			}

				@media only screen and (-webkit-min-device-pixel-ratio: 2) {
					#concept .conceptWrap {
						background: url("../../img/conceptBg02Sp@2x.png") center 160px no-repeat;
						background-size: 100% 80%;
					}
				}

			#concept .conceptInner {
				max-width: auto;
				margin: 50px auto 180px auto;
			}

			#concept .catch {
				margin: 0;
				box-sizing: border-box;
			}

				#concept .catch img {
					max-width: 200px;
				}

			#concept .conceptInner p {
				text-align: left;
				margin: 30px auto;
			}

			#messageWrap .conTitleWrap {
				margin: 0;
			}

			#messageWrap .titleBox {
				width: 100%;
			}

			#messageWrap .conParaWrap {
				flex-wrap: wrap;
				flex-direction: column-reverse;
				margin: 0 0 50px 0;
				
			}

				#messageWrap .conParaWrapL {
					width: 100%;
					margin: 20px 0 0 0;
				}

					#messageWrap .conParaWrapL h4 {
						text-align: center;
					}

				#messageWrap .conParaWrapR {
					width: 100%;
					position: relative;
					margin: 0 0 10px 0;
				}

					#messageWrap .conParaWrapR .photo {
						width: 100%;
					}

						#messageWrap .conParaWrapR .photo img {
							width: 100%;
							height: 280px;
							object-fit: cover;
							object-position: right -50px top 0;

							width: 50%;
							height: 300px;
							margin: 0 0 0 50%;
							object-fit: cover;
							object-position: left top;
						}

					#messageWrap .conParaWrapR .catch {
						position: absolute;
						top: 170px;
					}



	#conListL {
		width: 44%;
		height: 380px;
		background-size: 80% 300px;
		padding-left: 5%;
	}

	#conListR {
		width: 44%;
		height: 380px;
		background-size: 80% 300px;
		padding-right: 5%;
	}

	#conListLInner,
	#conListRInner {
		height: 380px;
	}

			#conListL .photo img,
			#conListR .photo img {
				max-width: 300px;
			}

		#conListL .text {
			width: 90%;
			top: 170px;
			padding: 20px;
		}

		#conListR .text {
			width: 90%;
			right: 10%;
			padding: 20px;
		}

			#conListL .text .titleBox .en,
			#conListR .text .titleBox .en {
				font-size: 24px;
				font-size: 2.4rem;
			}





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

		#conListWrap {
			width: 100%;
			background: linear-gradient(90deg, rgba(251,210,213,0.3) 0%,rgba(221,250,225,0.3) 50%,rgba(190,229,255,0.3) 90%,rgba(255,255,255,0.3) 90%,rgba(255,255,255,0.3) 100%);
			padding: 50px 0 0 0;
		}

		#conList {
			width: 90%;
			margin: 0 auto 50px auto;
			flex-wrap: wrap;
			align-content: flex-start;
			align-items: flex-start;
		}

		#conListL {
			width: 100%;
			height: auto;
			background: none;
			padding-left: 0;
			margin-bottom: 50px;
		}

		#conListR {
			width: 100%;
			height: auto;
			background: none;
			padding-right: 0;

		}

		#conListLInner,
		#conListRInner {
			width: 100%;
			height: 390px;
			overflow: hidden;
			position: relative;
		}

			#conListL .photo {
				text-align: right;
			}

			#conListR .photo {
				width: 85%;
				margin: 0 0 0 15%;
				position: relative;
				text-align: right;
			}

				#conListL .photo img,
				#conListR .photo img {
					max-width: auto;
				}

			#conListL .text {
				width: 85%;
				top: 180px;
				padding: 20px;
			}

			#conListR .text {
				width: 85%;
				padding: 20px;
				top: 180px;
				left: 0;
			}

					#conListL .text .titleBox .en,
					#conListR .text .titleBox .en {
						font-size: 30px;
						font-size: 3rem;
					}

						#conListL .text .titleBox .en:before,
						#conListR .text .titleBox .en:before {
							top: -4px;
						}

				#conListR .more {
					top: auto;
					bottom: 0;
				}

		}


























	}

}