/* ============================================================
   page-top-responsive.css
   Responsively rebuilt sections of the TOP page (replacing the
   pre-baked SVG bands). Loaded AFTER page-top.css so it can
   override the .vt-band--* rules where needed.
   ============================================================ */

/* ---- Disable max-width canvas behaviour at small viewports ---- */
@media (max-width: 1023px) {
  /* Allow the rebuilt sections to flow at full viewport width */
  .root, .vt-body { width: 100% !important; max-width: 100%; }
}

/* ============================================================
   Section :: Mission
   ============================================================ */
.sec-mission {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: 32px 80px 0;
  margin-top: -1px; /* eliminate any sub-pixel gap from FV slider */
  overflow: hidden;
}
.sec-mission__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.sec-mission__label {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  letter-spacing: .15em;
  margin-bottom: 32px;
  opacity: .9;
}
.sec-mission__head {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 56px;
  line-height: 1.4;
  letter-spacing: .04em;
  margin: 0 0 32px;
}
.sec-mission__lede {
  font-size: 15px;
  line-height: 2;
  max-width: 640px;
  margin: 0 0 48px;
  opacity: .95;
}

/* Decorative cloud (upper right) — simple inline SVG via background */
.sec-mission__cloud {
  position: absolute;
  right: 100px;
  top: 110px;
  width: 360px;
  height: 140px;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 140' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M50 100 C30 100 18 80 32 64 C28 44 50 30 70 38 C80 18 110 18 122 38 C140 22 174 24 188 46 C212 36 246 50 250 76 C272 70 296 84 296 104 C296 122 282 134 264 134 L70 134 C56 134 44 122 50 100 Z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Boat illustration — cropped from voyager-top.svg using SVG viewBox.
   Picks the y=1430..1700 slice of the 1440×9754 source image. */
.sec-mission__boat {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* MORE corner — uses the pre-rendered assets/more-corner.png
   (yellow triangle + navy anchor + MORE text baked in) */
.more-corner {
  position: absolute;
  right: 0; bottom: 0;
  display: block;
  width: 160px; height: 160px;
  z-index: 3;
  transition: filter .25s ease, transform .25s ease;
}
.more-corner:hover { filter: brightness(1.04); transform: scale(1.02); }
.more-corner img { width: 100%; height: 100%; display: block; }
.sec-mission__more { /* placement override for the Mission section */
  position: absolute;
  right: 0; bottom: 0;
}

/* ---- Tablet ---- */
@media (max-width: 1023px) {
  .sec-mission { padding: 28px 40px 0; }
  .sec-mission__head { font-size: 42px; }
  .sec-mission__cloud { right: 40px; top: 80px; width: 260px; height: 100px; }
  .more-corner { width: 130px; height: 130px; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .sec-mission { padding: 24px 20px 0; }
  .sec-mission__label { font-size: 12px; margin-bottom: 16px; }
  .sec-mission__head { font-size: 28px; line-height: 1.5; margin-bottom: 20px; }
  .sec-mission__lede { font-size: 14px; line-height: 1.9; margin-bottom: 32px; }
  .sec-mission__cloud { display: none; }
  .more-corner { width: 96px; height: 96px; }
}

/* ============================================================
   Section :: Service
   ============================================================ */
.sec-service {
  background: #f0f8ff;
  padding: 80px 40px;
}
.sec-service__head {
  text-align: center;
  margin: 0 auto 64px;
}
.sec-service__head-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 64px;
  color: var(--navy);
  line-height: 1;
}
.sec-service__head-ja {
  font-size: 16px;
  color: var(--navy);
  margin-top: 12px;
  letter-spacing: .12em;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.svc-card {
  background: #fff;
  border-radius: 10px;
  padding: 26px 22px 20px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  color: inherit;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(37, 66, 107, .14);
}

/* Title — clickable link */
.svc-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin: 0 0 16px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.svc-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.svc-card__title a:hover { color: #4a6a98; }

/* Bullet list — each <li><a> is an independent clickable link */
.svc-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.svc-card__list li {
  font-size: 13px;
  padding-left: 12px;
  position: relative;
  line-height: 1.95;
}
.svc-card__list li::before {
  content: "・";
  position: absolute;
  left: -2px; top: 0;
  color: var(--navy);
}
.svc-card__list li a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
.svc-card__list li a:hover {
  color: #4a6a98;
  transform: translateX(2px);
}
.svc-card__list li a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Illustration — anchored bottom-right inside the card */
.svc-card__icon {
  align-self: flex-end;
  display: block;
  width: 70%;
  max-width: 210px;
  height: auto;
  margin-top: auto;
  pointer-events: none;
}

/* Yellow MORE card */
.svc-card--more {
  background: var(--yellow);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.svc-card--more .svc-more__label {
  color: var(--navy);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.svc-card--more::after {
  content: "";
  width: 50px; height: 60px;
  background: url("../assets/more-anchor-navy.png") no-repeat center / contain;
}

/* ---- Tablet: 2 columns ---- */
@media (max-width: 1023px) {
  .sec-service { padding: 64px 32px; }
  .sec-service__head-en { font-size: 48px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .svc-card { min-height: 280px; padding: 24px 20px; }
  .svc-card__icon { width: 65%; max-width: 180px; }
}

/* ---- Mobile: 1 column ---- */
@media (max-width: 767px) {
  .sec-service { padding: 48px 20px; }
  .sec-service__head { margin-bottom: 36px; }
  .sec-service__head-en { font-size: 36px; }
  .sec-service__head-ja { font-size: 13px; margin-top: 8px; }
  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
  .svc-card { min-height: 0; padding: 22px 20px 18px; }
  .svc-card__title { font-size: 15px; margin-bottom: 12px; }
  .svc-card__list li { font-size: 13px; line-height: 1.8; }
  .svc-card__icon { width: 50%; max-width: 160px; margin-top: 12px; }
  .svc-card--more { min-height: 140px; }
}

/* ============================================================
   Section :: Solution
   Layout: 2-column groups (text+cards | illustration), alternating.
   ============================================================ */
.sec-solution {
  background: #e8f1fc;
  padding: 80px 40px;
  position: relative;
}
.sec-solution__head {
  text-align: center;
  margin: 0 auto 64px;
}
.sec-solution__head-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 64px;
  color: var(--navy);
  line-height: 1;
}
.sec-solution__head-ja {
  font-size: 15px;
  color: var(--navy);
  margin-top: 10px;
  letter-spacing: .12em;
}

.sec-solution__inner { max-width: 1280px; margin: 0 auto; }

.sol-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 80px;
}
.sol-group:last-of-type { margin-bottom: 56px; }
.sol-group--mirror .sol-group__text   { order: 2; }
.sol-group--mirror .sol-group__illust { order: 1; }

/* Ribbon — flag shape with anchor outline + label.
   The right edge has a triangular notch cut INWARD (matches Union.svg). */
.sol-group__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: #fff;
  padding: 12px 88px 12px 8px;
  justify-content: flex-start;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 22px;
  letter-spacing: .06em;
}
.sol-group__ribbon::before {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
/* Per-group ribbon icon — uses the 1.svg / 2.svg / 3.svg supplied for each group */
.sol-group:nth-of-type(1) .sol-group__ribbon::before {
  width: 18px; height: 18px;
  background-image: url("../assets/sol-ribbon-1.svg");
}
.sol-group:nth-of-type(2) .sol-group__ribbon::before {
  width: 9px;  height: 22px;
  background-image: url("../assets/sol-ribbon-2.svg");
}
.sol-group:nth-of-type(3) .sol-group__ribbon::before {
  width: 20px; height: 17px;
  background-image: url("../assets/sol-ribbon-3.svg");
}
.sol-group__lede {
  font-size: 14.5px;
  line-height: 1.9;
  color: #222;
  margin: 0 0 28px;
}
.sol-group__illust {
  width: 100%;
  max-width: 560px;
  display: block;
  margin: 0 auto;
}

.sol-cards { display: flex; flex-direction: column; gap: 14px; }
.sol-card {
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sol-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(37, 66, 107, .35);
}
.sol-card__main { flex: 1; min-width: 0; }
.sol-card__title { font-weight: 800; font-size: 24px; margin: 0 0 4px; line-height: 1.3; }
.sol-card__sub   { font-size: 13px; margin: 0; opacity: .9; font-weight: 500; }
.sol-card__more  {
  width: 44px; height: 64px;
  flex-shrink: 0;
  background: url("../assets/more-anchor-yellow.png") no-repeat center / contain;
}

/* Solution CTA pill — wide yellow pill, centred */
.sec-solution__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--yellow);
  color: var(--navy);
  padding: 22px 56px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.sec-solution__cta-wrap { text-align: center; margin-top: 16px; }
.sec-solution__cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow: 0 18px 40px rgba(243, 203, 0, .4);
}
.sec-solution__cta::after {
  content: "";
  width: 26px; height: 36px;
  background: url("../assets/more-anchor-navy.png") no-repeat center / contain;
}

@media (max-width: 1023px) {
  .sec-solution { padding: 56px 32px; }
  .sec-solution__head { margin-bottom: 40px; }
  .sec-solution__head-en { font-size: 48px; }
  .sol-group { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .sol-group--mirror .sol-group__text  { order: 1; }
  .sol-group--mirror .sol-group__illust { order: 2; }
  .sol-group__illust { max-width: 480px; }
}
@media (max-width: 767px) {
  .sec-solution { padding: 40px 20px; }
  .sec-solution__head { margin-bottom: 28px; }
  .sec-solution__head-en { font-size: 36px; }
  .sec-solution__head-ja { font-size: 13px; }
  .sol-group { margin-bottom: 40px; gap: 20px; }
  .sol-group__ribbon { font-size: 13px; padding: 10px 64px 10px 8px; }
  .sol-group__lede { font-size: 14px; line-height: 1.9; }
  .sol-card { padding: 18px 20px; border-radius: 10px; }
  .sol-card__title { font-size: 18px; }
  .sol-card__sub { font-size: 12px; }
  .sol-card__more { width: 34px; height: 52px; }
  .sec-solution__cta { font-size: 14.5px; padding: 16px 32px; gap: 12px; }
  .sec-solution__cta::after { width: 20px; height: 28px; }
}

/* ============================================================
   Section :: Case (industry showcase) — navy bg + bordered cards
   ============================================================ */
.sec-case {
  background: var(--navy);
  color: #fff;
  padding: 80px 40px;
  position: relative;
}
.sec-case__head { text-align: center; margin: 0 auto 56px; }
.sec-case__head-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 56px;
  color: #fff;
  line-height: 1;
}
.sec-case__head-ja {
  font-size: 15px;
  color: #fff;
  margin-top: 10px;
  letter-spacing: .12em;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 1400px;
  margin: 0 auto;
}
.case-card {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 2px;
  padding: 28px 26px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.case-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .04);
}

.case-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.case-card__illust {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  pointer-events: none;
  /* Source SVGs may use various fill colours; force white for the navy bg */
  filter: brightness(0) invert(1);
}
.case-card__label {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .04em;
  margin: 0;
  color: #fff;
  line-height: 1.2;
}
.case-card__sub {
  font-size: 13px;
  line-height: 1.9;
  color: #fff;
  margin: 0;
  font-weight: 400;
  opacity: .95;
}

/* MORE card — yellow border, yellow text, yellow anchor, navy bg */
.case-card--more {
  background: transparent;
  border: 2px solid var(--yellow);
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--yellow);
}
.case-card--more:hover {
  background: rgba(243, 203, 0, .08);
}
.case-card--more .case-more__label {
  color: var(--yellow);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.case-card--more::after {
  content: "";
  width: 40px; height: 56px;
  background: url("../assets/more-anchor-yellow.png") no-repeat center / contain;
}

@media (max-width: 1023px) {
  .sec-case { padding: 56px 32px; }
  .sec-case__head-en { font-size: 44px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .case-card { min-height: 220px; padding: 24px 20px; }
  .case-card__head { margin-bottom: 18px; }
}
@media (max-width: 767px) {
  .sec-case { padding: 40px 20px; }
  .sec-case__head { margin-bottom: 28px; }
  .sec-case__head-en { font-size: 32px; }
  .sec-case__head-ja { font-size: 13px; }
  .case-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .case-card { min-height: 170px; padding: 16px 14px; }
  .case-card__head { gap: 8px; margin-bottom: 12px; }
  .case-card__illust { width: 24px; height: 24px; }
  .case-card__label { font-size: 14px; }
  .case-card__sub { font-size: 11.5px; line-height: 1.7; }
  .case-card--more { grid-column: 1 / -1; min-height: 100px; flex-direction: row; gap: 16px; padding: 18px; }
  .case-card--more .case-more__label { margin-bottom: 0; font-size: 14px; }
  .case-card--more::after { width: 28px; height: 38px; }
}

/* ============================================================
   Section :: Strength — overlap layout matching the design.
   Photo is full-bleed to the right edge; the pale-blue card sits
   on top, anchored to the left. The photo extends BEHIND the card
   on its right portion so the two appear to overlap.
   ============================================================ */
.sec-strength {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 760px;
  background: var(--paper);
  display: flex;
  align-items: center;       /* card is vertically centred in the section */
}
/* Photo — anchored to viewport right, extends well behind the card */
.sec-strength__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 75%;            /* extends ~25% behind the card's right edge */
  z-index: 1;
}
.sec-strength__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Card — sits on top of the photo, left-anchored */
.sec-strength__card {
  position: relative;
  z-index: 2;
  width: 50%;
  min-height: 620px;
  background: rgba(232, 241, 252, .8);  /* #e8f1fc @ 80% — 写真が透けて見える */
  padding: 70px 90px 90px;
  display: flex;
  flex-direction: column;
}
.sec-strength__head-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 56px;
  color: var(--navy);
  line-height: 1;
}
.sec-strength__head-ja {
  font-size: 15px;
  color: var(--navy);
  margin: 8px 0 40px;
  letter-spacing: .12em;
}
.sec-strength__title {
  font-weight: 900;
  font-size: 26px;
  color: var(--navy);
  line-height: 1.55;
  margin: 0 0 28px;
}
.sec-strength__lede {
  font-size: 14px;
  line-height: 2;
  color: #222;
  margin: 0;
}

@media (max-width: 1023px) {
  .sec-strength { min-height: auto; }
  .sec-strength__photo {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .sec-strength__card {
    width: 100%;
    min-height: auto;
    padding: 64px 48px 100px;
  }
  .sec-strength__head-en { font-size: 44px; }
  .sec-strength__title { font-size: 22px; }
}
@media (max-width: 767px) {
  .sec-strength__photo { aspect-ratio: 4 / 3; }
  .sec-strength__card { padding: 48px 24px 96px; }
  .sec-strength__head-en { font-size: 36px; }
  .sec-strength__head-ja { margin-bottom: 24px; }
  .sec-strength__title { font-size: 20px; line-height: 1.6; margin-bottom: 20px; }
  .sec-strength__lede { font-size: 13.5px; }
}

/* ============================================================
   Section :: Crew
   ============================================================ */
.sec-crew {
  background: #e8f1fc;
  padding: 80px 40px;
  position: relative;
  text-align: center;
}
.sec-crew__head { margin: 0 auto 40px; }
.sec-crew__head-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 48px;
  color: var(--navy);
  line-height: 1;
}
.sec-crew__head-ja {
  font-size: 14px;
  color: var(--navy);
  margin-top: 8px;
  letter-spacing: .12em;
}
.sec-crew__wordmark {
  width: 100%;
  max-width: 1040px;
  height: auto;
  margin: 0 auto 24px;
  display: block;
}
.sec-crew__tagline {
  font-family: Outfit, sans-serif;
  font-size: 22px;
  color: var(--navy);
  margin: 0 0 32px;
  letter-spacing: .04em;
}
.sec-crew__body {
  max-width: 880px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 1023px) {
  .sec-crew { padding: 56px 32px; }
  .sec-crew__head-en { font-size: 40px; }
  .sec-crew__tagline { font-size: 18px; }
}
@media (max-width: 767px) {
  .sec-crew { padding: 48px 20px; }
  .sec-crew__head-en { font-size: 32px; }
  .sec-crew__tagline { font-size: 16px; margin-bottom: 24px; }
  .sec-crew__body { font-size: 14px; line-height: 1.9; }
}

/* ============================================================
   Section :: Column (top page summary)
   ============================================================ */
.sec-column {
  background: #e8f1fc;
  padding: 60px 40px 80px;
  position: relative;
}
.sec-column__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: flex-start;
}
.sec-column__head { padding-top: 20px; }
.sec-column__head-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 56px;
  color: var(--navy);
  line-height: 1;
}
.sec-column__head-ja {
  font-size: 14px;
  color: var(--navy);
  margin-top: 8px;
  letter-spacing: .12em;
}

