@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@media screen and (min-width: 751px) {
  html {
    font-size: 10px; } }
@media screen and (max-width: 750px) {
  html {
    font-size: 2.667vw; } }

main img {
  vertical-align: bottom; }

main img, svg {
  width: 100%;
  height: auto; }

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  main img {
    image-rendering: -webkit-optimize-contrast; } }
main a {
  text-decoration: none;
  color: #ff0000; }

main h1, main h2, main h3, main h4, main h5, main p, main dl, main dt, main dd, main ul, main ol, main li, main figure {
  margin: 0;
  padding: 0; }

main ul, main ol {
  list-style: none; }

@media screen and (max-width: 750px) {
  main .pcv {
    display: none !important; } }

@media screen and (min-width: 751px) {
  main .spv {
    display: none !important; } }

main *,
main *:before,
main *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

main .svg_img {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  shape-rendering: crispEdges;
  text-rendering: geometricPrecision; }

/*base*/
main .slider,
main .slider div {
  width: 100%;
  height: 100%; }

main img {
  pointer-events: none;
  user-select: none; }

main {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #75ce0f; }

#cont {
  position: relative;
  width: 100%;
  margin: 0 auto;
  font-family: "Noto Sans JP",sans-serif;
  background: #fff; }
  @media screen and (min-width: 751px) {
    #cont {
      max-width: 37.5rem; } }

@media screen and (min-width: 751px) {
  #cont::after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: -1rem;
    width: 39.5rem;
    height: 100%;
    border-right: #fff 10px solid;
    border-left: #fff 10px solid;
    pointer-events: none; } }

#cont section {
  position: relative; }

#cont nav {
  position: relative;
  display: flex;
  flex-direction: column; }

#cont a {
  position: relative;
  display: block; }

#cont .cap_txt {
  position: relative;
  width: 34.3rem;
  margin: 2rem auto 0;
  font-weight: 400;
  letter-spacing: 0.0em;
  color: #000;
  line-height: 1.6em;
  font-size: 1rem;
  text-align: justify; }

.cap_indent {
  padding-left: 1rem;
  text-indent: -1rem; }

#cont .cap_txt.mgn {
  margin: 0 auto 2rem !important; }

.fc_w {
  color: #fff !important; }

#cont .cap_c {
  text-align: center !important;
  margin: 0rem auto 0rem !important; }

/**/
#kv {
  position: relative;
  background: #009ee2; }

#fv {
  position: relative; }

.kv_banner {
  position: relative;
  background: #fff; }

#kv .cap_txt {
  margin: 1rem auto 2rem !important; }

#kv nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem; }

#fv > p,
#fv > h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

#fv > div {
  position: absolute;
  bottom: 0.5rem;
  left: 12.7rem;
  width: 12rem; }

#fv > div p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

#fv > .pop {
  opacity: 0;
  transform: translateY(3rem); }

#fv.active > .pop {
  transition: all 400ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  opacity: 1;
  transform: translateY(0); }

#fv.active > .obj_1 {
  transition-delay: 0.3s; }

#fv.active > .obj_2 {
  transition-delay: 0.5s; }

#fv.active > .obj_3 {
  transition-delay: 0.7s; }

#fv.active > .obj_4 {
  transition-delay: 0.9s; }

#fv .cut {
  transform: translate(-2rem, 2rem);
  opacity: 0; }

#fv.active .cut {
  transition: all 500ms cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transition-timing-function: cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transform: translate(0rem, 0rem);
  opacity: 1;
  transition-delay: 0; }

/*#fv > figure,
#fv > div,*/
#kv .cap_txt {
  opacity: 0; }

/*#fv.active > figure,
#fv.active > div,*/
#kv .cap_txt.active {
  transition: all 600ms cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transition-timing-function: cubic-bezier(0.66, 0.31, 0.45, 0.985);
  opacity: 1;
  transition-delay: 2.4s; }

#kv .btn .pop {
  opacity: 0;
  transform: scale(0.6);
  transform: translateY(3rem); }

#kv .btn.active .pop {
  transition: all 400ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  opacity: 1;
  transform: scale(1); }

#kv .btn.active .pop2 {
  transition-delay: 0.2s; }

