/* Bridge styles for index.html concerns + download inside Roasync LP */
.lp-bridge {
  --text-color: #1B2B4B;
  --primary-color: #2563EB;
  --secondary-color: #3B82F6;
  --background-color: #F5F8FF;
  --gradient-color: linear-gradient(#2563EB, #3B82F6);
  --border-color: #1E3A5F;
  --box-shadow: 0 4px 20px rgba(30, 64, 120, 0.10);
  --easing: cubic-bezier(0.33, 1, 0.68, 1);
  --cta-color: #2563EB;
  --surface-warm: #EEF4FF;
  color: var(--text-color);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  position: relative;
  padding: 96px 0 120px;
  background: #fff;
}
.lp-bridge .l-container {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (width < 768px) {
  .lp-bridge { padding: 64px 0 80px; }
  .lp-bridge .l-container { padding: 0 24px; }
}
.lp-bridge ul { list-style: none; margin: 0; padding: 0; }
.lp-bridge figure { margin: 0; padding: 0; }
.lp-bridge em { font-style: normal; }
.lp-bridge img { height: auto; max-width: 100%; vertical-align: middle; }
.lp-bridge h2 { margin: 0; font-weight: 700; line-height: 1.5; }
.lp-bridge p { margin: 0; }
.lp-bridge dl, .lp-bridge dt, .lp-bridge dd { margin: 0; padding: 0; }
.lp-bridge a { color: inherit; }

.lp-hero-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 40px;
}

/* btn */
.lp-bridge .-btn {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 70px;
  max-width: 300px;
  padding: 0 24px;
  background: var(--cta-color);
  border-radius: 120px;
  box-shadow: var(--box-shadow);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.lp-bridge .-btn::before {
  content: '';
  position: absolute;
  bottom: 240%;
  left: 0;
  width: 100%;
  height: 300%;
  background: #fff;
  transform: skewY(-20deg);
  scale: 1.1;
  transition: .2s var(--easing);
}

.lp-bridge .-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--cta-color);
  border-radius: 120px;
}

.lp-bridge .-btn .label {
  flex: 1;
  position: relative;
}

.lp-bridge .-btn .arw {
  overflow: hidden;
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 32px;
  background: #fff;
  border-radius: 50%;
}

.lp-bridge .-btn .arw::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1741 / 1341;
  width: 17.41px;
  background: url("./arw_btn_orange.svg") no-repeat center center / contain;
  translate: -50% -50%;
  transition: .2s var(--easing);
}

.lp-bridge .-btn .arw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1741 / 1341;
  width: 17.41px;
  background: url("./arw_btn_white.svg") no-repeat center center / contain;
  translate: -50% -50%;
  margin-left: -32px;
  transition: .2s var(--easing);
}

/* hover */
.lp-bridge .-btn:hover {
  color: var(--cta-color);
}

.lp-bridge .-btn:hover::before {
  bottom: -100%;
}

.lp-bridge .-btn:hover .arw {
  background: var(--cta-color);
}

.lp-bridge .-btn:hover .arw::before {
  margin-left: 32px;
}

.lp-bridge .-btn:hover .arw::after {
  margin-left: 0;
}

@media (width < 768px) {

  .lp-bridge .-btn {
    height: 60px;
    max-width: 240px;
    font-size: 18px;
  }


}


/* ---------------- head-group */
.lp-bridge .p-head-group {
  margin-bottom: 64px;
}

