:root {
  --font_s_18: calc( 18 / 14 * 1em);
}
@media (max-width: 640px) {
  :root {
    --font_s_18: calc( 14 / 14 * 1em);
  }
}

/*================================

p-automatic

================================*/
#commercial_button-badge .p-automatic {
  margin-top: 40px;
}
#commercial_button-badge .p-automatic__txt {
  font-size: var(--font_s_18);
  line-height: 2;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__txt {
    text-align: center;
  }
}
#commercial_button-badge .p-automatic__notes {
  margin-top: 1em;
  font-size: var(--font_s_s);
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__notes {
    text-align: center;
  }
}
#commercial_button-badge .p-automatic__intro {
  margin-bottom: 100px;
  display: flex;
  gap: 3.8759689922%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__intro {
    margin-bottom: 40px;
    flex-direction: column;
  }
}
#commercial_button-badge .p-automatic__intro__img {
  width: 43.7984496124%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__intro__img {
    width: 100%;
  }
}
#commercial_button-badge .p-automatic__intro__dtl {
  width: 52.3255813953%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__intro__dtl {
    width: 100%;
  }
}
#commercial_button-badge .p-automatic__intro__dtl__ttl {
  margin: 0.5em 0;
  font-size: var(--font_s_xl);
  font-weight: bold;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__intro__dtl__ttl {
    text-align: center;
  }
}
#commercial_button-badge .p-automatic__intro__dtl__img {
  margin-top: 30px;
  padding: 45px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7.4074074074%;
  position: relative;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__intro__dtl__img {
    display: flex;
    flex-direction: column;
    gap: 30px 0;
  }
}
#commercial_button-badge .p-automatic__intro__dtl__img::after {
  content: "";
  width: 100vw;
  height: 100%;
  background: linear-gradient(to right, #ffffff 27.5vw, #514E58 27.5vw, #514E58 45vw, #020517);
  position: absolute;
  top: 0;
  left: 4.4444444444%;
  margin-left: -50vw;
  z-index: -1;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__intro__dtl__img::after {
    background: linear-gradient(to right, #514E58 0, #292937 60%, #020517);
    left: 0;
    margin-left: calc(50% - 50vw);
  }
}
#commercial_button-badge .p-automatic__compare {
  display: flex;
  gap: 2.9069767442%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__compare {
    flex-direction: column;
  }
}
#commercial_button-badge .p-automatic__compare__img {
  width: 54.2635658915%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__compare__img {
    width: 100%;
  }
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic__compare__img + .p-automatic__txt {
    margin-top: 1.5em;
    text-align: left;
  }
}
#commercial_button-badge .p-automatic .m-btn-round {
  margin-top: 100px;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-automatic .m-btn-round {
    margin-top: 30px;
  }
}

/*================================

p-make

================================*/
#commercial_button-badge .p-make {
  padding-bottom: 60px;
  position: relative;
}
#commercial_button-badge .p-make::after {
  content: "";
  width: 100vw;
  height: 100%;
  background: #ECEEF0;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: calc(50% - 50vw);
  z-index: -1;
}
#commercial_button-badge .p-make__lead {
  border-left: solid 10px #000000;
  margin-bottom: 60px;
  padding: 60px 0 0 20px;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__lead {
    border-width: 5px;
    margin-bottom: 40px;
    padding: 25px 0 0 15px;
  }
}
#commercial_button-badge .p-make__lead__ttl {
  font-size: var(--font_s_xl);
  color: #0D2EA0;
  font-weight: bold;
}
#commercial_button-badge .p-make__lead__txt {
  font-size: var(--font_s_18);
}
#commercial_button-badge .p-make__item {
  margin-top: 80px;
  display: flex;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item {
    margin-top: 40px;
    flex-direction: column;
  }
}
#commercial_button-badge .p-make__item__img {
  width: 38.7596899225%;
  position: relative;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item__img {
    width: 100%;
  }
}
#commercial_button-badge .p-make__item__img img {
  border: solid 2px #FFFFFF;
}
#commercial_button-badge .p-make__item__dtl {
  width: 61.2403100775%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item__dtl {
    width: 100%;
  }
}
#commercial_button-badge .p-make__item__dtl__ttl {
  font-size: var(--font_s_xm);
  position: relative;
}
#commercial_button-badge .p-make__item__dtl__ttl::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #0D2EA0;
  position: absolute;
  top: 4em;
  left: 0;
  z-index: 0;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item__dtl__ttl::after {
    top: 4.5em;
  }
}
#commercial_button-badge .p-make__item__dtl__ttl__num {
  width: 4.3em;
  margin-left: 6.3291139241%;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item__dtl__ttl__num {
    width: 6em;
    margin: -10px 0 0 0;
  }
}
#commercial_button-badge .p-make__item__dtl__ttl__txt {
  margin: -0.5em 0 1em 11.0759493671%;
  color: #0D2EA0;
  font-weight: bold;
  letter-spacing: 0.06em;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item__dtl__ttl__txt {
    margin: -0.5em 0 1em 8.4507042254%;
  }
}
#commercial_button-badge .p-make__item__dtl__txt {
  margin-left: 11.0759493671%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-make__item__dtl__txt {
    margin-left: 0;
  }
}
@media (min-width: 641px) {
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item::after {
    left: 2.5em;
  }
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item__img {
    order: 1;
  }
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item__dtl {
    order: 0;
  }
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item__dtl__ttl::after {
    left: 2.5em;
  }
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item__dtl__ttl__num {
    margin-left: 0;
  }
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item__dtl__ttl__txt {
    margin-left: 4.746835443%;
  }
  #commercial_button-badge .p-make__item:nth-last-of-type(even) .p-make__item__dtl__txt {
    margin-left: 4.746835443%;
  }
}
#commercial_button-badge .p-make .m-heading-block + .p-make__item {
  margin-top: 20px;
}

/*================================

p-feature

================================*/
#commercial_button-badge .p-feature__list {
  margin-top: 40px;
  display: flex;
  gap: 5.8139534884%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-feature__list {
    margin-top: 20px;
    flex-direction: column;
  }
}
#commercial_button-badge .p-feature__list li {
  width: 29.4573643411%;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-feature__list li {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 640px) {
  #commercial_button-badge .p-feature__list li:not(:last-child) {
    margin-bottom: 40px;
  }
}
#commercial_button-badge .p-feature__list__heading {
  margin-bottom: 0.5em;
  font-size: var(--font_s_18);
  color: #0D2EA0;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-feature__list__heading {
    margin: auto 0 auto 1em;
    text-align: left;
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
@media (max-width: 640px) {
  #commercial_button-badge .p-feature__list__img {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}
#commercial_button-badge .p-feature__list__txt {
  margin-top: 1em;
}
@media (max-width: 640px) {
  #commercial_button-badge .p-feature__list__txt {
    grid-column: 1/3;
    grid-row: 2/3;
  }
}

/*================================

p-movie

================================*/
#commercial_button-badge .l-section.p-movie {
  position: static;
}

/*================================

p-contact

================================*/
#commercial_button-badge .l-section.p-contact {
  margin-bottom: 120px;
}
@media (max-width: 640px) {
  #commercial_button-badge .l-section.p-contact {
    margin: 40px 0 80px;
  }
}/*# sourceMappingURL=p-sp.css.map */