@charset "utf-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
  outline: none;
}
.section03 img {
  max-width: 100%;
  object-fit: cover;
}
.block1200 {
  display: none !important;
}
@media (max-width: 1200px) {
  .block1200 {
    display: block !important;
  }
  .none1200 {
    display: none !important;
  }
}
.section03 {
  width: 100%;
  background: #2A2A2A;
  padding: 7vw 0;
}
.special-wrap {
  margin: 0 auto;
  max-width: 1750px;
  padding: 0 3%;
}

/* Layout Grid */
.grid-area {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 2.9vw;
  margin-bottom: 5vw;
}

/* Images */
.img-box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Left Private Pool */
.img-box { 
  position: relative;
}
.btn-box { 
  opacity: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%);
  padding: 4px 12px 6px;
  border: 1px solid #fff;
  border-radius: 50px;
  width: max-content;
  background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: all 0.4s ease;
  color: #fff;
}
.img-box:hover .btn-box { 
  opacity: 1;
}
.img-box img { transition: all 0.7s ease;}
.img-box:hover img {
  filter: brightness(0.6);
}
.btn-box:hover {
  background-size: 100% 100%;
}
.btn-box:hover a {
  color: #2A2A2A;
}
.btn-box a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  font-family: "gowun", serif;
}
.left-pool img { max-width: 30vw;}


/* Right column (vertical) */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 3vw;
}
.right-column img { max-width: 24vw;}
.right-column .right-item { 
  display: flex;
  justify-content: flex-start;
  gap: 2.5vw;
}



/* Bottom full-width image */
.bottom-full {
  margin-top: 5vw;
  display: flex;
  justify-content: flex-start;
  gap: 2.5vw;
}
.bottom-full .img-box {
  min-width: 55.85vw;
}

.sp-subtitle {
  font-size: 3.1vw;
  margin: 1.2vw 0 0.8vw;
  color: #BCC9BF;
  font-weight: 400;
  width: max-content;
}
.sp-subtitle:hover {
  text-decoration: underline;
}
.sp-txt {
  font-size: 0.9vw;
  color: #FFFFFF;
  line-height: 1.6;
}

@media(max-width:768px){
  .special-wrap { padding: 0 5%;}
  .grid-area { display: block;}
  .sp-subtitle {
    font-size: 6.4vw;
    letter-spacing: 0.5px;
    text-decoration: underline;
  }
  .sp-txt {
    font-size: 2.6vw;
  }
  .right-column .right-item {
      gap: 4vw;
      padding: 20px 0;
  }
  .img-box img { max-width: 100%;}
  .right-item .img-box, .bottom-full .img-box, .bottom-full .text-box { margin-left: 5%;}
  .left-pool, .right-item, .bottom-full {
    padding-bottom: 20px;
    border-bottom: 1px solid #BCC9BF;
  }
  .left-pool .img-box {
    max-width: 66vw;
  }
  .left-pool img {
      
  }
  .right-column img {
      max-width: 31vw;
      width: 31vw;
      height: 31vw;
  }
  .bottom-full {
    display: block;
  }
  .bottom-full .img-box { max-width: 90%;}
  .btn-box { 
    opacity: 1;
    top: auto; left: auto;
    bottom: 5px; right: 5px;
    width: max-content;
    height: max-content;
    transform: translate(0);
    padding: 0px 9px 1px;
    border: 1px solid #fff;
    border-radius: 18px;
    
    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: all 0.4s ease;
    color: #fff;
  }
  .btn-box a { font-size: 15px; line-height: 1.2;}
  .btn-box a span { 
    display: none;
  }
  
}