@charset "utf-8";

.titlewrap {
	h1 {
		.txtclip {
			background: #E81E4F;
			background: linear-gradient(to right bottom,#E81E4F 0%,#E7549A 50%, #FCA291 100%);
		}
		img {
			width:7em;
		}
	}
}

#business {
	.wrap {
		.contents {
			h2 {
				margin-bottom: .5em;
				& + p {
					margin-bottom:3em;
				}
			}
			.service {
				display:grid;
				grid-template-columns:50% repeat(4,1fr);
				grid-column-gap:1.5%;
				position:relative;
				aspect-ratio:2;
				.item {
					position:absolute;
					border-radius:10px;
					overflow:hidden;
					aspect-ratio:1;
					z-index:1;
					cursor:pointer;
					transition:.5s;
					&:not(.active) {
						width:25%;
                        height: min(23.5vw,275px);
						p {
							opacity:0;
						}
					}
					&.active {
						width:50%;
						.item_inner {
							h3 {
								font-size:2.0rem;
								.font_en {
									font-size:7.0rem;
								}
							}
						}
					}
					&.item1 {
						top:0;
						left:0;
					}
					&.item2 {
						z-index:2;
						left:52%;
						top:0;
					}
					&.item3 {
						z-index:3;
						left:63.5%;
						top:25%;
					}
					&.item4 {
						z-index:4;
						left:75%;
						top:50%;
					}
					.item_inner {
						position:relative;
						z-index:1;
						padding:30px;
						display:grid;
						padding-top:36%;
						height: 100%;
						h3 {
							font-size:1.6rem;
							color:#FFFFFF;
							display:grid;
							letter-spacing:.05em;
							margin-bottom:.5em;
							.font_en {
								font-size:min(3.0vw,3.7rem);
							}
						}
						p {
							color:#FFFFFF;
							padding-top:1em;
							span {
								font-size: .8em;
							}
						}
					}
					& > img {
						display:block;
						width:100%;
						height:100%;
						object-fit:cover;
						position:absolute;
						left:0;
						top:0;
						z-index:0;
					}
				}
			}
		}
	}
}

#concept {
	.wrap {
		overflow:hidden;
		.contents {
			position:relative;
			&::before {
				content:'';
				display:block;
				width:calc(100% + 150px);
				height:100%;
				background-color:#F5F5F5;
				position:absolute;
				left:-50px;
				top:50px;
				z-index:-1;
				border-radius:10px;
			}
			h2 {
				margin-bottom:1em;
			}
			h3 {
				font-size:2rem;
				color:#E7597F;
				margin-bottom:.5em
			}
			p {
				&:not(:last-child) {
					margin-bottom:2em;
				}
				&.body {
					font-size:2rem;
					font-weight:600;
					line-height:1.8;
					margin-bottom:3em;
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 50%;
				grid-column-gap:3%;
				margin-bottom:3em;
				.img {
					img {
						display:block;
						width:calc(100% + 100px);
						max-width:calc(100% + 100px);
						border-radius:10px;
					}
				}
				.detail {
					padding-top:20px;
				}
			}
		}
	}
}

#strengths {
	.wrap {
		overflow:hidden;
		.contents {
			max-width:1300px;
			.contents_inner {
				display:grid;
				grid-template-columns:50% 1fr;
				grid-column-gap:5%;
				position:relative;
				margin-bottom:100px;
				&::before {
					content:'';
					display:block;
					width:100vw;
					height:100%;
					position:absolute;
					left:45%;
					top:60px;
					background-color:#f5f5f5;
					z-index:-1;
				}
				.detail {
					order:1;
					margin-top:30px;
					p {
						&:not(:last-child) {
							margin-bottom:1em;
						}
					}
				}
				.img {
					img {
						display:block;
						border-radius:10px;
					}
				}
			}
			.strengths {
				max-width:1100px;
				margin:0 auto;
				display:grid;
				grid-template-columns:repeat(3,1fr);
				grid-gap:20px 15px;
				a {
					overflow:hidden;
					border-radius:10px 10px 0 0;
					.img {
						overflow:hidden;
						img {
							display:block;
							width:100%;
							aspect-ratio:1.5;
							object-fit:cover;
							transform:scale(1.2);/**画像ミス後から外す**/
						}
					}
					.detail {
						display:grid;
						grid-template-columns:1fr auto 1fr;
						align-items:center;
						background-color:#EF7198;
						font-size:2.0rem;
						padding:1em;
						color:#FFFFFF;
						h3 {
							color:#FFFFFF;
							margin-bottom:0;
						}
						&::before {
							content:'';
						}
						span {
							font-size:1.5rem;
							display:grid;
							grid-template-columns:repeat(2,auto);
							align-items:center;
							justify-content:end;
							grid-column-gap:.33em;
							&::after {
								content:'>';
							}
						}
					}
					&:last-child {
						grid-area: 3/1/4/4;
						.img {
							img {
								aspect-ratio:5;
							}
						}
					}
				}
			}
		}
	}
}

