/* ========================================
  u-pageMv
  ======================================== */
.u-pageMv {
  position: relative;
  height: 752rem;
  padding: 96rem 0 150rem; /* 下余白はframeの食み出し量に合わせて調整 */
  background: url("/drivers/enjoy/2025etcsmart/facility/images/facility_mv_bg.png") no-repeat center top / cover;
}

.u-pageMv__frame {
  overflow: hidden;
  width: 100%;
  height: 671rem;
  margin-top: 24rem;
  padding: 32rem;
  border-radius: 8rem;
  background: #fff;
  box-shadow: 6px 10px 24px 0 rgba(47, 119, 164, .10);
}

.u-pageMv__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


@media screen and (max-width: 768px) {
  .u-pageMv {
    height: 960rem;
    padding: 144rem 0 0;
    background-image: url("/drivers/enjoy/2025etcsmart/facility/images/sp_facility_mv_bg.png");
  }

  .u-pageMv__frame {
    height: 896rem;
    margin-top: 48rem;
    border-radius: 16rem;
  }
}

.u-section__bg {
  padding-top: 220rem;
  background-image: url("/drivers/enjoy/2025etcsmart/images/road_bg.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}
/* ========================================
  u-partners
  ======================================== */

.u-partners__ttl {
  color: #0080d0;
  font-size: 36rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
  text-align: center;
}
.u-partners__dsc {
  margin-top: 16rem;
  color: #3c3c3c;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .16em;
  text-align: center;
}
.u-bgWrap {
  position: relative;
  z-index: 1;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  background: none;
}

.u-bgWrap::before {
  content: "";
  position: absolute;
  top: 67rem; /* 背景だけ下げる量 */
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(100% - 40rem);
  border-radius: 160rem 160rem 0 0;
  background: #ddf4fd;
}
.u-partners__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 33rem;
  margin-top: 56rem;
  padding: 0;
  list-style: none;
}

.u-partners__logo {
  width: calc(33.333% - 11rem);
}

.u-partners__logoLink {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 24rem 66rem;
  border-radius: 16rem;
  background: #fff;
  box-shadow: 6px 10px 24px 0 rgba(47, 119, 164, .10);
  transition: opacity .3s;
  /* 提携施設が1件のため一旦クリック・ホバーを無効化（複数化したら削除） */
  pointer-events: none;
}

.u-partners__logoLink.is-active {
  outline: 2rem solid #0080d0;
}

/* 提携施設が1件のため一旦ホバーを無効化（複数化したら復帰）
.u-partners__logoLink:hover {
  opacity: .7;
}
*/

.u-partners__logoImg {
  width: 248rem;
}

.u-partners__tabs {
  display: flex;
  gap: 24rem;
  margin-top: 32rem;
}

.u-partners__tab {
  flex: 1;
  padding: 14rem 0;
  border-radius: 8rem;
  background: #fff;
  color: #0080d0;
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.u-partners__tab.is-active {
  background: #3aa6ea;
  color: #fff;
}

.u-partners__tab.is-disabled,
.u-partners__tab:disabled {
  background: #d1dadf;
  color: #eaf6fb;
  cursor: default;
  pointer-events: none;
}

.u-brand__panel {
  display: none;
}

.u-brand__panel.is-active {
  display: block;
}

@media screen and (max-width: 768px) {
  .u-partners__ttl {
    font-size: 56rem;
    line-height: 1.5;
  }
  .u-partners__dsc {
    margin-top: 32rem;
    font-size: 32rem;
  }
}
/* ========================================
  u-howto
  ======================================== */
.u-howto {
  padding: 24rem 0 220rem;
}


.u-howto__panel {
  display: none;
}

.u-howto__panel.is-active {
  display: block;
}

.u-howto__steps {
  padding: 0;
  list-style: none;
}

.u-howto__step {
  display: flex;
  overflow: hidden;
  align-items: center;
  padding: 62rem 0 47rem;
  border-radius: 24rem;
  background: #fff;
}

.u-howto__step + .u-howto__step {
  margin-top: 32rem;
}


.u-howto__stepImgWrp {
  display: flex;
  flex: 0 0 50%;
  justify-content: center;
  align-items: center;
}

.u-howto__stepImg {
  width: 330rem;
  height: 214rem;
}

.u-howto__step--overflow .u-howto__stepImg img {
  position: relative;
  bottom: 0;
  left: -54rem;
  width: 496rem;
}

.u-howto__stepDivider {
  width: 2rem;
  height: 136rem;
}


.u-howto__stepTxt {
  flex: 1;
  margin-left: 40rem;
  padding-right: 84rem;
}

.u-howto__stepBadge {
  display: inline-flex;
  align-items: center;
  padding: 7rem 20rem 6rem;
  border-radius: 40rem;
  background: #3aa6ea;
  color: #fff;
  font-family: "Urbanist";
  font-size: 14rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.u-howto__stepSubTtl {
  margin-top: 16rem;
  font-size: 20rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

.u-howto__stepDesc {
  margin-top: 8rem;
  color: #3c3c3c;
  font-size: 14rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
}
.u-howto__stepDesc.--annotation {
  padding-left: 1em;
  font-size: 13rem;
  text-indent: -1em;
}

.u-howto__appBtns {
  display: flex;
  gap: 16rem;
  margin-top: 16rem;
  padding: 0;
  list-style: none;
}

.u-howto__appBtn {
  width: 134rem;
}

.u-howto__appBtn a {
  display: block;
  transition: opacity .3s;
}

.u-howto__appBtn a:hover {
  opacity: .7;
}

.u-howto__appBtn img {
  display: block;
  width: 100%;
  height: auto;
}

.u-howto__stepDesc a {
  color: #0080d0;
  text-decoration: underline;
}

.u-howto__detail {
  margin-top: 72rem;
  color: #0080d0;
  font-size: 36rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
  text-align: center;
}


.u-ctaBnr {
  display: block;
  margin-top: 48rem;
  transition: opacity .3s;
}

.u-ctaBnr:hover {
  opacity: .7;
}

.u-ctaBnr__sub {
  font-size: 16rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
}


.u-ctaBnr__label--blue {
  margin: 0 6rem;
  padding: 2rem 8rem;
  background: #2dc0da;
  color: #fff;
}

.u-ctaBnr__ttl {
  margin-top: 16rem;
  font-size: 36rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .18em;
}

.u-ctaBnr__btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  min-width: 200rem;
  margin-top: 19rem;
  padding: 12rem 32rem;
  border-radius: 8rem;
  background: #2dc0da;
  color: #fff;
  font-size: 14rem;
  font-weight: 700;
  line-height: 1.6;
  transition: opacity .3s;
}


/* アイコンはmask or 画像に応じて調整 */
.u-ctaBnr__btn::after {
  content: "";
  position: absolute;
  right: 23rem;
  display: block;
  flex-shrink: 0;
  width: 14rem;
  height: 14rem;
  background: currentColor;
  mask: url("/drivers/enjoy/2025etcsmart/common/images/icn_blank.svg") no-repeat center / contain;
  -webkit-mask: url("/drivers/enjoy/2025etcsmart/common/images/icn_blank.svg") no-repeat center / contain;
}


@media screen and (max-width: 768px) {
  .u-section__bg {
    padding: 400rem 0 208rem;
    background-image: url("/drivers/enjoy/2025etcsmart/images/sp_top_hero_bg.png");
  }
  /* --- u-partners --- */

  .u-partners__logoLink {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 22rem 40rem 20rem;
    border-radius: 16rem;
    background: #fff;
    box-shadow: 6px 10px 24px 0 rgba(47, 119, 164, .10);
    transition: opacity .3s;
    /* 提携施設が1件のため一旦クリック・ホバーを無効化（複数化したら削除） */
    pointer-events: none;
  }
  .u-partners__logoLink.is-active {
    outline: 4rem solid #0080d0;
  }

  .u-partners__logos {
    flex-wrap: wrap;
    /* justify-content: start; */
    gap: 16rem 30rem;
    margin-top: 80rem;
  }

  .u-partners__logo {
    width: calc(50% - 15rem);
  }

  .u-partners__logoImg {
    width: 248rem;
  }

  .u-partners__tabs {
    gap: 30rem;
    margin-top: 32rem;
  }

  .u-partners__tab {
    padding: 16rem 0;
    border-radius: 16rem;
    font-size: 28rem;
  }

  /* --- u-howto --- */
  .u-howto {
    padding: 24rem 0 96rem;
  }

  .u-howto__ttl {
    font-size: 56rem;
  }


  .u-howto__step {
    flex-direction: column;
    align-items: flex-start;
    padding: 72rem 48rem 64rem;
    border-radius: 32rem;
  }

  .u-howto__step + .u-howto__step {
    margin-top: 32rem;
  }

  .u-howto__stepImgWrp {
    flex: none;
    width: 100%;
  }

  .u-howto__stepImg {
    width: 384rem;
    height: 234rem;
  }

  /* step2のはみ出しをSPではリセット */
  .u-howto__step--overflow .u-howto__stepImg img {
    bottom: 32rem;
    left: -80rem;
    width: 626rem;
  }

  .u-howto__stepDivider {
    width: 582rem;
    height: 4rem;
    margin-top: 70rem;
    background-image: url("/drivers/enjoy/2025etcsmart/facility/images/sp_step_line.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .u-howto__stepTxt {
    margin-top: 40rem;
    margin-left: 0;
    padding-right: 0;
  }

  .u-howto__stepBadge {
    padding: 16rem 64rem;
    font-size: 32rem;
  }

  .u-howto__stepSubTtl {
    margin-top: 32rem;
    font-size: 40rem;
  }

  .u-howto__stepDesc {
    margin-top: 16rem;
    font-size: 28rem;
    letter-spacing: .16em;
  }

  .u-howto__stepDesc.--annotation {
    padding-left: 1em;
    font-size: 26rem;
    text-indent: -1em;
  }

  .u-howto__appBtns {
    gap: 32rem;
    margin-top: 32rem;
  }

  .u-howto__appBtn {
    width: 268rem;
  }

  .u-howto__detail {
    margin-top: 96rem;
    font-size: 56rem;
  }

  /* --- u-ctaBnr --- */
  .u-ctaBnr {
    height: 1120rem;
    margin-top: 64rem;
  }

  .u-ctaBnr__sub {
    font-size: 32rem;
    line-height: 2;
  }

  .u-ctaBnr__label--blue {
    margin: 0 12rem;
    padding: 4rem 16rem;
  }

  .u-ctaBnr__ttl {
    margin-top: 32rem;
    font-size: 64rem;
    line-height: 1.44;
    letter-spacing: .18em;
    text-wrap: nowrap;
  }

  .u-ctaBnr__btn {
    min-width: 400rem;
    margin-top: 48rem;
    padding: 20rem 56rem;
    border-radius: 16rem;
    font-size: 28rem;
  }

  .u-ctaBnr__btn::after {
    right: 32rem;
    width: 24rem;
    height: 24rem;
  }
}