@font-face {
  font-family: Gilroy;
  src: url("../fonts/Gilroy-ExtraBold.otf") format("otf");
  font-weight: ExtraBold;
  font-style: normal;
}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.txt-center {
  text-align: center !important;
}
/* end reset */
a {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  text-decoration: none;
}
.absolute {
  position: absolute;
}
.myliking_form {
  .activation-container {
    padding: 4rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
    width: 100%;
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
    @media (max-width: 500px) {
      padding: 4rem 0;
    }
    .title {
      font-size: 24px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 8px;
      text-align: center;
    }

    .subtitle {
      color: #666;
      text-align: center;
      margin-bottom: 32px;
      font-size: 14px;
    }

    .form-group {
      margin-bottom: 32px;
      .form-feedback {
        padding-top: 2rem;
        display: block !important;
      }
      .label {
        display: block;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
        font-size: 14px;
      }
      .code-inputs {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        @media (max-width: 500px) {
          gap: 8px;
        }
        .code-input {
          width: 57px;
          height: 57px;
          border: 2px solid #e2e8f0;
          border-radius: 12px;
          font-size: 24px;
          font-weight: 600;
          text-align: center;
          color: #1a1a1a;
          background: #fff;
          transition: all 0.2s ease;
          outline: none;

          @media (max-width: 500px) {
            width: 40px;
            height: 40px;
            font-size: 16px;
            padding: 0;
          }
        }
      }
    }

    .required {
      color: #e53e3e;
      margin-left: 4px;
    }

    @keyframes shake {
      0%,
      100% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-4px);
      }
      75% {
        transform: translateX(4px);
      }
    }

    .buttons {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      margin-top: 32px;
    }

    .input_button_form {
      display: flex;
      justify-content: center;
      flex-direction: row;
      button {
        margin-left: 16px;
        margin-right: 16px;
        padding: 14px 50px;
        min-width: 316px;

        font-size: 28px;
        text-align: center;
        color: #fff;
        box-sizing: border-box;
        text-decoration: none;
        transition: 0.3s;
        -webkit-transition: 0.3s;

        @media (max-width: 767px) {
          margin-left: 2.133vw;
          margin-right: 2.133vw;
          padding: 10px 3.733vw;
          font-size: clamp(15px, 3.2vw, 24px);
          min-width: 40vw;
        }
      }
    }
  }
  .resend_button_form {
    display: flex;
    justify-content: end;
    flex-direction: row;
    button {
      cursor: pointer;
      margin-left: 16px;
      margin-right: 16px;
      padding: 14px 30px;
      background-color: #878787;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-sizing: border-box;
      text-decoration: none;
      transition: 0.3s;
      -webkit-transition: 0.3s;

      @media (max-width: 500px) {
        margin-left: 2.133vw;
        margin-right: 2.133vw;
        padding: 10px 3.733vw;
        font-size: 12px;
        min-width: 40vw;
      }
    }
  }
}
img {
  max-width: 100%;
}
button {
  font-family: Source Han Sans JP, sans-serif;
}
body {
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  /* font-family: Source Han Sans JP, sans-serif;
  font-size: 18px; */
  font-weight: bold;
  line-height: 1.5;
  box-sizing: border-box;
}
.container {
  max-width: 1100px;
  /*width: 100%;*/
  margin: 0 auto;
}
.mylinking-title {
  font-size: 45px;
  font-weight: 900;
  color: #0e4069;
  text-align: center;
}
.wrapper {
  overflow-x: hidden;
  width: 100%;
  /*min-width: 1400px;*/
}
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 48px;
  cursor: pointer;
}
.text-center {
  text-align: center;
}
.des-complete {
  font-size: 22px;
  font-weight: 400;
  p + p {
    margin-top: 25px;
  }
}
/*------- header --------*/
.head-contain {
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 0 33px;
}
.head-contain .logo img {
  width: 213px;
}
.head-contain-v1 .logo img {
  width: 158px;
}
.head-contain .menu ul {
  display: flex;
  align-items: center;
  grid-gap: 24px;
  gap: 24px;
  font-size: 18px;
  font-weight: bold;
}
.head-contain .menu ul li a {
  color: #0e4069;
}
.head-contain .menu ul li:hover a {
  color: #0068b4;
}
.head-contain .menu ul li {
  transition: 0.3s;
  -webkit-transition: 0.3s;
}
.head-contain .menu ul li.register {
  border-radius: 20px;
  height: 40px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  background: #0068b4;
  display: flex;
}
.head-contain .menu ul li.register a {
  color: #fff;
}
.head-contain .menu ul li.register:hover {
  background: #00c7fd;
}
.head-contain .menu ul li.login {
  border-radius: 20px;
  height: 40px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  background: #eee;
  display: flex;
}
.head-contain .menu ul li.login:hover a {
  color: #0068b5;
}