#kv .btn.active .pop3 {
  transition-delay: 0.4s; }

#kv .btn_maycar img {
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905); }

@media screen and (min-width: 751px) {
  #kv .btn_maycar:hover img {
    transform: scale(1.08); } }

/**/
#cont .obj_car {
  animation: obj_car_loop 1.0s linear infinite; }

@keyframes obj_car_loop {
  0% {
    transform: translateY(0rem); }
  25% {
    transform: translateY(-0.2rem); }
  50% {
    transform: translateY(0rem); }
  75% {
    transform: translateY(-0.1rem); }
  100% {
    transform: translateY(0rem); } }
#cont .obj_family {
  transform-origin: 50% 90%;
  animation: obj_family_loop 1.5s linear infinite; }

@keyframes obj_family_loop {
  0% {
    transform: translateY(0rem) rotate(-1deg); }
  25% {
    transform: translateY(-0.2rem); }
  50% {
    transform: translateY(0rem) rotate(1deg); }
  75% {
    transform: translateY(-0.1rem); }
  100% {
    transform: translateY(0rem) rotate(-1deg); } }
#cont .obj_family2 {
  transform-origin: 50% 90%;
  animation: obj_family_loop2 1.3s linear infinite; }

@keyframes obj_family_loop2 {
  0% {
    transform: translateY(0rem) rotate(-0.5deg); }
  25% {
    transform: translateY(0.3rem); }
  50% {
    transform: translateY(0rem) rotate(1deg); }
  75% {
    transform: translateY(0.4rem); }
  100% {
    transform: translateY(0rem) rotate(-0.5deg); } }
/**/
#cont nav a.arrow_1::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/btn_arrow_1.png") 0 0 repeat;
  background-size: contain;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */ }

@media screen and (min-width: 751px) {
  #cont nav a.arrow_1:hover::after {
    transform: translateX(0.8rem); } }

#cont nav a.arrow_2::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/nav_arrow.png") 0 0 repeat;
  background-size: contain;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */ }

@media screen and (min-width: 751px) {
  #cont nav a.arrow_2:hover::after {
    transform: translateY(0.8rem); } }

/**/
.yt-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer; }

.yt-thumb {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; }

.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

/**/
#enjoy {
  position: relative;
  padding-bottom: 4rem;
  background: #ff0000; }

#enjoy .step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem; }

#enjoy_ttl {
  position: relative; }

#enjoy_ttl h2 {
  position: relative; }

#enjoy_ttl div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%; }

.enjoy_step {
  position: relative; }

.enjoy_step p {
  position: relative; }

.enjoy_step div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%; }

.enjoy_step .pop_in.pop1 {
  transform: translate(-2.5rem, 6rem); }

.enjoy_step .pop_in.pop1.active {
  transition: all 400ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transform: translate(0rem, 0rem);
  transition-delay: 0.2s; }

.enjoy_step .pop_in.pop2 {
  transform: translate(-0.5rem, 1rem);
  opacity: 0; }

.enjoy_step .pop_in.pop2.active {
  transition: all 400ms cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transition-timing-function: cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transform: translate(0rem, 0rem);
  opacity: 1;
  transition-delay: 0.4s; }

.enjoy_phone {
  position: relative;
  margin-bottom: 3rem; }

.enjoy_phone p {
  position: relative; }

.enjoy_phone div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%; }

.enjoy_phone .loop1 {
  animation: phone_loop_1 6.0s ease infinite; }

@keyframes phone_loop_1 {
  0% {
    transform: translateY(-0.5rem); }
  50% {
    transform: translateY(0.5rem); }
  100% {
    transform: translateY(-0.5rem); } }
.enjoy_phone .loop2 {
  animation: phone_loop_2 8.0s ease infinite; }

@keyframes phone_loop_2 {
  0% {
    transform: translateY(0.8rem); }
  50% {
    transform: translateY(-0.8rem); }
  100% {
    transform: translateY(0.8rem); } }
/**/
#support {
  position: relative;
  padding-bottom: 0rem;
  background: #fff; }

#support_img {
  position: relative; }

#support_img p {
  position: relative; }

#support_img div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%; }