.lp-bridge .p-head-group .shoulder {
  width: fit-content;
  margin: 0 auto;
  background: var(--gradient-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

.lp-bridge .p-head-group h2 {
  font-size: 64px;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}

.lp-bridge .p-head-group .lead {
  margin-top: 24px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

@media (width < 768px) {

  .lp-bridge .p-head-group .shoulder {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .lp-bridge .p-head-group h2 {
    font-size: 40px;
  }

  .lp-bridge .p-head-group .lead {
    font-size: 18px;
  }


}




/* ---------------- concerns */
section.concerns::before {
  content: none;
  display: none;
}

@media (width < 767px) {

  section.concerns::before {
    content: none;
    display: none;
  }


}


/* .p-concerns */
.p-concerns .concerns-group {
  position: relative;
  aspect-ratio: 1208 / 898;
  width: min(1208px, 1208px);
  margin: 0 auto;
}

.p-concerns .concerns-group figure {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  aspect-ratio: 1 / 1;
  width: min(583px, 583px);
  translate: -50% 0;
}

.p-concerns .concerns-group ul li {
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  aspect-ratio: 376 / 360;
  width: min(376px, 376px);
  padding: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: .4s var(--easing);
}

.p-concerns .concerns-group.-action ul li {
  opacity: 1;
}

.p-concerns .concerns-group ul li span {
  display: block;
  max-width: 248px;
}

.p-concerns .concerns-group ul li.bubble01 {
  top: min(136px, 136px);
  left: 0;
  background: url("./concerns_bubble_01.svg") no-repeat center center / contain;
}

.p-concerns .concerns-group ul li.bubble02 {
  top: 0;
  left: 50%;
  background: url("./concerns_bubble_02.svg") no-repeat center center / contain;
  translate: -50% 0;
  transition-delay: .1s;
}

.p-concerns .concerns-group ul li.bubble03 {
  top: min(100px, 100px);
  right: 0;
  background: url("./concerns_bubble_03.svg") no-repeat center center / contain;
  transition-delay: .2s;
}

.p-concerns .concerns-group ul li.bubble04 {
  top: min(520px, 520px);
  left: 0;
  background: url("./concerns_bubble_04.svg") no-repeat center center / contain;
  transition-delay: .3s;
}

.p-concerns .concerns-group ul li.bubble05 {
  top: min(524px, 524px);
  right: 0;
  background: url("./concerns_bubble_05.svg") no-repeat center center / contain;
  transition-delay: .4s;
}

@media (width < 1024px) {

  .p-concerns .concerns-group {
    aspect-ratio: auto;
    width: auto;
  }

  .p-concerns .concerns-group ul li + li {
    margin-top: 24px;
  }

  .p-concerns .concerns-group ul li {
    display: grid;
    grid-template-columns: 41px 1fr;
    align-items: start;
    gap: 16px;
    position: static;
    aspect-ratio: auto;
    width: auto;
    padding: 28px 24px;
    background: linear-gradient(180deg, #C8C8C8, #555555) !important;
    border-radius: 24px;
    font-size: 16px;
    translate: 0 0 !important;
  }

  .p-concerns .concerns-group ul li::before {
    content: '';
    aspect-ratio: 41 / 50;
    width: 41px;
    background: url("./ico_concerns.svg") no-repeat center center / contain;
  }

  .p-concerns .concerns-group ul li span {
    max-width: none;
  }

  .p-concerns .concerns-group figure {
    position: static;
    width: auto;
    max-width: 264px;
    margin: 24px auto 0;
    translate: 0 0;
  }


}


.p-concerns .result-group {
  background: var(--primary-color);
  border-radius: 40px;
  color: #fff;
}

.p-concerns .result-group {
  position: relative;
  margin-top: 120px;
  padding: 64px 64px 0 105px;
  background: var(--primary-color);
  border-radius: 40px;
  color: #fff;
}

.p-concerns .result-group::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  aspect-ratio: 58 / 80;
  height: 80px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: var(--primary-color);
  translate: -50% -100%;
}

.p-concerns .result-group .head {
  margin-bottom: 40px;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.5;
}

.p-concerns .result-group .head::before {
  content: none;
  display: none;
}

.p-concerns .result-group .head em {
  color: #FFE566;
}

.p-concerns .result-group .head .-en {
  font-size: 50px;
  font-weight: 700;
}

.p-concerns .result-group .body {
  display: flex;
  align-items: end;
  gap: 48px;
  font-size: 24px;
  line-height: 2;
}

.p-concerns .result-group .txt {
  flex: 1;
  padding: 0 0 72px 16px;
}

.p-concerns .result-group .txt p + p {
  margin-top: 24px;
}

.p-concerns .result-group .txt em {
  color: #FFE566;
  font-size: 32px;
  font-weight: 700;
}

.p-concerns .result-group figure {
  width: 352px;
}

@media (width < 1024px) {

  .p-concerns .result-group {
    padding: 48px 40px 0;
  }

  .p-concerns .result-group .body {
    display: block;
  }

  .p-concerns .result-group .txt {
    padding: 0;
  }

  .p-concerns .result-group figure {
    margin-left: auto;
    margin-top: 40px;
  }


}

@media (width < 767px) {

  .p-concerns .result-group {
    margin-top: 88px;
    padding: 48px 24px 0;
  }

  .p-concerns .result-group::before {
    height: 48px;
  }

  .p-concerns .result-group .head {
    margin-bottom: 40px;
    font-size: 26px;
  }

  .p-concerns .result-group .head .-en {
    font-size: 28px;
  }

  .p-concerns .result-group .body {
    font-size: 18px;
  }

  .p-concerns .result-group .body em {
    font-size: 20px;
  }

  .p-concerns .result-group figure {
    width: auto;
    max-width: 352px;
  }


}




/* ---------------- download */
section.download {
  background: var(--surface-warm);
}

section.download::before {
  content: none;
  display: none;
}

@media (width < 768px) {

  section.download {
    background: var(--surface-warm);
  }

  section.download::before {
    content: none;
    display: none;
  }


}


/* p-download */
.p-download .wrap {
  display: grid;
  grid-template-columns: 51.69% 1fr;
  gap: 32px;
}

.p-download .container {
  padding: 56px;
  overflow: hidden;
  background: #fff;
  border-radius: 24px;
}

.p-download .copy {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  line-height: 1.5;
}

.p-download .copy::before,
.p-download .copy::after {
  content: '';
  display: block;
  aspect-ratio: 253 / 480;
  width: 25.3px;
  background: url("./download_copy_01.svg") no-repeat center center / contain;
  rotate: -10deg;
}

.p-download .copy::after {
  scale: -1 1;
  rotate: 10deg;
}

.p-download .copy .txt {
  flex: 1;
}

.p-download figure {
  margin-bottom: 40px;
}

.p-download .head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.p-download .head::after {
  content: '';
  height: 1px;
  background: var(--primary-color);
}

.p-download ul li + li {
  margin-top: 4px;
}

.p-download ul li {
  position: relative;
  padding-left: 16px;
}

.p-download ul li::before {
  content: '';
  position: absolute;
  top: calc((1em * 1.8) / 2);
  left: 0;
  aspect-ratio: 1 / 1;
  width: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  translate: 0 -50%;
}

.p-download ul .min {
  font-size: 13px;
}

@media (width < 1024px) {

  .p-download .wrap {
    grid-template-columns: 1fr;
  }


}

@media (width < 768px) {

  .p-download .wrap {
    gap: 24px;
  }

  .p-download .container {
    padding: 24px 24px 32px;
  }

  .p-download figure {
    margin-bottom: 24px;
  }

  .p-download .container.form {
    padding: 24px 16px 32px;
  }

  .p-download .copy {
    font-size: 18px;
  }

  .p-download .head {
    margin-bottom: 16px;
  }


}


.lp-bridge .lazy-form__lead {
  margin-bottom: 24px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.6;
}


.lp-bridge .lazy-form .field {
  margin-bottom: 16px;
}


.lp-bridge .lazy-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}


.lp-bridge .lazy-form label span {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #F26A2E;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}


.lp-bridge .lazy-form label span.opt {
  background: transparent;
  color: #7A5E56;
  font-weight: 500;
  padding: 0;
}


.lp-bridge .lazy-form input,
.lp-bridge .lazy-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #E5C9BF;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}


.lp-bridge .lazy-form input::placeholder,
.lp-bridge .lazy-form textarea::placeholder {
  color: #B59A92;
  opacity: 1;
}


.lp-bridge .lazy-form input:focus,
.lp-bridge .lazy-form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 35%, white);
  border-color: var(--primary-color);
}


.lp-bridge .lazy-form .submit-btn {
  margin-top: 8px;
  max-width: none;
  width: 100%;
  justify-content: center;
  gap: 16px;
}


.lp-bridge .lazy-form .form-note {
  margin-top: 16px;
  font-size: 12px;
  color: #7A5E56;
  line-height: 1.7;
}


.lp-bridge .company-box {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #F0D2C8;
}


.lp-bridge .company-box__title {
  margin-bottom: 12px;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 700;
}


.lp-bridge .company-box dl > div {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
}


.lp-bridge .company-box dt {
  color: #7A5E56;
  font-weight: 700;
}


/* hero shoulder text fallback sizing */
.lp-bridge .p-hero .shoulder img {
  height: auto;
}


/* FV CTA: keep label on one line */
.lp-bridge .p-hero .btns {
  width: 340px;
}


.lp-bridge .p-hero .btns .-btn {
  width: 340px;
}


.lp-bridge .p-hero .btns .-btn .label {
  white-space: nowrap;
}


@media (width < 768px) {

  .lp-bridge .p-hero .btns {
    width: min(300px, calc(100vw - 32px));
  }


  .lp-bridge .p-hero .btns .-btn {
    width: 100%;
    max-width: none;
    padding: 0 20px;
    font-size: 17px;
  }


}



/* ensure concerns bubbles animate when scrolled into view */
.p-concerns .concerns-group.-action ul li {
  opacity: 1;
}



/* Tone: Roasync blue accents */
.lp-bridge .p-head-group .shoulder { color: #2563EB; }
.lp-bridge .p-concerns .result-group .head em,
.lp-bridge .p-concerns .result-group .txt em { color: #2563EB; }
.lp-bridge .-btn {
  background: linear-gradient(90deg, #F59E0B, #F26A2E);
}
.lp-bridge .p-download .copy .txt { color: #2563EB; }
.lp-bridge .p-download ul li::before { background: #2563EB; }
.lp-bridge .lazy-form label span:not(.opt) {
  background: #F26A2E;
  color: #fff;
}
.lp-bridge .lazy-form input:focus,
.lp-bridge .lazy-form textarea:focus { border-color: #F26A2E; box-shadow: 0 0 0 3px rgba(242,106,46,.18); }