@charset "utf-8";

html, body {
  overflow: auto; /* または scroll。スクロール可能にする */
  -ms-overflow-style: none;  /* IE/Edge（旧）対応 */
  scrollbar-width: none;     /* Firefox対応 */
}
#main {
	overflow:clip;
}
section {
    .wrap {
        padding-bottom: 90px;
        .contents {
            h2 {
                display: grid;
                grid-template-columns: .7em auto  .7em;
                grid-column-gap: 1em;
                align-items: center;
                justify-content: center;
                font-size:3.2rem;
                text-align:center;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:1.5em;
                position: relative;
                span{
                    color: #eaf4e2;
                    font-size: 20rem;
                    position: absolute;
                    top:0%;
                    left:50%;
                    transform: translate(-50%, -50%);
                    z-index: -1;
                    font-weight:800;
                }
            }
			p{
				font-size: 1.8rem;
			}
        }
    }
}

#mv{
	.wrap{
		padding-bottom: 90px;
		position:relative;
		overflow:clip;
		&::before {
			content:'';
			display:block;
			width:100vw;
			height:100%;
			background-color:#FFF0F4;
			position:absolute;
			z-index:0;
			border-radius: 0 0 0 90px;
			left:45%;
			bottom:0;
		}
		.contents{
			max-width: 1400px;
			position: relative;
			z-index:1;
			.angel_01{
				position: absolute;
				width: 110px;
				bottom: -100px;
                left: 40px;
				z-index: 2;
			}
			.contents_inner{
				display: grid;
				grid-template-columns: 62% 35%;
				grid-column-gap: 3%;
				& > .img{
					position: relative;
					margin-left:-100px;
					width:calc(100% + 100px);
					.mv_slider {
						height:100%;
						.slick-list,.slick-track {
							height:100%;
							.slide {
								overflow:hidden;
								border-radius:0 0 60px 60px;
								img {
									width: 100%;
									height:100%;
									object-fit:cover;
								}
							}
						}
					}
					h1{
						font-size: 1.8rem;
						letter-spacing:.05em;
						color: #fff;
						position: absolute;
						left:calc(100px + 3em);
						bottom:4em;
						z-index: 2;
						line-height:2;
						display:grid;
						span {
							&:nth-child(3) {
								margin-bottom:1em;
							}
						}
					}
				}
				.detail{
					margin-top: 100px;
					margin-right: 30px;
					.topics{
						display: grid;
						grid-template-columns: 6em 1fr;
						height: 50px;
						width: 100%;
						align-items: center;
						border-radius: 25px;
						margin-bottom: 20px;
						overflow:hidden;
						dl{
							display: grid;
							grid-column-gap: 1em;
							grid-row-gap:.33em;
							padding: 0 1em;
							background-color: #fff;
							height: 100%;
							align-content: center;
							font-size:min(1.3vw,1.5rem);
							overflow:hidden;
							dt {
								white-space:nowrap;
							}
						}
						h2{
							color: #fff;
							background-color: #F388A6;
							height: 100%;
							align-content: center;
							text-align: center;
							font-size: 1.6rem;
							line-height: 0;
							margin-bottom: 0;
						}
					}
					.menu{
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-gap: 20px;
						a {
							&:has(.contact) {
								grid-area: 3/1/4/3;
								dl {
									grid-template-columns: repeat(2,auto);
									justify-content: center;
									grid-row-gap: 1em;
									grid-column-gap: 20px;
									padding: 30px;
								}
								dt {
									justify-content:start;
								}
								dd.img{
									grid-area: 1/1/3/2;
									img {
										width:6em;
									}
								}
								dd{
									font-size: min(1.1vw,1.4rem);
									text-align: left;
									line-height: 1.4;
								}
							}
						}
						dl{
							background-color: #fff;
							border-radius: 20px;
							box-shadow: 0px 10px 10px -6px rgb(0 0 0 / 6%);
							display: grid;
							align-items: center;
							grid-row-gap: 0;
							padding: 10px;
							height:100%;
							dt{
								text-align: center;
								position: relative;
								font-size: min(1.3vw,1.8rem);
								line-height: 1.4;
								display: grid;
								grid-template-columns:repeat(2,auto);
								align-items:center;
								justify-content:center;
								grid-column-gap:.33em;
								img{
									width: .9em;
								}
							}
							dd{
								text-align: center;
								img{
									width: 5em;
								}
							}
						}
					}
				}
			}
		}
	}
}
#about{
	.wrap{
		padding:150px 0;
		.contents{
			max-width: 660px;
			position: relative;
            &::before {
                content:'';
                display:block;
                width:1200px;
                height:1200px;
                position:absolute;
                z-index:-1;
                background:url(../img/common/bg2.png) no-repeat center center/contain;
                top:-600px;
                right:-600px;
            }
			.angel_01{
				position: absolute;
				width: 140px;
				top: -40px;
                left: -140px;
				z-index: 2;
			}
			.angel_02{
				position: absolute;
				width: 100px;
				top: 50%;
				transform: translateY(-50%);
                right: -100px;
				z-index: 2;
			}
			p{
				text-align: center;
				margin-bottom: 70px;
			}
		}
	}
}
#service{
    .wrap{
		padding-bottom:120px;
        .contents{
            max-width: 1400px;
			position: relative;
            &::before {
                content:'';
                display:block;
                width:1200px;
                height:1200px;
                position:absolute;
                z-index:-1;
                background:url(../img/common/bg2.png) no-repeat center center/contain;
                top:-300px;
                left:-300px;
            }
            .contents_inner{
                display: grid;
                grid-template-columns: auto 1fr;
                grid-column-gap: 100px;
                & > .text{
	                font-size: min(12vw,20rem);
                    width: 1em;
                    height: 4em;
                    position: relative;
                    .angel_01{
                        position: absolute;
                        width: 100px;
                        top:25%;
                        right:-50px;
                        z-index: 2;
                    }
                    .angel_02{
                        position: absolute;
                        width: 100px;
                        bottom:-10%;
                        left:0;
                        z-index: 2;
                    }
                    span {
                        color: #eaf4e2;
	                	font-size: min(12vw,20rem);
                        font-weight: 800;
                        transform: translate(-50%, -50%) rotate(-90deg);
                        display: inline-block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                    }
                }
                .service{
                    padding: 20px 60px 20px 90px;
                    border-radius: 50px 0 0 0;
					position:relative;
					&::before {
						content:'';
						display:block;
						width:100vw;
						height:100%;
						background-color:#FFFFFF;
						position:absolute;
						z-index:0;
						left:0;
						top:0;
						border-radius:90px;
					}
					&::after {
						content:'';
						display:block;
						width:100vw;
						height:calc(100% + 60px);
						background-color: transparent;
						background-image: radial-gradient(circle, #e6f2dd 2.5px, transparent 2.5px), radial-gradient(circle, #e6f2dd 2.5px, transparent 2.5px);
						background-position: 0 0, 5.5px 11px;
						background-size: 11px 22px;
						position:absolute;
						z-index:-1;
						left:-30px;
						top:-30px;
						border-radius:90px;
					}
                    .service_box{
                        display: grid;
                        grid-template-columns: auto auto;
                        grid-column-gap: 30px;
                        padding: 70px 0;
                        border-bottom: #7ABB3F dotted 5px;
						position: relative;
						z-index: 2;
                        &:last-child{
                            border-bottom: none;
                        }
                        img{
                            width: 200px;
                        }
                        .detail{
                            h3{
                                font-size: 3.2rem;
                                display: grid;
                                grid-template-columns: auto 1fr;
                                align-items: center;
                                margin-bottom: 1em;
								line-height: 1.4;
								font-weight: 500;
                                .font_num {
                                    color: #7ABB3F;
                                    font-size: 6.4rem;
                                    margin-right: 0.2em;
                                    transform: none
                                }
								.text {
									span {
										display: inline-block;
									}
								}
                            }
                            a{
								display: grid;
								align-items: center;
								grid-template-columns: auto auto;
								justify-content: right;
								grid-column-gap: 1em;
								font-size: 1.8rem;
								font-weight: 500;
								margin-top: 30px;
								position: relative;
								&::after{
									content:"";
									width: 7.5em;
									height: 2px;
									background-color: #F388A6;
									position: absolute;
									right: 0;
									bottom: -7px;
								}
								img{
									width: 20px;
								}
							}
                        }
						&.service1,&.service3{
							flex-wrap: wrap; 
							.detail{
								order: 2;
							}
							img{
								width: 280px;
								order: 1;
							}
						}
						&.service3{
							h3{
								font-size: 2.8rem;
							}
						}

                    }
                }
            }
        }
    }
}
#news{
	.wrap{
		overflow: clip;
		padding-bottom:150px;
		position:relative;
		&::before {
			content:'';
			display:block;
			width:100vw;
			height:100%;
			position:absolute;
			z-index:-1;
			background-color:#FFF0F4;
			top:50%;
			left:0;
		}
		.contents{
			max-width:1200px;
			h2{
				font-size:2.1rem;
				grid-template-columns:repeat(2,auto);
				justify-content:start;
				line-height:1;
				align-items:end;
				margin-bottom:.5em;
				span{
					color: #F388A6;
					font-size: 10rem;
					position: relative;
					transform:translateY(.15em);
					top:0;
					left:0;
					z-index:1;
				}				
			}
			.contents_inner{
				padding: 90px;
				position: relative;
				&::before {
					content:'';
					display:block;
					width:150vw;
					height:100%;
					background-color:#F388A6;
					position:absolute;
					z-index:0;
					left:0;
					top:0;
					border-radius:90px;
				}
				&::after {
					content:'';
					display:block;
					width:100vw;
					height:calc(100% + 50px);
					background-color: transparent;
					background-image: radial-gradient(circle, #fad7e1 2.5px, transparent 2.5px), radial-gradient(circle, #fad7e1 2.5px, transparent 2.5px);
					background-position: 0 0, 5.5px 11px;
					background-size: 11px 22px;
					position:absolute;
					z-index:-1;
					left:-30px;
					top:10px;
					border-radius:90px;
				}
				dl{
					display: grid;
					grid-template-columns: 5em auto 1fr;
					grid-column-gap: 2em;
					align-items: center;
					padding: 1.5em;
					border-bottom: 2px dotted #fff;
					position:relative;
					z-index:3;
					&:first-child{
						padding-top: 0;
					}
					&:last-child{
						padding-bottom: 0;
					}
					dt{
						color: #fff;
						line-height: 1.6;
						font-size:1.8rem;
					}
					dd{
						color: #fff;
						&.cat{
							background-color: #fff;
							color: inherit;
							padding: 0.2em 0.5em;
							border-radius: 6px;
							line-height: 1.6;
						}
					}
				}
				& > a{
					display: grid;
					align-items: center;
					grid-template-columns: auto auto;
					justify-content: right;
					grid-column-gap: 1em;
					font-size: 1.8rem;
					font-weight: 500;
					margin-top: 50px;
					position: relative;
					z-index:3;
					color: #fff;
					&::after{
						content:"";
						width: 7.5em;
						height: 2px;
						background-color: #fff;
						position: absolute;
						right: 0;
						bottom: -7px;
					}
					img{
						width: 20px;
					}
				}

                dl{
                    /* 既存のdtに追記 */
                    dt{
                        color: #fff;
                        line-height: 1.6;
                        font-size: 1.8rem;
                        a {
                            display: block;        /* gridを解除 */
                            color: #fff;
                            text-decoration: none;
                            margin-top: 0;
                            &::after {
                                display: none;     /* ボーダー非表示 */
                            }
                            &:hover {
                                opacity: 0.7;
                            }
                        }
                    }
                }

			}
		}
	}
}
#instagram{
	.wrap{
		background-color:#FFF0F4;
		.contents{
			max-width: 900px;
			position: relative;
			.angel_01{
				position: absolute;
				width: 120px;
				top: -40px;
                left: -140px;
				z-index: 2;
			}
			.angel_02{
				position: absolute;
				width: 120px;
				top: 50%;
				transform: translateY(-50%);
                right: -100px;
				z-index: 2;
			}
			a{
				display: grid;
				align-items: center;
				grid-template-columns: auto auto;
				justify-content: center;
				grid-column-gap: 1em;
				font-size: 2rem;
				font-weight: 500;
				margin-top: 30px;
				position: relative;
				&::after{
					content:"";
					width: 9.5em;
					height: 1px;
					background-color: #555555;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -7px;
				}
				img{
					width: 24px;
				}
			}
		}
	}
}