#support .slider_set {
  position: relative;
  width: 100%;
  height: 38rem; }

#support .slick-dots {
  position: absolute;
  bottom: 0rem;
  left: 0;
  width: 100%;
  display: block;
  padding: 0;
  list-style: none;
  text-align: center;
  z-index: 9000; }

#support .slick-dots li {
  position: relative;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0.4rem;
  padding: 0;
  cursor: pointer;
  pointer-events: auto !important;
  border-radius: 50%;
  overflow: hidden; }

#support .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #cccccc; }

#support .slick-dots li.slick-active button {
  color: black;
  background: #0014a8; }

#support .slick-prev,
#support .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 0;
  display: block;
  width: 4.5rem;
  height: 100%;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  z-index: 100 !important;
  transition: ease 0.6s all; }

#support .slick-prev {
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/btn_prev.png") center center no-repeat;
  background-size: 100% auto;
  left: 0; }

#support .slick-next {
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/btn_next.png") center center no-repeat;
  background-size: 100% auto;
  right: 0; }

/**/
#apply {
  position: relative;
  padding-bottom: 4rem;
  background: #009ee2; }

#apply .step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem; }

#apply_pay {
  position: relative; }

#apply_pay p {
  position: relative;
  z-index: 5; }

#apply_pay div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%; }

#apply_pay .pop_in.pop1 {
  transform: translateY(10rem); }

#apply_pay .pop_in.pop1.active {
  transition: all 600ms cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transition-timing-function: cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.2s; }

#apply_pay .pop_in.pop2 {
  transform: translate(-1rem, 1rem);
  opacity: 0; }

#apply_pay .pop_in.pop2.active {
  transition: all 900ms cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transition-timing-function: cubic-bezier(0.66, 0.31, 0.45, 0.985);
  transform: translate(0rem, 0rem);
  opacity: 1;
  transition-delay: 0.6s; }

/**/
#campaign {
  position: relative;
  background: #fff; }

#campaign .tgl_set {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 4rem 0; }

#campaign .tgl_set dl {
  position: relative;
  width: 34.3rem;
  overflow: hidden;
  margin: 0 auto; }

#campaign .tgl_set dl dt {
  position: relative;
  background: #e90515;
  width: 100%;
  height: 8rem;
  border-top-left-radius: 4rem;
  border-top-right-radius: 4rem;
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  cursor: pointer; }

#campaign .tgl_set dl.open dt {
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem; }

#campaign .tgl_set dl dt::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/tgl_open.png") 0 0 repeat;
  background-size: contain;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  transform-origin: 90% 50%; }

#campaign .tgl_set dl.open dt::after {
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/tgl_close.png") 0 0 repeat;
  background-size: contain; }

@media screen and (min-width: 751px) {
  #campaign .tgl_set dl dt:hover::after {
    transform: scale(1.15); } }

#campaign .tgl_set dl dd {
  position: relative;
  overflow: hidden;
  display: none; }

/*
#campaign .tgl_set dl.open dd{
	height: auto !important;
}
*/
#campaign .tgl_set dl dd > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.2rem;
  background: #fff;
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
  overflow: hidden;
  border: #e90515 0.6rem solid; }

#campaign .tgl_set dl dd .cap_txt {
  position: relative;
  width: 100% !important;
  margin: 0 !important; }

#totop {
  position: relative;
  width: 28rem;
  margin: 0 auto 1rem; }

#totop > div,
#totop > div p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

#totop::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/totop_arrow.png") 0 0 repeat;
  background-size: contain;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */ }

@media screen and (min-width: 751px) {
  #totop:hover::after {
    transform: translateY(-0.5rem); } }

.hover_zoom {
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */ }

@media screen and (min-width: 751px) {
  .hover_zoom:hover {
    transform: scale(1.08); } }

/**/
#banner_area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 104rem;
  pointer-events: none;
  z-index: 100;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */ }
  @media screen and (min-width: 751px) {
    #banner_area {
      height: 104rem; } }

#banner_area > div {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 37.5rem;
  pointer-events: none;
  margin: 0 auto;
  overflow: hidden; }

