@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: #0000ff; }

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: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol4/images/bg.png") 0 0 repeat;
  background-size: 37.5rem auto; }

#cont {
  position: relative;
  width: 100%;
  margin: 0 auto;
  font-family: "Noto Sans JP",sans-serif; }
  @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 .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; }

.fc_w {
  color: #fff !important; }

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

/**/
#kv p,
#kv h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.obj_car,
.obj_evers {
  transform: scale(0);
  transform-origin: 50% 70%; }

.obj_car.active,
.obj_evers.active {
  transform: scale(1);
  transition: all 700ms cubic-bezier(0.97, 0.165, 0.52, 1.065);
  /* custom */
  transition-timing-function: cubic-bezier(0.97, 0.165, 0.52, 1.065);
  /* custom */ }

.obj_ttl,
.obj_fukidashi {
  opacity: 0;
  transform: translateY(3rem);
  transition: all 400ms 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 */ }

.obj_ttl.active,
.obj_fukidashi.active {
  opacity: 1;
  transform: translateY(0rem); }

.obj_car img {
  animation: obj_car_loop 1.0s linear infinite; }

@keyframes obj_car_loop {
  0% {
    transform: translateY(0rem); }
  25% {
    transform: translateY(-0.3rem); }
  50% {
    transform: translateY(-0.1rem); }
  75% {
    transform: translateY(-0.2rem); }
  100% {
    transform: translateY(0rem); } }
.obj_evers img {
  transform-origin: 50% 70%;
  animation: obj_evers_loop 1.0s linear infinite; }

@keyframes obj_evers_loop {
  0% {
    transform: translateY(0rem) rotate(-2deg); }
  25% {
    transform: translateY(-0.3rem); }
  50% {
    transform: translateY(-0.1rem) rotate(2deg); }
  75% {
    transform: translateY(-0.2rem); }
  100% {
    transform: translateY(0rem) rotate(-2deg); } }
/**/
#local_nav {
  position: relative;
  background: #ffea01;
  padding: 3.5rem 0; }

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

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

#local_nav nav a::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-vol4/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) {
  #local_nav nav a:hover::after {
    transform: translateY(0.8rem); } }

#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-vol4/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-vol4/images/btn_arrow_2.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: translateX(0.8rem); } }

#cont a.arrow_3::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-vol4/images/btn_arrow_3.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 a.arrow_3:hover::after {
    transform: translateX(0.8rem); } }

.conte_set {
  position: relative;
  overflow: hidden; }

.conte_set dl {
  position: relative;
  margin-top: -1rem; }

.conte_set dl.oder_1 {
  margin-top: 0 !important; }

.conte_set dl dd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.conte_set dl.evers_l dt img {
  transform-origin: 20% 50%; }

.conte_set dl.evers_r dt img {
  transform-origin: 80% 50%; }

/*
.conte_set dl dt img{
	position: relative;
	display: block;
	transform: scale(0);
	opacity: 0;
}
.conte_set.active dl dt img{
	opacity: 1;
	transform: scale(1);
	transition: all 300ms cubic-bezier(0.280, 0.850, 0.655, 1.585);
	transition-timing-function: cubic-bezier(0.280, 0.850, 0.655, 1.585);
}
*/
.conte_set dl dt img {
  position: relative;
  display: block;
  transform: translateY(1rem);
  opacity: 0; }

.conte_set.active dl dt img {
  opacity: 1;
  transform: translateY(0rem);
  transition: all 200ms cubic-bezier(0.28, 0.85, 0.655, 1.585);
  transition-timing-function: cubic-bezier(0.28, 0.85, 0.655, 1.585); }

.conte_set dl dd img {
  position: relative;
  display: block;
  transform: scale(0.8);
  opacity: 0; }

.conte_set dl.evers_l dd img {
  transform-origin: 30% 100%; }

.conte_set dl.evers_r dd img {
  transform-origin: 70% 100%; }

.conte_set.active dl dd img {
  opacity: 1;
  transform: scale(1);
  transition: all 300ms 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 */ }

.conte_set .cont_in {
  opacity: 0;
  transform: scale(0.2); }

.conte_set.active .cont_in {
  opacity: 1;
  transform: scale(1);
  transition: all 400ms 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 */ }