.col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.col-card {
  background: transparent;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}
.col-card:hover { transform: translateY(-3px); }
.col-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid #d6e3f1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.col-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.col-card__photo--placeholder { color: #b3c5dc; font-size: 18px; font-weight: 500; }
.col-card__tag {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 5px 16px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  align-self: flex-start;
  margin-bottom: 10px;
}
.col-card__title {
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.5;
}
.col-card__date {
  font-family: Outfit, sans-serif;
  font-size: 13px;
  color: #6b7c93;
  margin: 0;
}

@media (max-width: 1023px) {
  .sec-column { padding: 40px 32px 64px; }
  .sec-column__inner { grid-template-columns: 1fr; gap: 24px; }
  .sec-column__head { padding-top: 0; text-align: center; }
  .sec-column__head-en { font-size: 44px; }
}
@media (max-width: 767px) {
  .sec-column { padding: 32px 20px 48px; }
  .sec-column__head-en { font-size: 36px; }
  .col-grid { grid-template-columns: 1fr; gap: 16px; }
  .col-card__title { font-size: 15px; }
}

/* Variant: MORE-corner on light backgrounds (no clip-path; just position) */
.sec-strength .more-corner,
.sec-crew .more-corner,
.sec-column .more-corner { /* uses default .more-corner styles */ }