@import "./main.css";

html,body{font-size: 12px;}
@media (max-width: 559.99999px) {
  html,body{font-size: 10px;}
}
@media (max-width: 499.99999px) {
  html,body{font-size: 8px;}
}
@media (max-width: 375px) {
  html,body{font-size: 7px;}
}

/* Loading animation */
@keyframes loading {
  to {width: 100%;}
}
@keyframes loading2 {
  to {scale: .3;opacity: 0;transform: translateY(-800px);}
}
@keyframes loading3 {
  to {opacity: 0;}
}
/* loading */
#loading {
  width: 100%;height: 100%;
  background: var(--color-darkf);
  position: fixed;top: 0;left: 0;z-index: 99;
  display: flex;justify-content: center;align-items: center;
}

#loading_container{position: relative;width: 100%;height: 100%;
  display: flex;justify-content: center;align-items: center;
}

.loadingmask{text-wrap: wrap;white-space: pre-wrap;text-align: center;font-size: 12rem;
  position: absolute;
  font-family: var(--font-logo);
  font-size: 10rem;line-height: 1.6;font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-whitef);
  animation-fill-mode:forwards;
}
.loadingLogo{position: relative;display: flex;justify-content: center;align-items: center;height: 100%;width: 0;overflow: hidden;
  animation-fill-mode:forwards;text-wrap: wrap;white-space: pre-wrap;
}

.loadingLogo_ani{text-wrap: wrap;text-align: center;font-size: 12rem;
  position: absolute;
  font-family: var(--font-logo);
  font-size: 10rem;line-height: 1.6;font-weight: 500;
  color: var(--color-whitef);
  -webkit-text-stroke: 1px var(--color-whitef);text-wrap: wrap;white-space: pre-wrap;
}
.loadingLogo::before {animation: none;}
/* loading */

/* menu */
.menu_logo{width: 50%;}
#sec_menu{padding: 0;}
.open-main-nav{right: 3rem;}
.mobile_logo{padding: 0 3rem;}
/* menu */

.carol_scroll{bottom: 20rem;}
/************************************************ Top Page ************************************************/
#top_carol{height: calc(100vh - 5rem);}
.top_carol_brand_1{padding-left: 3rem;font-size: 5rem;}
.top_carol_brand_2,.top_carol_brand_3{font-size: 7rem;}
.top_carol_text_1,.top_carol_text_2{font-size: 3rem;}
.top_carol_main{margin-left: 2rem;}
.top_carol_text_block{padding-bottom: 2rem;padding-right: 6rem;}
.carol_scroll{right: 2rem;}
/************************************************ Top Page End ************************************************/

/************************************************ Message Page ************************************************/
.message_carol_brand_2{font-size: 7rem;}
/************************************************ Message Page End ************************************************/

/************************************************ COmpany Page ************************************************/
.company_access_map_block{padding: 2rem 3rem;flex-direction: column;}
.company_access_maptext{width: 100%;}
.company_access_map{width: 100%;}
/************************************************ COmpany Page End ************************************************/

/************************************************ Service 2 Page ************************************************/
.service2_consulting_list_item_title{font-size: 2rem;width: 60%;}
.service2_consulting_list_item_textborder{font-size: 1.8rem;}
.service2_consulting_list_item_title_small {font-size: 1.3rem;}

.service2_consulting_list_item_title_decoblock{gap: .5rem;}
.service2_consulting_list_item_title_deco_1{width: 8rem;height: .7rem;}
.service2_consulting_list_item_title_deco_2{height: .2rem;}
.service2_consulting_list_item_title_deco_3{height: .2rem;}

.service2_consulting_list_item_text_decoblock{gap: .3rem;}
.service2_consulting_list_item_text_deco_1{width: 4rem;height: .4rem;}

/************************************************ Service 2 Page End ************************************************/

/* carol */
.carol{padding: 2rem 3rem;padding-top: 3.5rem;}
.carol_photo{margin-left: 2rem;}
.carol_brand_1{font-size: 5rem;line-height: 1.2;}
.carol_brand_2{font-size: 8rem;line-height: 1.2;}
.carol_brand_3{font-size: 7rem;line-height: 1.2;}
.carol_text_1, .carol_text_2{font-size: 2rem;}
/* carol */

/* top content */
.page_1_photo{margin-top: -50vh;}
.page_1_text{padding: 10rem 3rem;}
.page_1_photo_scroll{max-width: 300vw !important;width: 300vw !important;}

