*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  background:
  linear-gradient(
    180deg,
    #f7f7f7,
    #ececec
  );

  color:#2b2b2b;

  overflow-x:hidden;

  font-family:
  'Noto Serif JP',
  serif;
}

/* header */

.header{

  position:fixed;

  top:0;
  width:100%;

  padding:28px 70px;

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

  backdrop-filter:blur(14px);

  background:
  rgba(255,255,255,0.45);

  border-bottom:
  1px solid rgba(255,255,255,0.5);

  z-index:1000;
}

/* logo */

.logo{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:42px;

  letter-spacing:8px;

  font-weight:500;

  color:#8f8f8f;
}

/* nav */

.nav{

  display:flex;
  gap:45px;

  list-style:none;
}

.nav a{

  text-decoration:none;

  color:#5e5e5e;

  font-size:15px;

  letter-spacing:2px;

  position:relative;
}

.nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:0%;
  height:1px;

  background:#8c8c8c;

  transition:0.4s;
}

.nav a:hover::after{

  width:100%;
}

/* hero */

.hero{

  width:100%;

  padding-top:100px;
}

/* image */

.hero-image{

  width:100%;
}

.hero-image img{

  width:100%;

  height:78vh;

  object-fit:cover;

  display:block;
}

/* text */

.hero-text{

  width:100%;

  padding:
  70px 9% 90px;
}

.mini{

  letter-spacing:4px;

  color:#8f8f8f;

  margin-bottom:25px;

  font-size:14px;
}

.hero h2{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:90px;

  line-height:0.95;

  font-weight:400;

  margin-bottom:35px;

  color:#4f4f4f;
}

.sub{

  line-height:2.2;

  color:#666;

  margin-bottom:45px;
}

/* button */

.main-btn{

  padding:18px 48px;

  border:none;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #dcdcdc,
    #f8f8f8
  );

  color:#444;

  font-size:15px;

  letter-spacing:2px;

  cursor:pointer;

  transition:0.4s;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.08);
}

.main-btn:hover{

  transform:
  translateY(-5px);
}

/* cards */

.cards{

  width:90%;

  margin:
  0 auto 120px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:35px;
}

.card{

  text-decoration:none;

  color:#222;

  background:
  rgba(255,255,255,0.55);

  border:
  1px solid rgba(255,255,255,0.7);

  border-radius:28px;

  overflow:hidden;

  transition:0.4s;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.06);
}

.card:hover{

  transform:
  translateY(-10px);
}

.card img{

  width:100%;

  height:420px;

  object-fit:cover;
}

.card-text{

  padding:28px;
}

.card h3{

  font-family:
  'Cormorant Garamond',
  serif;

  font-size:34px;

  margin-bottom:12px;

  color:#5a5a5a;
}

.card p{

  color:#777;
}

/* responsive */

@media(max-width:950px){

  .hero h2{

    font-size:58px;
  }

  .header{

    flex-direction:column;

    gap:15px;

    padding:25px;
  }

  .nav{

    gap:20px;

    font-size:14px;
  }

}