@charset "utf-8";

/*==============================
        content
==============================*/

/* =================================================================
        section
================================================================= */

/**mv**/
#mv {
	.wrap {
		background:url(../img/common/mv_bg.png) no-repeat calc(50vw - 540px - 317px) 0/317px auto,url(../img/common/mv_bg2.png) repeat-y calc(50vw - 540px - 317px) 0/317px auto #FFFFFF;
		.contents {
			max-width: 1300px;
			/* background: rgb(0,61,150);
			background: linear-gradient(90deg, rgba(0,61,150,1) 10%, rgba(255,255,255,1) 10%); */
			.mv_slider {
                margin:0;
				.slide {
					aspect-ratio: 2/1;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: center center;
					background-image: url(../img/top/mv.jpg);
					background-color: #FFFFFF;
					border-radius: 1.5em;
					position: relative;
					h1 {
						font-size: 3.6rem;
						line-height: 1.66;
						color:#FFFFFF;
						font-weight: 500;
						text-shadow: 2px 2px 3px rgba(0,0,0,.3),2px 2px 6px rgba(0,0,0,.3);
						margin-top: 2.5em;
						margin-left: 4em;
						letter-spacing:.05em;
					}
					&.slide1 {
						background-image: url(../img/top/mv.jpg);
					}
					&.slide2 {
						background-image: url(../img/top/mv2.jpg);
						a {
							background-color:rgba(0,61,150,.5);
						}
					}
					&.slide3 {
						background-image: url(../img/top/mv3.jpg);
						a {
							background-color:rgba(51,0,0,.5);
						}
					}
					&.slide4 {
						background-image: url(../img/top/mv4.jpg);
						a {
							background-color:rgba(51,0,0,.5);
						}
					}
					a {
						position: absolute;
						right:50px;
						bottom:20px;
						display: grid;
						grid-template-columns: repeat(2,auto);
						align-items:center;
						grid-gap:.5em;
						font-size:2.4rem;
						line-height:1.3;
						color:#FFFFFF;
						height:3em;
						padding:0 1em;
					}
				}
				.slick-dots {
					position:relative;
                    bottom:0;
					padding:15px 0;
					li {
						margin:0;
                        width:10px;
                        height:10px;
                        margin:0 10px;
					}
                    button {
                        background-color:#bababa;
                        padding:0;
                        width:10px;
                        height:10px;
                        border-radius:50%;
                        &::before {
                            content:none;
                        }
                    }
                    .slick-active {
                        button {
                            background-color:var(--color_base2);
                        }
                    }
				}
			}
		}
	}
}