.conte_set .cap_in {
  opacity: 0; }

.conte_set.active .cap_in {
  opacity: 1;
  transition: all 400ms cubic-bezier(0.97, 0.165, 0.52, 1.065);
  /* custom */
  transition-timing-function: cubic-bezier(0.97, 0.165, 0.52, 1.065);
  /* custom */ }

/*
.conte_set dl.oder_1 dt img{transition-delay: 0ms;}
.conte_set dl.oder_2 dt img{transition-delay: 1000ms;}
.conte_set dl.oder_3 dt img{transition-delay: 2000ms;}
.conte_set dl.oder_4 dt img{transition-delay: 3000ms;}
.conte_set dl.oder_5 dt img{transition-delay: 4000ms;}
.conte_set dl.oder_6 dt img{transition-delay: 5000ms;}
.conte_set dl.oder_7 dt img{transition-delay: 6000ms;}
.conte_set dl.oder_8 dt img{transition-delay: 7000ms;}

.conte_set dl.oder_1 dd img{transition-delay: 100ms;}
.conte_set dl.oder_2 dd img{transition-delay: 1100ms;}
.conte_set dl.oder_3 dd img{transition-delay: 2100ms;}
.conte_set dl.oder_4 dd img{transition-delay: 3100ms;}
.conte_set dl.oder_5 dd img{transition-delay: 4100ms;}
.conte_set dl.oder_6 dd img{transition-delay: 5100ms;}
.conte_set dl.oder_7 dd img{transition-delay: 6100ms;}
.conte_set dl.oder_8 dd img{transition-delay: 7100ms;}
*/
#registration .conte_set dl.oder_1 dt img {
  transition-delay: 0ms; }

#registration .conte_set dl.oder_2 dt img {
  transition-delay: 800ms; }

#registration .conte_set dl.oder_3 dt img {
  transition-delay: 1600ms; }

#registration .conte_set dl.oder_4 dt img {
  transition-delay: 2400ms; }

#registration .conte_set dl.oder_5 dt img {
  transition-delay: 3200ms; }

#registration .conte_set dl.oder_6 dt img {
  transition-delay: 4000ms; }

#registration .conte_set dl.oder_7 dt img {
  transition-delay: 4800ms; }

#registration .conte_set dl.oder_8 dt img {
  transition-delay: 5600ms; }

#registration .conte_set dl.oder_1 dd img {
  transition-delay: 100ms; }

#registration .conte_set dl.oder_2 dd img {
  transition-delay: 900ms; }

#registration .conte_set dl.oder_3 dd img {
  transition-delay: 1700ms; }

#registration .conte_set dl.oder_4 dd img {
  transition-delay: 2500ms; }

#registration .conte_set dl.oder_5 dd img {
  transition-delay: 3300ms; }

#registration .conte_set dl.oder_6 dd img {
  transition-delay: 4100ms; }

#registration .conte_set dl.oder_7 dd img {
  transition-delay: 4900ms; }

#registration .conte_set dl.oder_8 dd img {
  transition-delay: 5700ms; }

#cont_set1.conte_set .cont_in.oder_5 {
  transition-delay: 3300ms; }

#cont_set1.conte_set .cont_in.oder_6 {
  transition-delay: 3400ms; }

#cont_set1.conte_set .cont_in.oder_7 {
  transition-delay: 3500ms; }

#cont_set1.conte_set .cap_in.oder_8 {
  transition-delay: 3600ms; }

#cont_set2 {
  position: relative;
  padding: 1rem 0 2rem; }

#cont_set2.conte_set .cont_in.oder_4 {
  transition-delay: 2500ms; }

#cont_set2.conte_set .cont_in.oder_5 {
  transition-delay: 2600ms; }

#cont_set2.conte_set .cont_in.oder_6 {
  transition-delay: 2700ms; }

#cont_set2.conte_set .cap_in.oder_7 {
  transition-delay: 2800ms; }

#management {
  position: relative;
  padding-bottom: 4rem;
  background: url("https://eneos-ss.g.kuroco-img.app/files/user/fixed_page_assets/mycar-cp-vol4/images/management_bg.jpg") 0 0 no-repeat;
  background-size: cover; }