#page_2{flex-direction: column;padding-left: 0rem;gap: 2rem;}
.page_2_photo{padding-left: 5rem;width: 100%;}
.page_2_textblock,.interview_title{padding-left: 1.5rem;gap: .5rem;width: 100%;}
.btn_service{width: 60%;margin-left: auto;}

#page_3{padding: 10rem 2rem;}
.page_2{flex-direction: column;gap: 2rem;}
.m_message_reset{margin: 0;padding: 0;}
.btn_message{width: 60%;margin-left: auto;padding-top: 2rem;}

.news{flex-direction: column;padding: 10rem 2rem;padding-bottom: 0;}
.news_title_block{width: 100%;}
.news_content{padding: 0;}
.news_item{flex-direction: column;text-wrap: wrap;align-items: flex-start;}
.news_short{font-size: 1.5rem;padding: 1rem 0;}

.gallery{padding: 10rem 2rem;padding-bottom: 0;}

.footer{flex-direction: column;padding: 10rem 2rem;gap: 2rem;padding-bottom: 2rem;}

.footer_title{font-size: 3rem;text-wrap: wrap;}
.footer_text{text-wrap: wrap;}
.footer_map{justify-content: flex-start;}
.footer_map img{transform: translateY(0);}

.copy{flex-direction: column;align-items: center;padding: 2rem 2rem;}
/* top content */

#page_service_carol{height: auto;}

.navi_url,.navi_url_mess{display: flex;gap: .5rem;padding: 1.5rem 1rem;min-height: 8rem;align-items: flex-start;
  background-image: url(../image/m_navi.png);background-size: contain;background-repeat: no-repeat;
  animation: page_service_carol 2s infinite;}

@keyframes page_service_carol{
  0%{background-image: url(../image/m_navi.png)}
  49%{background-image: url(../image/m_navi.png)}
  50%{background-image: url(../image/m_navi2.png)}
  100%{background-image: url(../image/m_navi2.png)}
}
.dark_mode .navi_url{background-image: url(../image/m_navid.png);animation: page_service_carold 2s infinite;}
@keyframes page_service_carold{
  0%{background-image: url(../image/m_navid.png)}
  49%{background-image: url(../image/m_navid.png)}
  50%{background-image: url(../image/m_navi2d.png)}
  100%{background-image: url(../image/m_navi2d.png)}
}
.navi_url_mess{background-image: none;animation: none;}
.page_service_titleblock{left: 3rem;top: 3rem;right: unset;}
.page_service_carol_title{font-size: 3rem;}
.page_service2_carol_textblock{top: 10rem;}
.page_service3_titleblock{left: unset;right: 3rem;top: 3rem;}
.page_service_carol_title + .page_service_carol_title{margin-top: 4rem;}
.navi_url *,.navi_url_mess *{font-size: 1.3rem;}

.page_service1_title_text{padding: 0;}
.page_service_path{width: 3rem;}
.page_service_title_container{padding: 0 3rem;}
.page_service_content_1{padding: 2rem 3rem;}
.page_service_content_2{padding: 2rem 3rem;flex-direction: column;gap: 2rem;}
.page_service_content_3{padding: 10rem 3rem;align-items: flex-start;}
.page_service_content_4{padding: 0;}

.page_service_map{padding: 2rem 3rem;flex-direction: column;}
.page_service_mapl,.page_service_mapr{width: 100%;padding: 0;}

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

.page_service2_title{font-size: 3rem;}
.content_2_image{width: 100%;}
.m_service_2_hovercontent{display: flex;gap: 2rem;}

.page_service3_ball{width: 100%;}
.page_service3_illu_1{width: 70%;}

.page_service_title,.youtube_title,.page_2_titleJA,.top_message_title{font-size: 3rem;}

#carol_normal{background-image: url(../image/m_Top_n.png);}
.carol_brand_4{font-size: 3rem;}

.news_image_1{padding: 1rem 3rem;}

.contact_bock{flex-direction: column;}
.contact_title{width: -webkit-fill-available;}

input[type="text"], textarea[type="text"]{width: 100%;}
.contact_check{align-items: flex-start;gap: 1rem;}
input[type="checkbox"]{margin-top: 1rem;width: 3rem;}
button[type="submit"]{width: auto;}

.contactmail_back_block{padding: 10rem 3rem;display: flex;flex-direction: column;align-items: center;gap: 1rem;}
.mess_carol img{height: -webkit-fill-available;object-fit: cover;}

.pad_b_10{padding-bottom: 10rem;}