@import "./main.css";





/* Loading animation */
@keyframes loadingLogo {
  0% {width: 0;}
  75% {width: 75%;}
  100% {width: 100%;}
}
@keyframes loading3 {
  to {opacity: 0;}
}
@keyframes loading2 {
  to {scale: .3;opacity: 0;transform: translateY(-800px);}
}

/* loading */
#loading {
  width: 100%;height: 100%;font-family: var(--font-logo);
  background: var(--color-darkf);
  position: fixed;top: 0;left: 0;z-index: 99;
  display: flex;justify-content: center;align-items: center;
}
.loadingLogo {
  font-family: var(--font-logo);
  font-size: 9rem;line-height: 1.7;font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-whitef);
  position: relative;
  padding-right: 2px;
  text-wrap: nowrap;white-space: nowrap;
}

.loadingLogo::before {
  font-family: var(--font-logo);
  font-size: 9rem;line-height: 1.7;font-weight: 500;
  color: var(--color-whitef);
  -webkit-text-stroke: 1px var(--color-whitef);
  content: "Data Center Xpert";
  position: absolute;top: 0;left: 0;
  overflow: hidden;
  width: 0;text-wrap: nowrap;white-space: nowrap;
  animation: loadingLogo 3s ease-in-out forwards;
  animation-delay: 1s;
}
/* loading */

/* menu */
.menu_logo{width: 30%;}

.navi{width: -webkit-fill-available;display: flex;justify-content: flex-end;}
.navi div + div{margin-left: 1rem;}

.navi_btn,.navi_contact,.navi_lang{width: auto;display: flex;align-items: center;justify-content: flex-end;}
.navi a{  font-family: var(--font-JP1);
  line-height: 1.5;font-size: 1.5rem;}
.navi_btn a + a{margin-left: 2rem;}

.light_switch{width: 3rem;display: flex;align-items: center;justify-content: center;aspect-ratio: 1/1;object-fit: cover;}
.light_switch img{width: 100%;aspect-ratio: 1/1;}
/* Menu Lang */

.navi_lang div{overflow: hidden;}
.navi_lang div a{text-wrap: nowrap;}
.navi_lang div + div{margin-left: 1rem;}

/************************************************ Menu Drop ************************************************/
#menu_drop{display: grid;grid-template-rows: 1fr;margin: 0;padding: 0;transition: grid-template-rows 0.5s;}

#menu_drop_flex{overflow: hidden;display: flex;justify-content: space-around;align-items: center;
  width: -webkit-fill-available;height: auto;padding: 2rem;transition-duration: 0.5s;
  background-color: var(--color-pri);}

.service_item{width: 20%;display: flex;flex-direction: column;
  justify-content: flex-start;align-items: center;}
.service_item div{width: 100%;aspect-ratio: 5/3;object-fit: cover;overflow: hidden;}
.service_item div img{aspect-ratio: 5/3;transition-duration: 0.5s;scale: 1;}
.service_item:hover div img{scale: 1.1;transition-duration: 0.5s;}

.menu_drop_hide {grid-template-rows: 0fr !important;}
.menu_drop_flex_hide{padding: 0 !important;transition-duration: 0.5s;}
/************************************************ Menu Drop End ************************************************/

/************************************************ Top Page ************************************************/




/************************************************ Top Page End ************************************************/








/* carol */
.carol{padding: 2rem 6rem;}
.carol_photo{margin-left: 5rem;}
.carol_brand_1{font-size: 7rem;}
.carol_brand_2{font-size: 10rem;}
/* carol */

/************************************************ Message Page ************************************************/

/************************************************ Message Page End ************************************************/










/* top content */
.page_1_photo{margin-top: -60vh;}
.page_1_photo_scroll{width: 130vw !important;max-width: 130vw !important;}

.page_2_photo{width: 45%;}
.page_2_textblock{width: 60%;}
.btn_service{width: 50%;}

#page_3{padding: 10rem 5rem;}
.map_info_btn{margin-top: 3rem;padding: 1rem 3rem;border: 1px solid var(--color-pri);border-radius: 30rem;transition-duration: .5s;
  font-family: var(--font-JP1);font-size: 1.5rem;font-weight: 700;line-height: 1.6;color: var(--color-pri);text-align: center;
}
.map_info_btn:hover{border: 1px solid var(--color-hover);color: var(--color-white);background-color: var(--color-hover);
  transition-duration: .5s;}

/* top content */

.navi_url{background-image: url(../image/navi.png);background-size: contain;background-repeat: no-repeat;
  animation: page_service_carol 2s infinite;}
@keyframes page_service_carol{
  0%{background-image: url(../image/navi.png)}
  49%{background-image: url(../image/navi.png)}
  50%{background-image: url(../image/navi2.png)}
  100%{background-image: url(../image/navi2.png)}
}

.dark_mode .navi_url{background-image: url(../image/navid.png);animation: page_service_carold 2s infinite;}
@keyframes page_service_carold{
  0%{background-image: url(../image/navid.png)}
  49%{background-image: url(../image/navid.png)}
  50%{background-image: url(../image/navi2d.png)}
  100%{background-image: url(../image/navi2d.png)}
}


.page_service1_title_text{padding-right: 9rem;}

#carol_normal{background-image: url(../image/Top_n.png);}

.news_image_1{padding: 1rem 10rem;}


@media (max-width: 1239.999999px) {
  #sec_menu{padding: 0;}
  .page_1_photo{margin-top: -30vh;}
  .page_1_text{padding: 5rem 5rem;}
  .m_footer{padding: 10rem 5rem;padding-bottom: 0;}
  .footer{padding: 0rem 5rem;padding-bottom: 2rem;gap: 10rem;justify-content: flex-start;}
  .footer_map img{width: 100%;transform: translateY(0);}
  .footer_3{margin-top: auto;}
}