#management .conte_set dl.oder_1 dt img {
  transition-delay: 0ms; }

#management .conte_set dl.oder_2 dt img {
  transition-delay: 800ms; }

#management .conte_set dl.oder_4 dt img {
  transition-delay: 2400ms; }

#management .conte_set dl.oder_6 dt img {
  transition-delay: 4000ms; }

#management .conte_set dl.oder_7 dt img {
  transition-delay: 4800ms; }

#management .conte_set dl.oder_10 dt img {
  transition-delay: 6400ms; }

#management .conte_set dl.oder_11 dt img {
  transition-delay: 7200ms; }

#management .conte_set dl.oder_1 dd img {
  transition-delay: 100ms; }

#management .conte_set dl.oder_2 dd img {
  transition-delay: 900ms; }

#management .conte_set dl.oder_4 dd img {
  transition-delay: 2500ms; }

#management .conte_set dl.oder_6 dd img {
  transition-delay: 4100ms; }

#management .conte_set dl.oder_7 dd img {
  transition-delay: 4900ms; }

#management .conte_set dl.oder_10 dd img {
  transition-delay: 6500ms; }

#management .conte_set dl.oder_11 dd img {
  transition-delay: 7300ms; }

#cont_set3.conte_set .cont_in.oder_3 {
  transition-delay: 1700ms; }

#cont_set3.conte_set .cont_in.oder_5 {
  transition-delay: 3300ms; }

#cont_set3.conte_set .cont_in.oder_8 {
  transition-delay: 5700ms; }

#cont_set3.conte_set .cap_in.oder_9 {
  transition-delay: 5800ms; }

#cont_set3.conte_set .cont_in.oder_12 {
  transition-delay: 8100ms; }

#cont_set3.conte_set .cont_in.oder_13 {
  transition-delay: 8300ms; }

#cont_set3.conte_set .cap_in.oder_14 {
  transition-delay: 8400ms; }

#cont_set3.conte_set .cont_in.oder_5 .cap_txt {
  position: absolute;
  display: block;
  bottom: 2.8rem;
  padding: 0 7rem;
  width: 100%; }

#cont .box_abs {
  position: relative;
  overflow: hidden; }

#cont .box_abs .cap_txt {
  position: relative;
  width: 100% !important;
  letter-spacing: -0.08em;
  margin: 1rem 0 0 !important; }

#apply {
  position: relative;
  padding-bottom: 4rem; }

#apply .box_abs > div {
  position: absolute;
  display: block;
  bottom: 1.5rem;
  left: 4.4rem;
  width: 28.7rem; }

#apply .mgn {
  padding-top: 2rem; }

#present {
  position: relative;
  padding-bottom: 4rem;
  background: #ffea01; }

#present .box_abs > div {
  position: absolute;
  display: block;
  bottom: 2.8rem;
  left: 4.4rem;
  width: 28.7rem; }

#present .box_abs#present_voice > div {
  position: absolute;
  display: block;
  bottom: 3.5rem;
  left: 6.7rem;
  width: 24rem; }

.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; }

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

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

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

#campaign .tgl_set dl dt {
  position: relative;
  background: #df0515;
  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-vol4/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-vol4/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: #df0515 0.6rem solid; }

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

#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-vol4/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: 70rem;
  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: 70.5rem; } }

#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: 37.5rem;
  height: 27rem;
  overflow: hidden; }

#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: 37.5rem;
  height: 42.5rem;
  overflow: hidden; }

#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 */ }

/**/
.pop_in {
  opacity: 0;
  transform: translateY(3rem); }

.pop_in.active {
  transition: all 400ms 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 */
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s; }

.mask_in {
  clip-path: inset(100% 0 0 0);
  transition: all 600ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28); }
  @media screen and (min-width: 751px) {
    .mask_in {
      transform: translateY(7rem); } }
  @media screen and (max-width: 750px) {
    .mask_in {
      transform: translateY(3rem); } }

.mask_in.active {
  clip-path: inset(0 0 0 0);
  transform: translateY(0rem); }

#terms p {
  text-align: justify;
  word-break: break-all; }

#terms a {
  color: #df0515;
  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; }