/* ==============================
   縦長モード：Informationセクション
   基準幅：375px (figma)
============================== */

:root {
  --base-width-sp: 375;
  --base-width-pc: 1440;
}

p {
  margin-bottom: 0px;
}

.info-section {
  position: relative;
  width: 100%;
  height: calc(376 / var(--base-width-sp) * 100vw);
  background-color: #f4f4f4;
  overflow: hidden;
  z-index: 0;
}

.info-background {
  position: absolute;
  width: calc(1442.02 / var(--base-width-sp) * 100vw);
  height: calc(621.51 / var(--base-width-sp) * 100vw);
  left: calc(-607.76 / var(--base-width-sp) * 100vw);
  top: calc(-244 / var(--base-width-sp) * 100vw);
  background: url('/wp-content/themes/cocoon-child-master/assets/images/fv/top-bottom_R.jpg') center bottom / cover no-repeat;
  z-index: 0;
}

.info-content {
  position: absolute;
  top: calc(1 / var(--base-width-sp) * 100vw);
  left: 50%;
  transform: translateX(-50%);
  width: calc(325 / var(--base-width-sp) * 100vw);
  height: calc(375 / var(--base-width-sp) * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 / var(--base-width-sp) * 100vw) 0;
  gap: calc(30 / var(--base-width-sp) * 100vw);
  z-index: 1;
}

.info-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 / var(--base-width-sp) * 100vw);
  width: 100%;
  text-align: center;
}

.info-label {
  font-family: 'Oswald', sans-serif;
  font-size: calc(14 / var(--base-width-sp) * 100vw);
  color: #ffffff;
  letter-spacing: 0.15em;
  line-height: 1;
}

.info-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc(24 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.info-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(30 / var(--base-width-sp) * 100vw);
  width: 100%;
}

.info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 / var(--base-width-sp) * 100vw);
  padding: calc(10 / var(--base-width-sp) * 100vw);
  width: 100%;
  height: calc(90 / var(--base-width-sp) * 100vw);
  background-color: #ffffff;
  border: 2px solid #231815;
  text-decoration: none;
}

.info-btn-icon img {
  width: calc(89 / var(--base-width-sp) * 100vw);
  height: calc(81 / var(--base-width-sp) * 100vw);
  object-fit: contain;
}

.info-btn-text {
  font-family: 'Noto Sans JP';
  font-size: calc(20 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  color: #231815;
  letter-spacing: 0.05em;
  text-align: center;
}


@media screen and (min-aspect-ratio: 1/1) {

  .info-section {
    height: calc(320 / var(--base-width-pc) * 100vw);
  }

  .info-background {
    width: calc(1513 / var(--base-width-pc) * 100vw);
    height: calc(652 / var(--base-width-pc) * 100vw);
    left: calc(-27 / var(--base-width-pc) * 100vw);
    top: calc(-318 / var(--base-width-pc) * 100vw);
  }

  .info-content {
    top: calc(58 / var(--base-width-pc) * 100vw);
    width: calc(831 / var(--base-width-pc) * 100vw);
    height: calc(217 / var(--base-width-pc) * 100vw);
    gap: calc(30 / var(--base-width-pc) * 100vw);
    padding: 0;
  }

  .info-title {
    width: calc(400 / var(--base-width-pc) * 100vw);
    height: calc(75 / var(--base-width-pc) * 100vw);
    gap: calc(5 / var(--base-width-pc) * 100vw);
  }

  .info-label {
    font-size: calc(16 / var(--base-width-pc) * 100vw);
    height: calc(16 / var(--base-width-pc) * 100vw);
  }

  .info-heading {
    font-size: calc(36 / var(--base-width-pc) * 100vw);
    height: calc(54 / var(--base-width-pc) * 100vw);
  }

  .info-buttons {
    flex-direction: row;
    justify-content: center;
    gap: calc(31 / var(--base-width-pc) * 100vw);
    width: 100%;
    height: calc(112 / var(--base-width-pc) * 100vw);
  }

  .info-btn {
    flex-direction: row;
    width: calc(400 / var(--base-width-pc) * 100vw);
    height: 100%;
    padding: calc(10 / var(--base-width-pc) * 100vw);
    gap: calc(10 / var(--base-width-pc) * 100vw);
  }

  .info-btn-icon img {
    width: calc(100 / var(--base-width-pc) * 100vw);
    height: calc(91 / var(--base-width-pc) * 100vw);
  }

  .info-btn-text {
    font-size: calc(24 / var(--base-width-pc) * 100vw);
    height: calc(36 / var(--base-width-pc) * 100vw);
  }
}