.page-service {
	.pum-content {
		.item {
			display:grid;
			grid-template-columns:50% 1fr;
			grid-column-gap:5%;
			align-items:center;
			.text {
				order:1;
				h3 {
					font-size:2.0rem;
					display:grid;
					grid-row-gap:.66em;
					color:#EF7198;
					margin-bottom:1em;
					span {
						font-size:5.0rem;
					}
				}
				p {
					font-size:1.6rem;
					line-height:2;
				}
			}
			.img {
				overflow:hidden;
				border-radius:10px;
				img {
					display:block;
					aspect-ratio:1;
					object-fit:cover;
					transform:scale(1.2);/**画像ミス後から外す**/
				}
			}
		}
	}
}

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

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

	#business {
		.wrap {
			.contents {
				.service {
					.item {
						&.active {
							width:50%;
							.item_inner {
								h3 {
									font-size:min(2vw,2rem);
									.font_en {
										font-size:min(7vw,7rem);
									}
								}
							}
						}
						.item_inner {
							h3 {
								font-size:min(1.6vw,1.6rem);
							}
							p {
								font-size:min(1.6vw,1.6rem);
							}
						}
					}
				}
			}
		}
	}
	
	#concept {
		.wrap {
			.contents {
				h2 {
					font-size:2.8rem;
				}
				h3 {
					font-size:1.8rem;
				}
				p {
					&.body {
						font-size:1.8rem;
						margin-bottom:2em;
					}
				}
				.contents_inner {
					.img {
						img {
							width:calc(100% + 50px);
							max-width:calc(100% + 50px);
						}
					}
				}
			}
		}
	}
	
	#strengths {
		.wrap {
			.contents {
				.contents_inner {
					.detail {
						h2 {
							font-size:2.8rem;
						}
					}
				}
				.strengths {
					grid-template-columns:repeat(2,1fr);
					a {
						&:last-child {
							grid-area: 4/1/5/3;
						}
					}
				}
			}
		}
	}
	
	.page-service {
		.pum-content {
			.item {
				grid-template-columns:40% 1fr;
				.text {
					h3 {
						font-size:1.8rem;
						span {
							font-size:4.0rem;
						}
					}
				}
			}
		}
	}
	
}

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

	#business {
		.wrap {
			.contents {
				.service {
					grid-template-columns:1fr;
					aspect-ratio:.745;
					max-width:400px;
					margin:0 auto;
					.item {
						&:not(.active) {
							width:calc((100% - 10px) / 3 );
                        	height: min(29.5vw,130px);
						}
						&.active {
							width:100%;
							.item_inner {
								h3 {
									font-size:min(5.4vw,2.0rem);
									.font_en {
										font-size:min(14vw,5.0rem);
									}
								}
							}
						}
						&.item1 {
							top:0;
							left:0;
						}
						&.item2 {
							left:0;
							top:auto;
							bottom:0;
						}
						&.item3 {
							left:50%;
							transform:translateX(-50%);
							top:auto;
							bottom:0;
						}
						&.item4 {
							left:auto;
							right:0;
							top:auto;
							bottom:0;
						}
						.item_inner {
							padding:10px;
							display:grid;
							padding-top:26%;
							h3 {
								font-size:min(3.2vw,1.4rem);
								.font_en {
									font-size:min(4.0vw,2.0rem);
								}
							}
							p {
								font-size:min(3.6vw,1.4rem);
							}
						}
					}
				}
			}
		}
	}
	
	#concept {
		.wrap {
			.contents {
				&::before {
					width:100vw;
					height:calc(100% - 170px);
					left:-20px;
					top:200px;
				}
				h2 {
					font-size:2.4rem;
				}
				h3 {
					color:#E7597F;
					margin-bottom:.5em
				}
				p {
					&:not(:last-child) {
						margin-bottom:2em;
					}
					&.body {
						font-size:1.8rem;
						margin-bottom:1em;
					}
				}
				.contents_inner {
					grid-template-columns:1fr;
					margin-bottom:1.5em;
					.img {
						order:1;
						margin-bottom:15px;
						img {
							display:block;
							width:100%;
							max-width:400px;
							margin:0 auto;
						}
					}
					.detail {
						padding-top:0;
						display:contents;
						h3 {
							order:2;
						}
						p {
							order:3;
							&.body {
								order:1;
							}
						}
					}
				}
			}
		}
	}
	
	#strengths {
		.wrap {
			.contents {
				.contents_inner {
					position:relative;
					grid-template-columns: 1fr;
					&::before {
						height:calc(100% - 120px);
						left:-20px;
						top:150px;
					}
					.detail {
						display:contents;
						margin-top:0;
						h2 {
							font-size:2.4rem;
						}
						p {
							order:2;
						}
					}
					.img {
						margin-bottom:15px;
						img {
							display:block;
							width:100%;
							max-width:400px;
							margin:0 auto;
						}
					}
				}
				.strengths {
					max-width:400px;
					margin:0 auto;
					grid-template-columns:1fr;
					grid-gap:15px;
					a {
						.detail {
							font-size:1.4rem;
							h3 {
								font-size:min(5vw,2.0rem);
							}
							span {
								font-size:min(3.4vw,1.3rem);
							}
						}
						&:last-child {
							grid-area:unset;
							.img {
								img {
									aspect-ratio:1.5;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.page-service {
		.pum-container {
			padding:30px 20px!important;
		}
		.pum-close {
			right:5px!important;
			top:5px!important;
		}
		.pum-content {
			.item {
				grid-template-columns:1fr;
				.text {
					display:contents;
					order:1;
					h3 {
						font-size:1.6rem;
						span {
							font-size:3.0rem;
						}
					}
					p {
						font-size:1.4rem;
						order:2;
					}
				}
				.img {
					order:1;
					margin-bottom:15px;
					img {
						aspect-ratio:1.5;
					}
				}
			}
		}
	}
	
}