@charset "utf-8";
/* GALLERY */
h2{
	font-size: clamp(24px, 6vw, 36px);
}

.room_title{
	height: 450px;
	position: relative;
	overflow: hidden;
}

.room_title::before{
	content: "";
	position: absolute;
	inset: 0;

	background-image: url("../image/gallery/gallery_27.jpg");
	background-size: cover;
	background-position: center;

	animation: heroZoom 12s ease forwards;
}

@keyframes heroZoom{
	from{
		transform: scale(1);
	}
	to{
		transform: scale(1.08);
	}
}

.room_title h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 62px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  padding-top: 215px;

  background: linear-gradient(90deg, #fff8ef, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.room_title h2 span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease;
	
    /* ▼ これを追加 */
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.room_title.show h2 span {
  opacity: 1;
  transform: translateX(0);
}

.ldk_text h2{
	color: #2d1509;
	text-align: center;
	font-weight: normal;
}

.plan_area {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
}

.floor_plan{
 display: flex;
 justify-content: center;
}



/* 説明文 */
.gallery-text{
    text-align:center;
    padding:60px 20px;
}

.gallery-text p{
    line-height:2;
}

/* ギャラリー一覧 */
.gallery-grid{
    max-width:1450px;
    margin:0 auto 100px;
    padding:0 20px;

    display:grid;
    grid-template-columns:repeat(auto-fit, 250px);
    justify-content:center;
    gap:50px;
}

.gallery-grid a{
    display:block;
    width:250px;
    height:180px;
    overflow:hidden;
}

.gallery-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:0.4s;
}

.gallery-grid img:hover{
    transform:scale(1.05);
}


/* ギャラリー画像 */
.gallery-grid img{
    width:250px;
    height:180px;
    object-fit:cover;
    cursor:pointer;
    transition:.3s;
}

.gallery-grid img:hover{
    opacity:.8;
}

/* =====================
   Lightbox
===================== */

#lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.4s;
    z-index:9999;
}

#lightbox.active{
    opacity:1;
    visibility:visible;
}

#lightbox img{
    max-width:90%;
    max-height:90vh;

    transform:scale(.9);
    transition:.4s;
}

#lightbox.active img{
    transform:scale(1);
}

.close{
    position:absolute;
    top:20px;
    right:30px;

    color:#fff;
    font-size:40px;
    cursor:pointer;
}


/*ふわっと浮かび上がる*/
.gallery-grid img{
    opacity:0;
    transform:translateY(40px) scale(1);
    transition:.8s ease;
}

.gallery-grid img.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

.gallery-grid img:hover{
    transform:translateY(0) scale(1.05);
}