@charset "UTF-8";

/* ==========================================================================
   Foundation
   ========================================================================== */
:root {
  --color-white: #fff;
  --color-text: #2c4d9c;
  --color-border: #2D57A6;
  --color-shadow: #0d2a72;
  --color-page: #f3f3f3;
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --cta-radius: 45px;
  --cta-shadow: 14px;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.l-inner {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ==========================================================================
   Project / p-cta
   ========================================================================== */
.p-cta {
  margin-block: 50px;
}

.p-cta__list {
  display: flex;
  justify-content: center;
  gap: 55px;
  padding-right: 18px;
  padding-bottom: 18px;
}

.p-cta__banner {
  --cta-shadow-size: var(--cta-shadow);

  box-sizing: border-box;
  display: flex;
  flex: 0 0 450px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 450px;
  height: 150px;
  min-width: 0;
  padding: 12px 24px 10px;

  background-color: var(--color-white);
  border: 6px solid var(--color-border);
  border-radius: var(--cta-radius);

  /* 右下の濃い青の影だけ残す */
  box-shadow:
    var(--cta-shadow-size)
    var(--cta-shadow-size)
    0
    0
    var(--color-shadow);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.p-cta__banner--kobe {
  gap: 0;
}

/* hover時：水色の線は出さず、ボタンを影の位置まで移動 */
.p-cta__banner:hover,
.p-cta__banner:focus-visible {
  transform: translate(
    var(--cta-shadow-size),
    var(--cta-shadow-size)
  );

  box-shadow:
    0 0 0 0 var(--color-shadow);
}

/* spanの下線を削除 */
.p-cta__banner span,
.p-cta__banner:hover span,
.p-cta__banner:focus span,
.p-cta__banner:focus-visible span,
.p-cta__banner:active span {
  text-decoration: none !important;
}

.p-cta__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

.p-cta__logo {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  object-fit: contain;
}

.p-cta__logo--bridge {
  width: 192px;
  height: 53px;
}

.p-cta__logo--kobe {
  width: 141px;
  height: 61px;
}

.p-cta__logo--oikura {
  width: 166px !important;
  height: 47px;
}

.p-cta__link {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.p-cta__link--secondary {
  margin-top: -0.4rem;
}

.p-cta__logos p {
  margin-top: 0 !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 991px) {
  .p-cta {
    padding-block: 24px;
  }

  .p-cta__list {
    flex-direction: column;
    gap: 32px;
  }

  .p-cta__banner {
    --cta-shadow-size: 10px;

    flex: 1 1 auto;
    gap: 6px;

    width: 100%;
    height: auto;
    min-height: 150px;
    padding: 20px 20px 16px;

    border-width: 4px;
    border-radius: 48px;
  }

  .p-cta__logos {
    gap: 16px;
  }

  .p-cta__logo--bridge,
  .p-cta__logo--kobe,
  .p-cta__logo--oikura {
    width: auto;
    height: auto;
    max-width: 46%;
  }

  .p-cta__logo--bridge {
    max-height: 53px;
  }

  .p-cta__logo--kobe {
    max-height: 61px;
  }

  .p-cta__logo--oikura {
    max-height: 47px;
  }

  .p-cta__link {
    font-size: 2.2rem;
    letter-spacing: 0.04em;
  }
}

@media screen and (max-width: 480px) {
  .p-cta__banner {
    padding: 16px 12px 14px;
    border-radius: 32px;
  }

  .p-cta__logos {
    gap: 8px;
  }

  .p-cta__link {
    font-size: 1.8rem;
  }
}