#news {
	.wrap {
		padding:50px 0;
		.contents {
			.contents_inner {
				display: grid;
				grid-template-columns: repeat(2,1fr);
				grid-gap: 10px 50px;
				h2 {
					font-size: 1.8rem;
					font-weight: 500;
					line-height: 1;
					height: 2.6em;
					padding: 0 1.5em;
					display: grid;
					align-items: center;
					grid-template-columns: auto 1fr;
					grid-gap: 1em;
					letter-spacing: .05em;
					color:var(--color_base2);
					margin-bottom: .5em;
					&::before {
						color:var(--color_base2);
						font-size: 1.5em;
					}
				}
				.news {
					grid-area: 1/1/3/2;
					h2 {
						background-color: #ececee;
					}
                    .newslist_wrap {
                        max-height:540px;
                        overflow-y:auto;
						border:1px solid #cccccc;
                        .newslist {
                            padding:20px;
                            display:grid;
                            grid-gap:25px;
                            .item {
                                display:grid;
                                grid-template-columns:20% 1fr;
                                grid-gap: 1.5em;
                                .detail {
                                    display:grid;
                                    grid-template-columns:auto 1fr;
                                    grid-gap:.5em;
                                    align-items:center;
                                    .date {
                                        font-size:1.4rem;
                                    }
                                    h3 {
                                        color:var(--color_base);
                                        font-size:1.5rem;
                                        line-height:1.2;
										text-decoration: underline;
                                    }
                                    .text {
                                        grid-area: 2/1/3/3;
                                        font-size:1.4rem;
                                        line-height:1.4;
                                    }
                                }
                            }
                        }
                    }	
				}
				.oneroom {
					h2 {
						background-color: #f8eee4;
					}
					.bnr {
						background: url(../img/top/img_01.jpg) no-repeat center center/cover;
						aspect-ratio: 2.5/1;
						padding:15px 20px 10px;
						display: grid;
						grid-template-columns: 1fr 200px;
                        align-items:end;
                       align-content:space-between;
						h3 {
							grid-area:1/1/2/3;
							font-size: 1.8rem;
							color:#eb5902;
							line-height: 1.4;
							text-shadow: 0 0 2px #FFFFFF,0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF,0 0 2px #FFFFFF,0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF;
						}
						span {
							font-size: 1.1rem;
                            font-weight:500;
							line-height: 1.3;
							text-shadow: 0 0 2px #FFFFFF,0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF,0 0 2px #FFFFFF,0 0 3px #FFFFFF,0 0 4px #FFFFFF,0 0 5px #FFFFFF;
						}
                        a {
                            font-size:1.4rem;
                            font-weight:500;
                            color:#FFFFFF;
                            line-height:1.2;
                            height:2.8em;
                            background-color:rgba(235,97,0,.9);
                            border-radius:1.4em;
                            display:grid;
                            grid-template-columns:repeat(2,auto);
                            align-items:center;
                            justify-content:center;
							grid-gap: 1em;
							&::after {
								font-size: 1.4em;
							}
                        }
					}
				}
				.mansion {
					h2 {
						background-color: #e8ede8;
					}
					.mlist_wrap {
						max-height:265px;
						overflow-y:auto;
						border:1px solid #cccccc;
						.mlist {
							padding:20px;
							display:grid;
							grid-gap:10px;
							.item {
								padding:10px;
								display: grid;
								grid-template-columns: repeat(2,1fr);
								grid-gap: 15px;
								align-items:center;
								.detail {
									.subttl {
                                        font-family: "Noto Serif JP", serif;
										font-size: 1.0rem;
										color:#FFFFFF;
										line-height: 1.2;
										margin-bottom: .5em;
                                        text-align:center;
									}
                                    h3 {
                                        font-family: "Noto Serif JP", serif;
										font-size: 1.5rem;
										color:#FFFFFF;
										line-height: 1.2;
                                        text-align:center;
                                        padding-bottom:.25em;
                                        border-bottom:1px solid #FFFFFF;
                                        margin-bottom:.25em;
                                    }
                                    .ttlen {
                                        font-family: "Noto Serif JP", serif;
										font-size: 1.2rem;
										color:#FFFFFF;
										line-height: 1.2;
                                        text-align:center;
                                        margin-bottom:1em;
                                    }
                                    dl {
                                        font-size:1.0rem;
                                        display:grid;
                                        grid-template-columns:6em 1fr;
                                        align-items:center;
                                        grid-gap:.25em 0;
                                        margin:0 .5em 1em;
                                        dt {
                                            font-family: "Noto Serif JP", serif;
    										color:#FFFFFF;
                                        }
                                        dd {
                                            font-family: "Noto Serif JP", serif;
    										color:#FFFFFF;
                                            line-height:1.2;
                                        }
                                    }
                                    .link {
                                        font-size:1.2rem;
                                        display:grid;
                                        grid-template-columns:repeat(2,1fr);
                                        grid-gap:.5em;
                                        a {
                                            display:grid;
                                            grid-template-columns:repeat(2,auto);
                                            align-items:center;
											grid-gap: 1em;
                                            justify-content:center;
                                            border-radius:1.1em;
                                            height:2.2em;
                                            background-color:#FFFFFF;
                                            font-weight:500;
                                            &::after {
                                                font-size:1.2em;
												color:var(--color_base2);
                                            }
											&.request {
												background-color: #acc8f7;
												color:var(--color_base2);
											}
                                        }
                                    }
								}
								.img {
									img {
										display: block;
										height: 100%;
										object-fit: cover;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

#bnr {
	.wrap {
		padding: 30px 0 60px;
		.contents {
			.contents_inner {
				display: grid;
				grid-template-columns: repeat(3,1fr);
				grid-gap: 30px;
				a {
					img {
						display: block;
					}
					p {
						font-size: 1.3rem;
						line-height: 1.3;
						padding: .5em 1em 0;
					}
				}
			}
		}
	}
}


@media (hover: hover) {
	
	#mv {
		.wrap {
			.contents {
				.mv_slider {
					.slide {
						a {
							transition:.3s;
							&:hover {
								filter: brightness(1.2);
							}
						}
					}
				}
			}
		}
	}

	#news {
		.wrap {
			.contents {
				.contents_inner {
					.news {
						.newslist_wrap {
							.newslist {
								.item {
									transition: .3s;
									&:hover {
										opacity: .75;
									}
								}
							}
						}	
					}
					.oneroom {
						.bnr {
							a {
								transition: .3s;
								&:hover {
									opacity: .75;
								}
							}
						}
					}
					.mansion {
						.mlist_wrap {
							.mlist {
								.item {
									.detail {
										.link {
											a {
												transition: .3s;
												&:hover {
													opacity: .75;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#bnr {
		.wrap {
			.contents {
				.contents_inner {
					a {
						transition: .3s;
						&:hover {
							opacity: .75;
						}
					}
				}
			}
		}
	}


}

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

	/**mv**/
	#mv {
		.wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -177px 0/317px auto;
			.contents {
				.mv_slider {
					.slide {
						h1 {
							margin-left:3em;
							margin-top:2em;
						}
					}
				}
			}
		}
	}
	
}
@media screen and (max-width:1024px){

	/**mv**/
	#mv {
		.wrap {
			background:url(../img/common/mv_bg2.png) repeat-y -250px 0/317px auto;
			.contents {
				.mv_slider {
					.slide {
						h1 {
							font-size:2.6rem;
							margin-left:2em;
							margin-top:1em;
						}
						a {
							font-size:2.0rem;
						}
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			.contents {
				.contents_inner {
					grid-template-columns: 1fr;
					grid-gap: 30px;
					max-width:640px;
					margin:0 auto;
				}
			}
		}
	}
	
	#bnr {
		.wrap {
			.contents {
				.contents_inner {
					a {
						p {
							br {
								display:none;
							}
						}
					}
				}
			}
		}
	}
	
}

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

	/**mv**/
	#mv {
		.wrap {
			.contents {
				padding-top:15px;
				.mv_slider {
					.slide {
						aspect-ratio: 1.75/1;
						border-radius:.5em;
						h1 {
							font-size: min(4.6vw,2.4rem);
							margin-top:1em;
							margin-left: 1em;
						}
						a {
							right:15px;
							bottom:10px;
							font-size:1.6rem;
						}
						&.slide1 {
							background-image: url(../img/top/mv.jpg);
						}
					}
					.slick-dots {
						padding:5px 0;
						li {
	                        width:8px;
	                        height:8px;
							margin:0 5px;
						}
	                    button {
	                        width:8px;
	                        height:8px;
	                    }
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			padding:30px 0;
			.contents {
				.contents_inner {
					grid-gap: 20px;
					h2 {
						font-size: 1.6rem;
						padding: 0 1em;
					}
					.news {
						grid-area: 1/1/3/2;
	                    .newslist_wrap {
	                        max-height:300px;
	                        .newslist {
	                            padding:10px;
	                            grid-gap:15px;
	                            .item {
	                                grid-gap: .75em;
	                                .detail {
	                                    grid-template-columns:1fr;
	                                    .date {
	                                        font-size:1.2rem;
	                                    }
	                                    h3 {
	                                        font-size:1.4rem;
	                                    }
	                                    .text {
	                                        grid-area: unset;
	                                        font-size:1.3rem;
	                                    }
	                                }
	                            }
	                        }
	                    }	
					}
					.oneroom {
						.bnr {
							padding:10px;
							grid-template-columns: 1fr 150px;
							h3 {
								font-size: min(3.8vw,1.4rem);
							}
	                        a {
	                            font-size:1.2rem;
	                        }
						}
					}
					.mansion {
						max-width:400px;
						margin:0 auto;
						.mlist_wrap {
							max-height:300px;
							.mlist {
								padding:10px;
								.item {
									padding:10px;
									grid-template-columns: 1fr;
									grid-gap: 0;
									.detail {
										display:contents;
									}
									.img {
										grid-area:4/1/5/2;
										margin-bottom:10px;
										img {
											aspect-ratio:2/1;
											object-position:center bottom;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	#bnr {
		.wrap {
			padding: 0 0 30px;
			.contents {
				.contents_inner {
					max-width:400px;
					margin:0 auto;
					grid-template-columns: 1fr;
					grid-gap: 20px;
					a {
						p {
							font-size: 1.2rem;
						}
					}
				}
			}
		}
	}

}