#footer {
	background: #FFF0F4;
	background: linear-gradient(0deg, rgba(255, 240, 244, 0) 50%, rgba(255, 240, 244, 1) 100%);
}

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

}

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

	section {
	    .wrap {
	        padding-bottom: 60px;
	        .contents {
	            h2 {
	                font-size:2.4rem;
	                span{
	                    font-size: 14rem;
	                }
	            }
				p{
					font-size: 1.6rem;
				}
	        }
	    }
	}
	
	#mv{
		.wrap{
			padding-bottom:40px;
			&::before {
				border-radius: 0 0 60px 60px;
				left:0;
				bottom:0;
			}
			.contents{
				.angel_01{
					width: 80px;
					bottom: -30px;
	                left: 0px;
					z-index: 2;
				}
				.contents_inner{
					display: block;
					& > .img{
						margin:0 -25px;
						width:100vw;
						.mv_slider {
							height:auto;
							.slick-list,.slick-track {
								height:auto;
								.slide {
									img {
										height:auto;
										aspect-ratio:2;
									}
								}
							}
						}
						h1{
							left:60px;
							bottom:3em;
							text-shadow:0 0 5px rgba(0,0,0,.66),0 0 5px rgba(0,0,0,.66),0 0 5px rgba(0,0,0,.66);
						}
					}
					.detail{
						margin-top: 20px;
						margin-right: 0;
						.topics{
							dl{
								grid-template-columns: 5em 1fr;
								font-size:1.5rem;
							}
							h2{
								font-size: 1.8rem;
							}
						}
						.menu{
							a {
								&:has(.contact) {
									dd{
										font-size: 1.4rem;
									}
								}
							}
							dl{
								dt{
									font-size: 1.8rem;
								}
							}
						}
					}
				}
			}
		}
	}
	#about{
		.wrap{
			padding:120px 0;
			.contents{
				.angel_01{
					width: 100px;
	                left: -50px;
				}
				.angel_02{
					width: 80px;
					right:0;
				}
				p{
					margin-bottom: 50px;
				}
			}
		}
	}
	#service{
	    .wrap{
	        .contents{
	            .contents_inner{
	                grid-template-columns: 1fr;
	                & > .text{
						display:none;
	                }
	                .service{
	                    padding: 20px 30px 20px 40px;
						display:grid;
						justify-items:center;
	                }
	            }
	        }
	    }
	}
	#news{
		.wrap{
			padding-bottom:120px;
			.contents{
				h2{
					span{
						font-size: 8rem;
					}				
				}
				.contents_inner{
					padding: 60px;
					&::before {
						border-radius:60px;
					}
				}
			}
		}
	}
	#instagram{
		.wrap{
			.contents{
				.angel_01{
					width: 80px;
	                left: 0px;
				}
				.angel_02{
					width: 90px;
	                right: 0;
				}
			}
		}
	}
	
}

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

	section {
		.wrap {
			.contents {
				h2 {
					font-size:2.0rem;
					span{
						font-size: 9rem;
					}
				}
				p{
					font-size: 1.4rem;
				}
			}
		}
	}

	#mv{
		.wrap{
			padding-bottom: 30px;
			&::before {
				border-radius: 0 0 30px 30px;
			}
			.contents{
				.angel_01{
					width: 50px;
					bottom: -30px;
					left: -10px;
				}
				.contents_inner{
					& > .img{
						margin:0 -20px;
						.mv_slider {
							.slick-list,.slick-track {
								.slide {
									border-radius:0 0 30px 30px;
									img {
										aspect-ratio:1.5;
									}
								}
							}
						}
						h1{
							font-size: min(4vw,2rem);
							left:30px;
							bottom:1.5em;
							line-height:1.5;
							span {
								&:nth-child(3) {
									margin-bottom:.5em;
								}
							}
						}
					}
					.detail{
						margin-top: 20px;
						margin-right: 0;
						.topics{
							grid-template-columns: 5em 1fr;
							margin-bottom:10px;
							dl{
								grid-template-columns: 1fr;
								font-size:1.3rem;
							}
							h2{
								font-size: 1.5rem;
							}
						}
						.menu{
							grid-gap: 10px;
							a {
								&:has(.contact) {
									dl {
										grid-row-gap: .5em;
										padding: 15px 20px;
									}
									dt {
										justify-content:start;
									}
									dd.img{
										grid-area: 1/1/3/2;
										img {
											width:6em;
										}
									}
									dd{
									font-size: min(3.3vw,1.5rem);
									}
								}
							}
							dl{
								border-radius:15px;
								padding: 5px;
								dt{
									font-size: min(3.8vw,1.8rem);
								}
								dd{
									img{
										width: 4em;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	#about{
		.wrap{
			padding:90px 0;
			.contents{
				&::before {
					width:600px;
					height:600px;
					top:-300px;
					right:-300px;
				}
				.angel_01{
					width: 60px;
					top: -60px;
					left: -20px;
				}
				.angel_02{
					width: 50px;
					top: 66%;
					right: -15px;
				}
				p{
					text-align: left;
				}
			}
		}
	}
	#service{
		.wrap{
			padding-bottom:90px;
			.contents{
				&::before {
					width:600px;
					height:600px;
					top:-200px;
					left:-200px;
				}
				.contents_inner{
					.service{
						padding: 20px 20px 20px 30px;
						border-radius: 30px 0 0 0;
						position:relative;
						&::before {
							border-radius:30px;
						}
						&::after {
							height:calc(100% + 40px);
							left:-20px;
							top:-20px;
							border-radius:30px;
						}
						.service_box{
							display: grid;
							grid-template-columns: auto 1fr;
							grid-column-gap: 20px;
							padding: 30px 0;
							border-bottom: #7ABB3F dotted 5px;
							position: relative;
							z-index: 2;
							&:last-child{
								border-bottom: none;
							}
							img{
								width: 100%;
								max-width:200px;
							}
							.detail{
								display:contents;
								h3{
									font-size: 1.8rem;
									max-width:10em;
									margin-bottom:.5em;
									.font_num {
										font-size: 3.0rem;
									}
									.text {
										span {
											display: inline-block;
										}
									}
								}
								a{
									grid-area:3/1/4/3;
									font-size: 1.5rem;
									img{
										width: 15px;
									}
								}
								p {
									grid-area:2/1/3/3;
								}
							}
							&.service1,&.service3{
								flex-wrap: wrap; 
								.detail{
									order: unset;
								}
								img{
									width: 100%;
									max-width:200px;
									order: unset;
								}
							}
							&.service3{
								h3{
									grid-area:1/1/2/3;
									max-width:100%;
								}
								& > img {
									max-width:100px;
									position:absolute;
									bottom:-30px;
									left:0;
								}
							}

						}
					}
				}
			}
		}
	}
	#news{
		.wrap{
			.contents{
				h2{
					font-size:1.8rem;
					span{
						font-size: 6rem;
					}				
				}
				.contents_inner{
					padding: 30px 0 30px 20px;
					position: relative;
					&::before {
						border-radius:30px;
					}
					&::after {
						left:-20px;
						top:10px;
						border-radius:30px;
					}
					dl{
						grid-template-columns: 5.5em 1fr;
						grid-column-gap: 0em;
						grid-row-gap:.5em;
						padding: .66em .33em;
						dt{
							color: #fff;
							line-height: 1.6;
							font-size:1.4rem;
							grid-area:2/1/3/3;
						}
						dd{
							color: #fff;
							&.cat{
								justify-self:start;
								font-size:1.2rem;
							}
						}
					}
					& > a {
						font-size: 1.4rem;
						margin-top: 20px;
						img{
							width: 15px;
						}
					}
				}
			}
		}
	}
	#instagram{
		.wrap{
			background-color:#FFF0F4;
			.contents{
				max-width: 900px;
				position: relative;
				.angel_01{
					width: 50px;
					top: -40px;
					left:-25px;
				}
				.angel_02{
					width: 50px;
					right: -20px;
					z-index: 2;
				}
				a{
					font-size: 1.8rem;
				}
			}
		}
	}

}

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



}