/* ==========================================================================
   gift-takeout.css — page-specific styles for the Gift/Takeout page
   ========================================================================== */

/* Intro
   ========================================================================== */

.gift-intro {
  margin-top: 60px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.gift-intro__photo {
  flex-shrink: 0;
  width: 600px;
  aspect-ratio: 600 / 450;
  overflow: hidden;
}

.gift-intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gift-intro__text {
  flex-shrink: 0;
  width: 340px;
}

.gift-intro__lead {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 30px;
  letter-spacing: 0.8px;
  color: var(--color-brown-dark);
  text-align: justify;
}

/* Product
   ========================================================================== */

.gift-product {
  position: relative;
  margin-top: 120px;
  padding: 100px 0 120px;
  background-image: url("../images/top/bg-texture.jpg");
  background-repeat: repeat;
}

.gift-product__heading {
  text-align: center;
}

.gift-product__cards {
  margin-top: 40px;
  display: flex;
  gap: 40px;
}

.gift-product__card {
  flex: 1;
  background: var(--color-white);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gift-product__photo {
  width: 100%;
  aspect-ratio: 420 / 315;
  overflow: hidden;
}

.gift-product__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gift-product__title {
  display: block;
  margin-top: 30px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 3rem;
  letter-spacing: 2.1px;
  color: var(--color-brown-dark);
}

.gift-product__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 2.8px;
  color: var(--color-gold);
}

.gift-product__price {
  display: block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 3.2px;
  color: var(--color-brown-dark);
}

.gift-product__desc {
  flex: 1;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 30px;
  letter-spacing: 0.8px;
  color: var(--color-brown-dark);
  text-align: justify;
}

.gift-product__button {
  margin-top: 30px;
  gap: 10px;
}

.gift-product__button-icon {
  width: 12px;
  height: 12px;
}

/* Online (BASE)
   ========================================================================== */

.gift-online {
  margin-top: 100px;
	margin-bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gift-online__logo {
  width: 100px;
}

.gift-online__logo img {
  width: 100%;
  height: auto;
}

.gift-online__text {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 30px;
  letter-spacing: 0.8px;
  color: var(--color-brown-dark);
}

.gift-online__button {
  margin-top: 30px;
  width: 238px;
  gap: 6px;
}

/* ==========================================================================
   Responsive — tablet (768px〜1199px) / SP (〜767px)
   ========================================================================== */

@media (max-width: 1199px) {
  .gift-intro {
    margin-top: 40px;
    flex-direction: column;
    gap: 30px;
  }

  .gift-intro__photo,
  .gift-intro__text {
    width: 100%;
  }

  .gift-product {
    margin-top: 100px;
    padding: 80px 0;
  }

  .gift-online {
    margin-top: 80px;
    margin-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .gift-intro {
    margin-top: 60px;
  }

  .gift-product {
    margin-top: 60px;
    padding: 60px 0;
  }

  .gift-product__cards {
    flex-direction: column;
  }

  .gift-product__title {
    font-size: 2.2rem;
  }

  .gift-online {
    margin-top: 40px;
		margin-bottom: 60px;
  }
}