/*------- banner-notice  --------*/
.banner-notice {
  background: #00c6fc;
  padding: 48px 0;
  position: relative;
}
.banner-notice .user1 {
  left: 42px;
  top: 248px;
}
.banner-notice .user2 {
  left: 150px;
  top: 412px;
}
.banner-notice .user3 {
  left: 72px;
  top: 564px;
}
.banner-notice .user5 {
  right: -10px;
  top: 84px;
}
.banner-notice .user6 {
  right: 85px;
  top: 228px;
}
.banner-notice .user7 {
  right: 20px;
  top: 341px;
}
.banner-notice .user8 {
  right: 200px;
  top: 418px;
}
.banner-notice .user9 {
  right: 90px;
  bottom: 190px;
}
.banner-notice .banner-notice-inner {
  max-width: 890px;
  margin: 0 auto;
}
.banner-notice .banner-notice-inner h4 {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}
.banner-notice .banner-notice-inner h3 {
  font-size: 64px;
  line-height: 86px;
  margin-bottom: 55px;
  text-align: center;
  font-weight: 900;
}
.banner-notice .banner-notice-inner .price-box {
  max-width: 735px;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
  position: relative;
  text-align: center;
  padding: 7px;
}
.price-box .price {
  color: #0068b4;
}
.price-box .price sup {
  font-size: 35px;
}
.price-box .price .number {
  font-family: Gilroy;
  font-size: 149px;
}
.price-box .price .yen {
  font-size: 60px;
  margin-left: 10px;
}
.price-box .out-price {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.price-box .out-price .tag {
  background: url(../images/tag.svg) no-repeat;
  width: 128px;
  height: 80px;
  text-align: left;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 22px;
}
.price-box .out-price .tag p {
  font-size: 24px;
}
.price-box .btn-free-trial {
  max-width: 500px;
  width: 100%;
  height: 70px;
  background: #0068b4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
  margin: 12px auto 0;
}
.price-box .txt-note {
  font-size: 14px;
  font-weight: normal;
  margin: 30px 0 23px;
}
.price-box .tooltip {
  position: absolute;
  right: -50px;
  top: -60px;
  background: url(../images/tooltip.svg) no-repeat;
  width: 158px;
  height: 158px;
  font-size: 28px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #0068b4;
}
.price-box .tooltip p {
  font-size: 52px;
}
.banner-notice-inner .des {
  margin: 48px 0;
  font-size: 20px;
}

/*------- utilities-block   --------*/
.utilities-block {
  position: relative;
  padding: 100px 0 125px;
  background: #eee;
}
.utilities-block .user4 {
  left: 92px;
  top: -115px;
}
.utilities-block .user10 {
  right: 168px;
  top: -125px;
}
.utilities-block .user11 {
  top: 10px;
  left: -10px;
}
.utilities-block .utilities-block-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 70px;
}
.utilities-block .utilities-block-inner .item {
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.utilities-block .utilities-block-inner .item .top {
  background: #00c6fc;
  height: 206px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.utilities-block .utilities-block-inner .item .top h4 {
  font-size: 28px;
  font-weight: 900;
  margin-top: 8px;
  color: #0e4069;
}
.utilities-block .utilities-block-inner .item .info {
  padding: 20px;
  font-size: 18px;
  font-weight: normal;
}

/*------- elimination-act-block   --------*/
.elimination-act-block {
  padding: 80px 0 125px;
  position: relative;
  background: #fff;
}
.elimination-act-block .user12 {
  top: -125px;
  right: 85px;
}
.elimination-act-block .user13 {
  top: -20px;
  right: -10px;
}
.elimination-act-block .des {
  font-weight: normal;
  margin: 60px 0;
}
.elimination-act-block .standard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.elimination-act-block .standard .item {
  height: 234px;
  background: #0068b4;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 12px;
}
.elimination-act-block .standard .item h3 {
  color: #fff;
  font-size: 48px;
  font-weight: 900;
  padding: 0 10px;
}
.elimination-act-block .standard .item .title {
  background: url(../images/tooltip-title.png) no-repeat;
  width: 179px;
  height: 64px;
  font-size: 30px;
  color: #0068b4;
  text-align: center;
  position: absolute;
  top: -14px;
}
.elimination-act-block .rules {
  margin-top: 32px;
  background: #eee;
  border-radius: 12px;
  padding: 30px;
  font-size: 18px;
  font-weight: normal;
}
.elimination-act-block .rules a {
  color: #003f87;
  text-decoration: underline;
}

/*------- service-provider-block   --------*/
.service-provider-block {
  padding: 90px 0 150px;
  background: #00c6fc;
  position: relative;
}
.service-provider-block .user14 {
  top: -20px;
  left: -20px;
}
.service-provider-block .user15 {
  top: -104px;
  left: 110px;
}
.service-provider-block .service-provider-content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 55px;
}
.service-provider-block .service-provider-content .item {
  height: 68px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.service-provider-block .service-provider-content .item span {
  flex: 1;
}
.service-provider-block .service-provider-content .item .img {
  width: 58px;
  padding: 0 5px;
  text-align: center;
  box-sizing: border-box;
}

/*------- instructions-use-functions   --------*/
.instructions-use-functions {
  padding: 80px 0;
  position: relative;
  background: #0068b4;
}
.instructions-use-functions .user16 {
  right: 146px;
  top: -100px;
}
.instructions-use-functions .user17 {
  right: 24px;
  top: -174px;
}
.instructions-use-functions .instructions-content {
  display: flex;
  align-items: center;
}
.instructions-content .left {
  width: 330px;
  margin-right: 50px;
}
.instructions-content .right {
  flex: 1;
  color: #fff;
}
.instructions-content .right h3 {
  font-size: 45px;
  font-weight: 900;
  margin-bottom: 30px;
}
.instructions-content .right p {
  font-weight: normal;
}

/*------- web-accessibility   --------*/
.web-accessibility {
  padding: 105px 0 155px;
  position: relative;
}
.web-accessibility .user18 {
  left: 28px;
  top: -14px;
}
.web-accessibility .user19 {
  top: -57px;
  left: 134px;
}
.web-accessibility .user20 {
  bottom: 120px;
  right: 5px;
}
.web-accessibility .des {
  font-weight: normal;
  margin: 40px 0 50px;
}
.web-accessibility .content .title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.web-accessibility .content .title h4 {
  display: inline-block;
  padding: 9px 35px;
  background: #ffca1a;
  border-radius: 12px;
  font-size: 32px;
  color: #0068b4;
  position: relative;
}
.web-accessibility .content .title:before {
  content: "";
  width: 46px;
  height: 57px;
  position: absolute;
  bottom: -18px;
  background: url(../images/ico-arrow-down.svg) no-repeat;
  display: inline-block;
}
.web-accessibility .content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.web-accessibility .content ul li {
  height: 188px;
  display: flex;
  border-radius: 12px;
  background: #eee;
  overflow: hidden;
}
.web-accessibility .content ul li .left {
  width: 212px;
  background: #00c6fc;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.web-accessibility .content ul li .right {
  flex: 1;
  display: flex;
  padding: 0 30px;
  align-items: center;
  color: #0e4069;
  font-size: 22px;
}
/*--------- connection-block -----------*/
.connection-block {
  padding: 90px 0 470px;
  background: #00c6fc url(../images/bg-people-1.png) no-repeat bottom center;
  text-align: center;
  background-size: contain;
  position: relative;
}
.connection-block .user21 {
  top: -110px;
  right: 52px;
}
/*--------- cost-price-plan -------------*/
.cost-price-plan {
  padding: 115px 0 75px;
  position: relative;
  background: #eee;
}
.cost-price-plan .user22 {
  left: 67px;
  top: -10px;
}
.cost-price-plan .user23 {
  left: 150px;
  top: 75px;
}
.cost-price-plan .user24 {
  right: 40px;
  bottom: 72px;
}
.cost-price-plan .cost-price-plan-cont {
  display: flex;
  gap: 30px;
  margin-top: 85px;
}
.cost-price-plan .cost-price-plan-cont .plan-1 {
  width: 352px;
}
.cost-price-plan .cost-price-plan-cont .plan-2 {
  flex: 1;
}
.cost-price-plan .cost-price-plan-cont .plan {
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cost-price-plan .cost-price-plan-cont .plan .title {
  background: #00c6fc;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 30px;
}
.cost-price-plan .cost-price-plan-cont .plan-1 .content {
  font-family: Gilroy;
  font-size: 184px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0068b4;
  line-height: 1;
}
.cost-price-plan .cost-price-plan-cont .plan-1 .content span {
  font-size: 81px;
  vertical-align: 12px;
}
.cost-price-plan .cost-price-plan-cont .plan-2 .content {
  padding: 0 60px 60px 67px;
}
.cost-price-plan .price-box {
  position: relative;
}
.cost-price-plan .cost-price-plan-cont .plan-2 .tax {
  font-size: 36px;
  color: #0068b4;
  margin-top: -20px;
}
.cost-price-plan .cost-price-plan-cont .plan-2 .txt-note {
  margin-top: 6px;
  margin-bottom: 0;
  color: #0068b4;
}
.cost-price-plan .cost-price-plan-cont .plan-2 .out-payment {
  margin-top: 15px;
  display: flex;
  gap: 18px;
}
.cost-price-plan .plan-2 .payment-l {
  width: 77px;
  height: 77px;
  border-radius: 12px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: normal;
}
.cost-price-plan .plan-2 .payment-r {
  flex: 1;
  height: 77px;
  border-radius: 12px;
  background: #eee;
  display: flex;
  align-items: center;
  padding: 15px 18px;
  box-sizing: border-box;
}
.cost-price-plan .plan-2 .payment-r .txt {
  margin-right: 40px;
  font-weight: normal;
  max-width: 90px;
}
.cost-price-plan .plan-2 .payment-r ul {
  display: flex;
  gap: 8px;
}
.cost-price-plan .plan-2 .btn-free-trial {
  margin-top: 45px;
}
.cost-price-plan .price-box .out-price {
  margin-top: 0;
}
.cost-price-plan .group-note {
  font-weight: normal;
  margin-top: 50px;
}
.cost-price-plan .price-box .out-price .tag {
  color: #0068b4;
  background-image: url(../images/tag-1.svg);
  width: 110px;
  height: 78px;
  line-height: 1;
}

/*----- price-mylinking-block ------*/
.price-mylinking-block {
  padding: 100px 160px;
  position: relative;
  background: #00c6fc;
}
.price-mylinking-block .user25 {
  right: 250px;
  top: 106px;
}
.price-mylinking-block .user26 {
  right: 96px;
  top: -26px;
}
.price-mylinking-block .user27 {
  left: 82px;
  bottom: 155px;
}
.price-mylinking-block .price-mylinking-content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 60px;
}
.price-mylinking-block .price-mylinking-content .item .title {
  height: 95px;
  background: #e5e5e5;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 28px;
  text-align: center;
}
.price-mylinking-block .price-mylinking-content .item-1 .title {
  font-size: 20px;
}
.price-mylinking-block .price-mylinking-content .item .bd {
  height: 144px;
  background: #fff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  flex-direction: column;
}
.price-mylinking-block .price-mylinking-content .item .bd span {
  font-size: 20px;
}
.price-mylinking-block .price-mylinking-content .item .bd p {
  font-size: 32px;
}
.price-mylinking-block .price-mylinking-content .item-1 .bd p {
  font-size: 28px;
}
.price-mylinking-block .price-mylinking-content .item.active .title {
  background: #0068b4;
  color: #fff;
  font-family: Gilroy;
  font-size: 42px;
}
.price-mylinking-block .price-mylinking-content .item.active .title:after {
  content: "";
  width: 100%;
  height: 100%;
  border: 4px solid #0068b4;
  border-top: 10px solid #0068b4;
  position: absolute;
  top: -10px;
  left: -4px;
  right: 0;
  bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.price-mylinking-block .price-mylinking-content .item.active .bd {
  color: #0e4069;
}
.price-mylinking-block .price-mylinking-content .item.active .bd:after {
  content: "";
  width: 100%;
  height: 100%;
  border: 4px solid #0068b4;
  border-top: none;
  position: absolute;
  top: 0;
  left: -4px;
  bottom: -2px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.price-mylinking-block .price-mylinking-content .item.active .bd p {
  font-size: 47px;
  font-weight: 900;
}
.price-mylinking-tooltip {
  text-align: center;
  margin-top: 28px;
}
.price-mylinking-tooltip p {
  text-align: center;
  display: inline-block;
  font-size: 32px;
  padding: 7px 25px;
  border-radius: 12px;
  color: #0068b4;
  position: relative;
  background: #ffca1a;
}
.price-mylinking-tooltip p:after {
  background: url(../images/ico-arrow-up.svg) no-repeat;
  width: 62px;
  height: 52px;
  content: "";
  display: inline-block;
  right: 60px;
  top: -40px;
  position: absolute;
}
.price-mylinking-block .out-btn {
  display: flex;
  margin-top: 145px;
}
.price-mylinking-block .btn-mylinking {
  height: 70px;
  background: #0068b4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 9999px;
  position: relative;
  padding: 0 70px;
  margin: 0 auto;
}
.price-mylinking-block .tooltip {
  position: absolute;
  top: -110px;
  left: -120px;
  width: 158px;
  height: 158px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.price-mylinking-block .tooltip:before {
  content: "";
  background: url(../images/tooltip.svg) no-repeat;
  transform: rotate(-95deg);
  width: 158px;
  height: 158px;
  font-size: 28px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #0068b4;
  position: absolute;
  top: 0;
  left: 0;
}
.price-mylinking-block .tooltip span {
  position: relative;
  font-size: 28px;
  color: #0068b4;
  line-height: 1;
}
.price-mylinking-block .tooltip p {
  position: relative;
  font-size: 52px;
  color: #0068b4;
  line-height: 1;
}

/*------ service-introduction-flow ---------*/
.service-introduction-flow {
  background: #eee;
  padding: 120px 0;
  position: relative;
}
.service-introduction-flow .user28 {
  left: -50px;
  top: -37px;
}
.service-introduction-flow .user29 {
  left: 153px;
  top: -120px;
}
.service-introduction-flow .user30 {
  right: 15px;
  bottom: 100px;
}
.service-introduction-flow .content {
  margin-top: 105px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 37px;
}
.service-introduction-flow .content .item {
  position: relative;
}
.service-introduction-flow .content .item + .item:after {
  width: 23px;
  height: 38px;
  content: "";
  display: block;
  position: absolute;
  left: -29px;
  top: 50%;
  margin-top: -19px;
  background: url(../images/ico-arrow-right.svg) no-repeat;
}
.service-introduction-flow .content .images {
  height: 248px;
  display: flex;
  background: #00c6fc;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.service-introduction-flow .content .number {
  width: 66px;
  height: 66px;
  border-radius: 100%;
  background: #0068b4;
  color: #fff;
  font-family: Gilroy;
  font-size: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  margin-top: -33px;
  margin-left: -33px;
}
.service-introduction-flow .content .des {
  padding: 24px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background: #fff;
  font-weight: normal;
}
.service-introduction-flow .content .des a {
  color: #003f87;
}
.service-introduction-flow .group-note {
  font-weight: normal;
  margin-top: 35px;
}

/*--------- fqa-block ---------*/
.fqa-block {
  padding: 110px 0 200px;
  position: relative;
}
.fqa-block .fqa-content {
  margin-top: 65px;
}
.fqa-block .fqa-content .item {
  padding: 10px 20px;
  background: #eee;
  color: #003f87;
}
.fqa-block .fqa-content .item + .item {
  margin-top: 15px;
}
.fqa-block .out-btn {
  text-align: center;
  margin-top: 90px;
}
.fqa-block .btn-seemore {
  display: inline-block;
  padding: 9px 24px;
  background: #0068b4;
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
}
.fqa-block .user31 {
  right: 180px;
  top: -100px;
}
.fqa-block .user32 {
  right: 56px;
  top: -30px;
}
.fqa-block .user33 {
  left: 0;
  bottom: 110px;
}
.fqa-block .user34 {
  left: 170px;
  bottom: 30px;
}

/*--------- footer ---------*/
footer {
  padding-bottom: 20px;
  background: #eee;
}
.footer-link {
  display: flex;
  margin-bottom: 120px;
}
.footer-link .logo {
  width: 146px;
  margin-right: 58px;
}
.footer-link .mylinking-link {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  max-width: 700px;
}
.footer-link .mylinking-link li {
  margin-right: 20px;
  font-weight: normal;
}
/*.footer-link .mylinking-link li a {
  color: #003F87;
}*/
.coppy-right {
  padding-right: 20px;
  font-size: 16px;
  color: #000;
  text-align: right;
  font-weight: normal;
}

/*breadcrumb*/
.breadcrumb {
  font-size: 18px;
  background: #eee;
  padding: 20px 24px 20px 33px;
  position: relative;
  font-weight: normal;
  li {
    display: inline;
  }

  li:not(:last-child)::after {
    content: "＞";
  }
  li a {
    color: #0e4069;
    text-decoration: none;
    &:hover {
      color: #0068b5;
    }
  }
}

/*menu SP - add class active when click icon mennu*/
.menu-sp {
  display: none;
  position: relative;
  .menu-button-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    .bar {
      width: 60px;
      height: 5px;
      background-color: #0068b5;
      margin: 4px 0;
      display: block;
      transform-origin: 5px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
    }
    &.active {
      position: fixed;
      right: 24px;
      top: 21px;
      z-index: 1002;
      + .bg-backdrop,
      ~ .nav-links {
        display: block;
        transform: none;
      }
      .bar {
        opacity: 1;
        transform: rotate(30deg) translate(-12px, -15px);
        background: #0068b5;
        z-index: 1002;
      }
      .bar:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
      }
      .bar:nth-last-child(2) {
        transform: rotate(-30deg) translate(-15px, 15px);
      }
    }
  }
  .nav-links {
    display: none;
    position: fixed;
    width: 100%;
    max-width: 480px;
    height: 100vh;
    padding: 70px 64px;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    z-index: 1001;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    ul {
      overflow: scroll;
      flex-direction: column;
      display: flex;
    }
    li {
      padding: 17px 0;
      font-size: 30px;
      transition-delay: 2s;
    }
    a {
      color: #0e4069;
    }
    .logo {
      margin-top: 95px;
    }
    .link_btn {
      margin-top: 0;
      font-size: 30px;
      &.button_blue {
        color: #fff;
      }
    }
    @media (max-width: 500px) {
      width: 90%;
    }
  }

  /*add bg-backdrop when click menu*/
  .bg-backdrop {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: #0e4069;
    opacity: 0.8;
    cursor: pointer;
    left: 0;
    width: 100%;
    z-index: 2;
  }
}

/*general*/
.container {
  /* padding: 0 30px; */
}
:root {
  --font-18: 18px;
  --font-20: 20px;
  --font-24: 24px;
  --margin-bottom: 32px;
}
[role="button"],
a,
area,
button,
input:not([type="range"]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}
.banner-title {
  background: #00c6fc;
  padding: 48px 0;
  position: relative;
  &.bg-blue-500 {
    background: #0068b4;
    h3 {
      color: #fff;
    }
  }
  .banner-title-inner {
    max-width: 895px;
    margin: 0 auto;
    padding: 0 4em;
  }
  h3 {
    color: #0e4069;
    font-size: 48px;
    line-height: 70px;
    text-align: center;
    font-weight: 900;
  }
}
a {
  color: #0e4069;
  &:hover {
    color: #0068b5;
  }
}
.a-decoration {
  color: #003f87;
  text-decoration: underline;
  &:hover {
    color: #0068b4;
    text-decoration: none;
  }
}

/*button_blue, .button_grey, .button_orange*/
.link_btn {
  display: inline-block;
  padding: 6px 28px;
  background: #0068b4;
  border-radius: 999px;
  color: #fff;
  font-size: var(--font-18);
  font-weight: 700;
  border: none;
  cursor: pointer;
  &:hover {
    background: #00c7fd;
  }
}
.button_blue {
  background: #0068b4;
  &:hover {
    background: #00c7fd;
    color: #fff;
  }
}
.button_white {
  background: #fff;
  color: #0e4069 !important;
  &:hover {
    background: #00c7fd;
    color: #fff !important;
  }
}
.button_white_border {
  background: #fff;
  color: #0e4069 !important;
  &:hover {
    background: #00c7fd;
    color: #fff !important;
  }
  border: 3px solid #0068b4;
  border-radius: 999px;
}

.button_gray {
  background: #7F7F7F;
  &:hover {
    background: #dcdcdc;
    color: #fff;
  }
}
.button_grey,
.button_disabled {
  background: #dcdcdc;
  color: #fff;
  cursor: default;
  &:hover {
    color: #fff;
    background: #dcdcdc;
  }
}
.button-center {
  text-align: center;
}

.button-right {
  text-align: right;
  .link_btn {
    margin-top: 25px;
  }
  .link_btn ~ .link_btn {
    margin-left: 16px;
  }
}
.text-remark {
  padding-top: 25px;
  font-weight: 400;
}
.des-center {
  text-align: center;
}
.text-16 {
  font-size: 16px;
}
.text-21 {
  font-size: 21px;
}
.text-22 {
  font-size: 22px;
}
.text-24 {
  font-size: 24px;
}
.mt-25 {
  margin-top: 25px;
}

/*******login page*******/

/*------- banner-title-M  --------*/
.banner-title-M {
  background: #00c6fc;
  padding: 115px 4em;
  position: relative;
}
.banner-title-M .banner-title-M-inner {
  max-width: 890px;
  margin: 0 auto;
  text-align: center;
}
.banner-title-M .banner-title-M-inner h3 {
  margin-bottom: 0;
  font-size: 48px;
  line-height: 70px;
  color: #0e4069;
  font-weight: 900;
}
.login-form {
  position: relative;
  padding-top: 124px;
}
.login-form .des {
  font-size: 28px;
  text-align: center;
  font-weight: 400;
  padding: 10px 20px 62px;
  &.align-left {
    text-align: left;
  }
  .des-block {
    + .des-block {
      margin-top: 20px;
    }
    p {
      text-wrap: balance;
      &.text-wrap-none {
        text-wrap: unset;
      }
    }
    &.mt-80 {
      margin-top: 80px;
    }
  }
  &.fs-24 {
    font-size: 24px;
  }
  &.fs-18 {
    font-size: 18px;
  }
}
.login-form .des-st1 {
}
.login-form .user35 {
  top: -128px;
  left: 76px;
}
.login-form .user36 {
  top: -138px;
  left: 201px;
}
.login-form .user37 {
  top: -62px;
  left: 298px;
}
.login-form .user38 {
  top: -87px;
  right: 252px;
}
.login-form .user39 {
  top: -153px;
  right: 142px;
}
.login-form .user40 {
  top: -142px;
  right: 35px;
}

/*******Mypage**********/
.myliking_mypage {
  .banner-title {
    background: #0068b4;
    h3 {
      color: #fff;
    }
  }

  .title-mgmt {
    background: #0068b4;
    color: #fff;
    font-size: 28px;
    padding: 10px 30px;
    margin-bottom: var(--margin-bottom);
  }
  .management-block {
    padding: 30px 0 160px;
    > div {
      margin-top: 50px;
    }
  }

  .steps-implement {
    .content {
      background: #eee;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 25px;
      padding: 25px;
      .item {
        background: #fff;
        border-radius: 12px;
        padding: 25px 25px 38px;
        &.item3 {
          all: unset;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 45px;
          padding-right: 25px;
        }
        .title {
          font-family: Gilroy;
          font-size: 34px;
          color: #0068b4;
          padding-bottom: 15px;
        }
        .des {
          font-weight: 500;
          span {
            color: #ff1d25;
          }
        }
      }
    }

    .important-notice {
      font-weight: normal;
      margin-top: 42px;
      h3 {
        display: flex;
        gap: 14px;
        align-items: center;
        font-weight: 700;
        font-size: 32px;
        color: #0e4069;
        margin-bottom: 25px;
      }
      p {
        padding-bottom: 10px;
      }
      p span {
        padding-right: 10px;
      }
    }
  }
  .management-domain {
    .domain-notice {
      background: #eee;
      color: #ff1d25;
      font-size: var(--font-20);
      text-align: center;
      padding: 13px;
    }
    .myliking-table th:first-child {
      width: 377px;
      @media (max-width: 630px) {
        width: auto;
      }
    }
  }

  .bill_payment .myliking-table th:first-child {
    width: 190px;
  }
}

/******table common******/
.hscroll {
  overflow-x: auto;
}
.myliking-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 27px;
  font-weight: normal;
  &.myliking-table-sp {
    display: none;
    min-width: 630px;
    margin-top: 0;
    table-layout: inherit;
    @media (max-width: 630px) {
      min-width: 0;
    }
  }
  th,
  td {
    border: 1px solid #707070;
    padding: 15px 10px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    box-sizing: border-box;
    font-size: var(--font-18);
    word-wrap: break-word;
  }
  th {
    background: #eee;
    font-weight: 700;
    padding: 10px 12px;
    text-align: center;
  }
  .button_blue,
  .button_grey,
  .button_gray {
    margin-top: 0;
  }
  .change-address {
    margin-top: 3px;
    a {
      font-size: 13px;
      text-decoration: underline;
      color: #000;
      &:hover {
        color: #00c7fd;
      }
    }
  }
}

/*--------form--------*/
.myliking_form {
  padding: 80px 0;
  background: #fff;
  h3.title {
    background: #0068b4;
    color: #fff;
    font-size: 48px;
    text-align: center;
    padding: 20px 40px;
    margin-bottom: 20px;
  }

  input[type="number"],
  input[type="password"],
  input[type="text"],
  input[type="email"],
  textarea {
    all: unset;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 12px;
    width: 100%;
    height: 57px;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    outline: none;
    padding: 5px 15px;
    font-size: 1em;
  }
  input::placeholder {
    padding-left: 10px;
  }

  .myliking_form-group {
    border-radius: 12px;
    background: #eee;
    font-weight: 400;
    margin-bottom: 15px;
  }
  .form {
    padding: 40px 90px 100px 138px;
  }
  .form.pay-completed {
    padding-left: 109px;
    @media (max-width: 767px) {
      padding-left: 0;
    }
  }
  .form > .ico_must {
    padding-bottom: 48px;
    display: block;
  }
  .item {
    margin-bottom: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;

    &.group-payment ul {
      display: flex;
      gap: 8px;
    }
  }
  .item_2 {
    flex-direction: inherit;
    div {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      width: 47%;
    }
  }
  .md-w-47per {
    width: 47% !important;
  }
  label {
    font-size: var(--font-24);
    line-height: 1.5;
    font-weight: 700;
    color: #0e4069;
    padding-bottom: 8px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .button_form {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 75px;
    &.complete_page {
      margin-top: 105.77px;
      @media (max-width: 767px) {
        margin-top: 6vw;
      }
    }
    &.complete_hide_logo_page {
      margin-top: 0;
    }
    &.logout_page {
      margin-top: 20px;
      @media (max-width: 767px) {
        margin-top: 0;
      }
    }
    .btn,
    .link_btn {
      padding: 15px 28px;
      font-size: 28px;
      min-width: 316px;
      text-align: center;
      color: #fff;
      box-sizing: border-box;
      text-decoration: none;
      transition: 0.3s;
      -webkit-transition: 0.3s;
    }
  }
  .group_button {
    margin-top: 0;
    .btn,
    .link_btn {
      margin-left: 8px;
      margin-right: 8px;
    }
  }
  .ico_must {
    color: #ff1d25;
  }
  .form-feedback {
    color: #db0000;
    font-size: clamp(15px, 2.667vw, 20px);
    font-family: bold;
    margin-top: -8px;
    margin-bottom: 10px;
    display: none;
  }
  input[type="number"],
  input[type="password"],
  input[type="text"],
  input[type="email"],
  textarea {
    &.error {
      border-color: #db0000;
      ~ .form-feedback {
        display: block;
      }
    }
  }

  .checkbox_form {
    position: relative;
    padding-left: 52px;
    label {
      font-weight: 400;
      color: #000;
      display: block;
    }
    input {
      position: absolute;
      left: 0;
      top: 0;
      width: 35px;
      height: 35px;
      z-index: 2;
      opacity: 0;
      z-index: 2;
      cursor: pointer;
    }
    input[type="checkbox"] + label::before {
      content: "";
      position: absolute;
      left: 0;
      top: -2px;
      width: 35px;
      height: 35px;
      border-radius: 12px;
      background-color: #fff;
      border: 2px solid #fff;
    }
    input[type="checkbox"]:checked + label::before {
      content: "";
      border-color: #0068b4;
    }
    input[type="checkbox"].not_check + label::before {
      border-color: #db0000;
    }
    input[type="checkbox"].not_check ~ .form-feedback {
      display: block;
      margin-left: -52px;
    }
    input[type="checkbox"]:checked + label::after {
      left: 11px;
      top: 2px;
      width: 12px;
      height: 22px;
      border: solid #0068b4;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      content: "";
      position: absolute;
    }
  }
  .mr-24 {
    margin-right: 24px;
  }
}
/*--------form [Config]--------*/
.myliking_config_form {
  padding: 27px 0 166px;
  background: #eaf3f9;
  a {
    color: #0000ff;
    &:hover {
      text-decoration: underline;
    }
  }
  h3.title {
    background: #3489c7;
    padding: 26px 20px;
    font-size: 28px;
    line-height: 1.2;
  }
  p a {
    color: inherit;
    &:hover {
      text-decoration: underline;
    }
  }

  .form {
    padding: 40px 25px 70px;
  }
  input[type="number"],
  input[type="password"],
  input[type="text"],
  input[type="email"],
  textarea {
    border: 2px solid #000;
  }
  .myliking_form-group {
    border-radius: 0;
    background: #fff;
    max-width: 990px;
    margin: 0 auto;
  }
  label {
    padding-bottom: 5px;
    color: #3489c7;
    .ico_must {
      font-size: 18px;
    }
  }
  .button_form {
    margin-top: 48px;
    margin-bottom: 0;
    .btn,
    .link_btn {
      padding: 12px 28px;
      font-size: 24px;
      border-radius: 6px;
      font-weight: 400;
      margin-right: 8px;
      margin-left: 8px;
    }
  }
  .checkbox_form {
    label {
      font-weight: 400;
      color: #000;
      padding-bottom: 14px;
    }
    input[type="checkbox"] + label::before {
      content: "";
      position: absolute;
      left: 0;
      top: -2px;
      width: 35px;
      height: 35px;
      border-radius: 12px;
      background-color: #fff;
      border: 2px solid #000;
    }
  }
  .ico_must {
    color: #db0000;
  }
}

.login-admin.myliking_form .item {
  margin-bottom: 10px;
}
.login-admin.myliking_form .form,
.forgot_pass.myliking_form .form {
  padding-left: 182px;
  padding-right: 182px;
}

/*****confirmpage*******/
.confirm_form {
  padding-top: 100px;
  padding-bottom: 160px;
  .des {
    padding-bottom: 36px;
  }
  .form {
    padding: 65px 90px 65px 138px;
  }
  .button_form {
    .btn,
    .link_btn {
      margin-left: 16px;
      margin-right: 16px;
      padding: 14px 50px;
      min-width: 316px;
    }
  }
}

/* password-reset page*/
.password-reset.myliking_config_form input[type="password"] {
  max-width: 421px;
}
@media (max-width: 1024px) {
  .bill_payment {
    overflow-x: auto; /* Horizontal */
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .container {
    padding: 0 20px;
  }
}
@media (min-width: 768px) {
  .forsp {
    display: none;
  }
  .delete__account_button {
    width: 648px;
    border: 3px solid #0068b4;
    border-radius: 999px;
    font-size: 21px;
    color: #0068b4;
    padding: 13.5px 0;
    text-align: center;
  }
}
@media (max-width: 767px) {
  :root {
    --font-18: 3.733vw;
    --font-20: 3.733vw;
    --font-24: 3.733vw;
    --margin-bottom: 7.333vw;
  }
  body {
    font-size: 3.733vw;
  }
  .container {
    padding: 0 5.067vw;
    width: auto;
  }
  /*******menu SP********/
  .menu,
  .sp_none {
    display: none;
  }
  .menu-sp,
  .menu-sp .menu-button-icon {
    display: flex;
  }

  /******login page*******/
  .login-form .user35 {
    top: -109px;
    left: 16px;
  }
  .login-form .user36 {
    top: -118px;
    left: 140px;
  }
  .login-form .user39 {
    top: -134px;
    right: 24px;
  }
  .login-form .user38 {
    top: -68px;
    right: 116px;
  }
  /*mypage*/
  .myliking_mypage {
    .steps-implement .content {
      grid-template-columns: 1fr;
      padding: 4.667vw 4vw 8vw;
    }
    .steps-implement .important-notice p span {
      display: block;
    }
    .management-domain .domain-notice {
      text-align: left;
      margin-bottom: 6.267vw;
    }
  }

  .myliking-table {
    display: none;
    &.myliking-table-sp {
      display: table;
      th {
        text-align: left;
      }
      td {
        padding: 2.933vw;
        &.pad-small {
          padding: 2.933vw 0;
        }
        .flex-col {
          display: flex;
          flex-direction: column;
          gap: 5px;
        }
        a {
          width: fit-content;
        }
      }
      .link_btn {
        padding: 6px 20px;
      }
      .change-address a {
        font-size: 10px;
      }
    }

    > tbody + tbody::before {
      content: "";
      display: block;
      height: 6.133vw;
    }
  }

  /*-------form: login-------*/
  .myliking_form {
    padding: 10.667vw 0;
    input[type="number"],
    input[type="password"],
    input[type="text"],
    input[type="email"],
    textarea {
      height: 11.6vw;
    }
    .form {
      padding: 6vw 3.6vw;
    }

    .item_2 div {
      width: 100%;
      + div {
        margin-top: 2vw;
      }
    }
    .checkbox_form {
      padding-left: 14.4vw;
      padding-top: 4px;
      display: block;

      label {
        display: flex;
        min-height: 11.6vw;
        align-items: center;
        flex-flow: wrap;
      }
      input[type="checkbox"],
      input[type="checkbox"] + label::before {
        width: 11.6vw;
        height: 11.6vw;
        border-radius: 3.6vw;
      }
      input[type="checkbox"]:checked + label::after {
        left: 4vw;
        top: 1.867vw;
        width: 3.6vw;
        height: 6vw;
      }
      input[type="checkbox"].not_check ~ .form-feedback {
        margin-left: -14.4vw;
        margin-top: -1.333vw;
      }
    }
  }
  .login-admin.myliking_form .form,
  .forgot_pass.myliking_form .form {
    padding-left: 2.933vw;
    padding-right: 2.933vw;
  }
  .myliking_mypage .steps-implement .content .item {
    .title {
      font-size: 28px;
    }
    &.item3 {
      gap: 6vw;
      padding-right: 3.333vw;
    }
  }
  .myliking_mypage .management-block {
    padding: 4vw 0 21.333vw;
  }
  .banner-title {
    padding: 6.4vw 0;
    h3 {
      font-size: 6.4vw;
      line-height: 9.333vw;
    }
  }
  .myliking_mypage .management-block > div {
    margin-top: 6.667vw;
  }
  .myliking_mypage .title-mgmt {
    font-size: clamp(18px, 3.733vw, 28px);
    padding: 1.333vw 4vw;
  }
  .myliking_config_form {
    padding: 3.6vw 0 22.133vw;
    h3.title {
      padding: 3.467vw 2.667vw;
      font-size: clamp(18px, 3.733vw, 28px);
    }
    .button_form {
      margin-top: 6.4vw;
      .btn,
      .link_btn {
        font-size: clamp(15px, 3.2vw, 24px);
        min-width: 40vw;
      }
    }
  }
  .myliking_form .button_form {
    margin-top: 10vw;
    .btn,
    .link_btn {
      font-size: clamp(15px, 3.2vw, 24px);
      min-width: 40vw;
    }
  }
  .myliking_form .group_button {
    margin-top: 0;
  }
  .banner-notice .banner-notice-inner h3 {
    font-size: clamp(24px, 4.138vw, 48px);
    line-height: 11.467vw;
    margin-bottom: 7.333vw;
  }
  .myliking_mypage .steps-implement .important-notice {
    margin-top: 5.6vw;
    img {
      width: 24px;
    }
    h3 {
      font-size: clamp(24px, 4.267vw, 32px);
      margin-bottom: 3.333vw;
    }
  }
  .login-form .des {
    padding: 1.333vw 2.667vw 8.267vw;
    font-size: clamp(15px, 3.733vw, 28px);
    &.fs-24 {
      font-size: clamp(15px, 3.2vw, 24px);
    }
    &.fs-18 {
      font-size: clamp(15px, 3.2vw, 18px);
    }
  }
  .breadcrumb {
    font-size: 15px;
  }
  .login-form .des .des-block.mt-80 {
    margin-top: 10.667vw;
  }
  .button-right-width {
    margin-top: 3.333vw;
    .link_btn {
      min-width: 45vw;
      margin-top: 3.333vw;
      text-align: center;
    }
  }
  .myliking_form .item {
    margin-bottom: 6vw;
  }
  .confirm_form .button_form {
    .btn,
    .link_btn {
      margin-left: 2.133vw;
      margin-right: 2.133vw;
      padding: 10px 3.733vw;
    }
  }
  .text-16 {
    font-size: clamp(15px, 2.133vw, 16px);
  }
  .text-21 {
    font-size: clamp(15px, 2.8vw, 21px);
  }
  .text-22 {
    font-size: clamp(15px, 2.933vw, 22px);
  }
  .text-24 {
    font-size: clamp(15px, 3.2vw, 24px);
  }
  .mt-25 {
    margin-top: 3.333vw;
  }
  .des-complete {
    font-size: clamp(15px, 2.933vw, 22px);
    p + p {
      margin-top: 3.333vw;
    }
  }
  .confirm_form {
    padding-top: 13.333vw;
    padding-bottom: 21.333vw;
  }
  .delete__account_button {
    width: calc(80vw + 16px);
    border: 3px solid #0068b4;
    border-radius: 999px;
    font-size: 15px;
    color: #0068b4;
    padding: 13.5px 0;
    text-align: center;
  }
}
@media (max-width: 749.9px) {
  /*******menu SP********/
  .menu,
  .sp_none {
    display: none;
  }
  .menu-sp,
  .menu-sp .menu-button-icon {
    display: flex;
  }
  .bg-backdrop {
  }

  .container {
    padding: 0 10px;
  }
  .breadcrumb {
    padding: 20px;
  }

  .login-form .user35 {
    left: 2.6%;
    width: 16.1%;
    top: -60px;
  }
  .login-form .user36 {
    left: 19%;
    width: 10.2%;
    top: -65px;
  }
  .login-form .user39 {
    right: 2.6%;
    width: 11.5%;
    top: -68px;
  }
  .login-form .user38 {
    right: 15.4%;
    width: 15.6%;
    top: -34px;
  }
  .banner-title-M {
    padding: 15.333vw 2em;
  }
  .banner-title-M .banner-title-M-inner h3 {
    font-size: clamp(24px, 6.4vw, 48px);
    line-height: 9.333vw;
  }
  .banner-title .banner-title-inner {
    padding: 0 2em;
  }

  /*-------form: login-------*/
  .myliking_form {
    .item_2 div {
      width: 100%;
      + div {
        margin-top: 15px;
      }
    }
    .md-w-47per {
      width: 100% !important;
    }
    .mr-24 {
      margin-right: 3.2vw;
    }
  }
}

/*menu v1*/
@media (min-width: 991.9px) {
  .head-contain.head-contain-v1 {
    height: 100px;
  }
  .head-contain.head-contain-v1 .menu ul li a {
    font-weight: normal;
    color: #3489c7;
  }
  .head-contain.head-contain-v1 .menu ul li.menu-btn {
    border-radius: 999px;
    height: 50px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    cursor: pointer;
    display: flex;
  }
  .head-contain.head-contain-v1 .menu ul li.menu-btn a {
    color: #fff;
  }
  .head-contain.head-contain-v1 .menu ul li.menu-btn.inquiry {
    background: #3489c7;
    padding: 0 35px;
    &:hover {
      background: #00c7fd;
    }
  }
  .head-contain.head-contain-v1 .menu ul li.menu-btn.aplication {
    background: #db5f00;
    padding: 0 28px;
    &:hover {
      background: #00c7fd;
    }
  }
  .head-contain.head-contain-v1 .menu ul li.login-v1 {
    width: 82px;
    height: 80px;
    background: #3e749b;
    text-align: center;
  }
  .head-contain.head-contain-v1 .menu ul li.login-v1 a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .head-contain.head-contain-v1 .menu ul li.login-v1 span {
    display: block;
    color: #fff;
    font-size: 14px;
    margin-top: 6px;
  }
}
/*.footer-v1*/
.footer-v1 {
  padding: 60px 15px 35px;
  background: #fff;
  text-align: center;
}
.footer-v1 .mylinking-link {
  margin-top: 50px;
}
.footer-v1 .mylinking-link ul {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.footer-v1 .mylinking-link ul + ul {
  margin-top: 20px;
}
.footer-v1 .mylinking-link ul:first-child {
  gap: 20px 55px;
}
.footer-v1 .mylinking-link ul li a {
  color: #3489c7;
  font-weight: normal;
  font-size: 20px;
}
.footer-v1 .mylinking-link ul li a:hover {
  text-decoration: underline;
}
.footer-v1 .coppy-right {
  padding: 0;
  margin-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #242424;
}
@media (max-width: 991px) {
  /*footer*/
  .footer-link {
    flex-direction: column;
    gap: 22px;
  }
  .footer-link .mylinking-link {
    max-width: 600px;
  }
  .footer-v1 .mylinking-link ul:first-child {
    gap: 20px;
  }
}
.txt-red {
  color: #db0000;
}

/*** service-operation-management-content ***/
.service-operation-management {
  background: #e5e5e5;
  padding: 36px 0 155px;
  .management-section-container {
    padding: 0 30px;
    /* max-width: 1260px; */
    margin: 0 auto;
    h3.title {
      padding: 23px 10px;
      background: #242424;
      color: #fff;
      font-size: 28px;
      text-align: center;
    }
    .service-operation-management-content {
      padding: 15px 30px 148px;
      background: #fff;
      .title-management {
        font-size: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        align-items: center;
        .production-notice {
          border: 1px solid #707070;
          padding: 0 12px;
          height: 21px;
          display: inline-flex;
          align-items: center;
          border-radius: 8px;
          background: #fff;
          font-size: 13px;
          cursor: pointer;
        }
      }
    }
  }
}
.myliking-table-service {
  width: 100%;
  min-width: 1200px;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 15px;
  table-layout: fixed;
  &.table-auto {
    table-layout: auto;
  }
  &.myliking-table-service-sp {
    display: none;
    min-width: 630px;
    margin-top: 0;
    table-layout: inherit;
    @media (max-width: 630px) {
      min-width: 0;
    }
  }
  .group-td-btn {
    display: flex;
    flex-wrap: wrap;
    min-width: 230px;
  }
  tr.row-gray {
    background-color: #f3f3f3;
  }
  th,
  td {
    border: 1px solid #242424;
    padding: 7px 10px;
    display: table-cell;
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: normal;
    word-wrap: break-word;
    min-width: 140px;
    word-break: break-all;
    a {
      color: #0000ff;
      text-decoration: underline;
    }
  }
  th {
    background: #242424;
    font-weight: normal;
    padding: 15px 3px;
    text-align: center;
    color: #fff;
    border-right: 1px solid #fff;
    &:last-child {
      border-color: #242424;
    }
  }
  .button_white_solid {
    border: 1px solid #707070;
    padding: 0 16px;
    height: 23px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    button {
      cursor: pointer;
    }
  }
  .operating-status {
    padding: 7px 5px;
    select {
      width: 90px;
      height: 23px;
      border-radius: 8px;
      font-size: 13px;
      border-style: solid;
      appearance: auto;
    }
  }
}
@media (max-width: 749.9px) {
  .myliking-table-service {
    display: none;
    &.myliking-table-service-sp {
      display: table;
      tbody::before {
        content: "";
        display: block;
        height: 25px;
      }
      th {
        border-right: none;
        border-bottom: 1px solid #fff;
        width: 140px;
      }
      tr:last-child th {
        border-color: #242424;
      }
    }
    .button_white_solid {
      margin: 0;
    }
    .group-td-btn {
      gap: 8px;
    }
    .operating-status {
      padding: 7px 10px;
    }
  }
  .service-operation-management .management-section-container {
    padding: 0 15px;
    .service-operation-management-content {
      padding: 30px 15px;
    }
  }
}
/* fix for sp font-size */
@media only screen and (min-width: 750px) and (max-width: 1024px) {
  header nav > ul li {
    font-size: 15px;
    vertical-align: top;
  }
  header nav .hdrBtn ul {
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  :root {
    --font-18: 15px;
    --font-20: 15px;
    --font-24: 15px;
  }
  body {
    font-size: 15px;
  }
}

/* Ricipient name set screen  */
@media (min-width: 767px) {
  .myliking_form .button_form .link_btn {
    &.recipient--btn {
      padding: 14px 58px;
      font-size: 29px;
    }
  }
}
.bottom-btn-block {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  .mypage-btn {
    font-size: 21px;
    font-weight: 900;
    padding: 14px 70px;
    border: 3px solid #0068b4;
    color: #0068b4;
    border-radius: 999px;
    box-sizing: border-box;
    text-decoration: none;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    cursor: pointer;
    background: #fff;
    &:hover {
      background: #00c7fd;
      border-color: #00c7fd;
      color: #fff;
    }
  }
  @media (max-width: 767px) {
    margin-top: 50px;
    .mypage-btn {
      font-size: clamp(15px, 2.8vw, 21px);
      padding: 10px 40px;
    }
  }
}
@media (min-width: 767px) {
  .myliking_form.recipient_form {
    padding: 80px 0 160px;
    .form {
      padding: 64px 128px 95px;
      .button_form {
        margin-top: 60px;
        .link_btn {
          padding: 14px 58px;
          font-size: 29px;
        }
      }
    }
  }
}

/*add button group kannet-248*/
.service-operation-management-button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 10px;

  .button_white_solid {
    border: 1px solid #707070;
    padding: 0 12px;
    min-height: 35px;
    border-radius: 0;
    background: #fff;
    font-size: 13px;
    margin-left: 7px;
    display: flex;
    align-items: center;
    font: 16px "Noto Sans JP", "游ゴシック体", sans-serif;
    cursor: pointer;
    &::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 7px solid #000;
      margin-left: 5px;
    }
  }
}

/* add css kannet*/
.myliking_form {
  font-family: "Noto Sans JP", "游ゴシック体", sans-serif;
}
.group_button {
  div {
    margin-bottom: 40px;
  }
  .link_btn.button_blue_border {
    border: 3px solid #0068b4;
    background-color: #fff;
    color: #0068b4;
    &:hover {
      background: #00c7fd;
      color: #fff;
      border-color: #00c7fd;
    }
  }
}
@media (max-width: 767px) {
  .group_button {
    div {
      margin-bottom: 20px;
    }
  }
}

.myliking_form-group {
  .form-container {
    padding: 10px 30px;
    .form-input {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      font-weight: bold;
      @media (max-width: 767px) {
        flex-direction: column;
        align-items: start;
      }
      p {
        min-width: 120px;
      }
      .form-input-container {
        padding: 10px 30px;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 15px;
        flex: 1;
        background-color: #fff;
        .radio-checked {
          width: 20px;
          height: 20px;
          border: 2px solid #000;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
            display: inline-block;
            position: relative;
          }
        }
        .checkbox {
          width: 22px;
          height: 22px;
          accent-color: #0068b4;
          border: 2px solid #0068b4;
          border-radius: 4px;
          cursor: pointer;
          &:checked {
            width: 22px;
            height: 22px;
            accent-color: #0068b4;
            border: 2px solid #0068b4;
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }
}


.card-option {
    display: flex;
    align-items: center!important;
    padding: 16px!important;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    input {
        width: 22px;
        height: 22px;
        accent-color: #0068b4;
        border: 2px solid #0068b4;
        border-radius: 4px;
        cursor: pointer;
        margin: 0 15px 0 0;
    }
}

.card-option:hover {
    border-color: #0068b4;
}

.card-option.selected {
    border-color: #0068b4;
}

.card-option input[type="radio"] {
    margin-top: 0;
    margin-right: 16px;
    width: 20px;
    height: 20px;
    accent-color: #0068b4;
}

.card-option-info {
    flex: 1;
}

.card-option-number {
    font-size: 16px;
    color: #333;
}

.card-option-expiry {
    font-size: 13px;
    color: #666;
}

.card-option-brand {
    /* width: 40px; */
    padding: 8px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 10px;
}

.brand-visa { background: linear-gradient(135deg, #1a1f71, #2a3f9f); }

.errorlist {
  padding-bottom: 15px;
  color: #db0000;
}