@charset "utf-8";


#mainContent {
	.wrap {
	    .contents {
			.contents_inner {
	            &.mansion {
		            .mlist_wrap {
		                .mlist {
		                    display:grid;
		                    grid-gap:30px;
		                    .item {
		                        padding:10px;
		                        display: grid;
		                        grid-template-columns: repeat(2,1fr);
		                        grid-gap: 30px;
		                        align-items:center;
		                        border-radius:20px;
		                        .detail {
		                            .subttl {
		                                font-family: "Noto Serif JP", serif;
		                                font-size: 1.8rem;
		                                color:#FFFFFF;
		                                line-height: 1.2;
		                                margin-bottom: 1.25em;
		                                text-align:center;
		                            }
		                            h3 {
		                                font-family: "Noto Serif JP", serif;
		                                font-size: 2.4rem;
		                                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: 2.0rem;
		                                color:#FFFFFF;
		                                line-height: 1.2;
		                                text-align:center;
		                                margin-bottom:1.5em;
		                            }
		                            dl {
		                                font-size:1.6rem;
		                                display:grid;
		                                grid-template-columns:6em 1fr;
		                                align-items:center;
		                                grid-gap:.5em 0;
		                                margin:0 2em 1.5em;
		                                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.6rem;
		                                display:grid;
		                                grid-template-columns:repeat(2,auto);
		                                grid-gap:.5em;
		                                max-width:400px;
		                                margin:0 auto;
		                                a {
		                                    display:grid;
		                                    grid-template-columns:repeat(2,auto);
		                                    align-items:center;
		                                    grid-gap: 1em;
		                                    justify-content:center;
		                                    border-radius:1.6em;
		                                    height:2.6em;
		                                    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%;
		                                width:100%;
		                                max-width:200%;
		                                object-fit: cover;
		                            }
		                        }
		                    }
						}
	                }
	            }
	        }
	    }
	}
}


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

	#mainContent {
		.wrap {
		    .contents {
				.contents_inner {
		            &.mansion {
			            .mlist_wrap {
			                .mlist {
			                    grid-gap:20px;
			                    .item {
			                        grid-gap: 20px;
			                        .detail {
			                            .subttl {
			                                font-size: 1.6rem;
			                            }
			                            h3 {
			                                font-size: 2.2rem;
			                            }
			                            .ttlen {
			                                font-size: 1.8rem;
			                            }
			                            dl {
			                                font-size:1.5rem;
			                            }
			                        }
			                    }
							}
		                }
		            }
		        }
		    }
		}
	}
	
}


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

	#mainContent {
		.wrap {
			.contents {
				.contents_inner {
					&.mansion {
						.mlist_wrap {
							max-width:400px;
							margin:0 auto;
							.mlist {
								grid-gap:10px;
								.item {
									grid-template-columns: 1fr;
									grid-gap: 0;
									border-radius:10px;
									padding:15px 10px;
									.detail {
										display:contents;
										.subttl {
											font-size: 1.4rem;
											margin-bottom: .5em;
										}
										h3 {
											font-size: 1.8rem;
										}
										.ttlen {
											font-size: 1.5rem;
											margin-bottom:1em;
										}
										dl {
											font-size:1.4rem;
											margin:0 0 1.5em;
										}
										.link {
											font-size:1.4rem;
											width:100%;
											max-width:300px;
										}
									}
									.img {
										grid-area:4/1/5/2;
										margin-bottom:10px;
										img {
											aspect-ratio:2/1;
											object-position:center bottom;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}