#banner_area > div a {
  position: absolute;
  display: block;
  bottom: 1rem;
  right: -1rem;
  width: 12.5rem;
  height: 12.5rem;
  pointer-events: auto; }

#banner_area.hide > div a {
  right: -13.5rem; }

/**/
#left_area {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  pointer-events: none;
  padding-right: 20rem;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; }
  @media screen and (min-width: 1180px) {
    #left_area {
      opacity: 1; } }

#left_area > div {
  position: relative;
  width: 17.7rem;
  height: 11.1rem; }

#left_area > div p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

/**/
#right_area {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  pointer-events: none;
  padding-left: 20rem;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; }
  @media screen and (min-width: 1180px) {
    #right_area {
      opacity: 1; } }

#right_area > div {
  position: relative;
  width: 22.2rem;
  height: 15rem; }

#right_area > div p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

.right_bg {
  transform-origin: 0 100%; }

.right_bg.active {
  transform: rotate(-60deg);
  transition-delay: 0s;
  transition: all 1200ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  /* custom */
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  /* custom */ }

/**/
#apply .pop_in.btn p {
  opacity: 0;
  transform: scale(0.6); }

#apply .pop_in.btn.active p {
  transition: all 400ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s; }

#apply .pop_in.btn a {
  opacity: 0;
  transform: scale(0.6); }

#apply .pop_in.btn.active a {
  transition: all 400ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585);
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.4s; }

#enjoy .pop_in.btn p {
  opacity: 1;
  transform: scale(1); }

#enjoy .pop_in.btn.active p {
  animation: btn_active .5s ease forwards;
  animation-delay: 0.2s; }

#enjoy .pop_in.btn a {
  opacity: 1;
  transform: scale(1); }

#enjoy .pop_in.btn.active a {
  animation: btn_active .5s ease forwards;
  animation-delay: 0.4s; }

@keyframes btn_active {
  0% {
    transform: scale(1); }
  10% {
    transform: scale(0.8); }
  60% {
    transform: scale(1.15); }
  90% {
    transform: scale(0.95); }
  100% {
    transform: scale(1); } }
/*
    animation: obj_car_loop 1.0s linear infinite;
}
@keyframes obj_car_loop {
  0% {
    transform: translateY(divceil(0, 10, rem));
	}
  25% {
    transform: translateY(divceil(-2, 10, rem));
	}
  50% {
    transform: translateY(divceil(0, 10, rem));
	}
  75% {
    transform: translateY(divceil(-1, 10, rem));
	}
  100% {
    transform: translateY(divceil(0, 10, rem));
	}
}

.pop_in{
    opacity: 0;
    transform: translateY(divceil(30, 10, rem));
}
.pop_in.active{
	transition: all 400ms cubic-bezier(0.280, 0.850, 0.655, 1.585);
	transition-timing-function: cubic-bezier(0.280, 0.850, 0.655, 1.585);
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}
.mask_in {
	clip-path: inset(100% 0 0 0);
	transition: all 600ms cubic-bezier(0.670, 0.515, 0.110, 1.280);
	transition-timing-function: cubic-bezier(0.670, 0.515, 0.110, 1.280);
    @include mq(pc) {
        transform: translateY(divceil(70, 10, rem));

    }
    @include mq(sp) {
        transform: translateY(divceil(30, 10, rem));
    }
}
.mask_in.active {
  clip-path: inset(0 0 0 0);
	transform: translateY(divceil(0, 10, rem));
}
*/
#terms p {
  text-align: justify;
  word-break: break-all; }

#terms a {
  color: #ff0000;
  text-decoration: underline; }

@media screen and (min-width: 751px) {
  #terms a:hover {
    text-decoration: none; } }

#terms strong {
  font-weight: 700;
  text-align: justify;
  margin-bottom: 0 !important; }

/**/
#banner_area.soon {
  opacity: 0 !important;
  pointer-events: none !important; }

#cont nav a.arrow_1.soon {
  pointer-events: none; }

#cont nav a.arrow_1.soon::after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol5/images/apply_btn_cover.png") 0 0 repeat;
  background-size: contain;
  transition: all 600ms cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */
  transition-timing-function: cubic-bezier(0.12, 0.795, 0.23, 0.905);
  /* custom */ }