@charset "UTF-8";
/*数値の設定
------------------------------------------*/
/*上記数値の設定を呼び出しているmixin
------------------------------------------*/
/*
よく使用するmixin
------------------------------------------*/
header .header_inner .header_logo a span.black { opacity: 0; }
header .header_inner .header_logo a span.white { opacity: 1; }
header .header_inner .header_globalMenu ul li a { color: #fff; }
header .header_inner .header_globalMenu ul li a::before { background: #fff; }
@media only screen and (max-width: 991px) { header #h_menuBtn .border::before, header #h_menuBtn .border::after, header #h_menuBtn .border span { background: #fff; } }

#top_mainvisual { overflow: hidden; position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; height: 100svh; }
#top_mainvisual .top_mainvisual_slide, #top_mainvisual .slick-list, #top_mainvisual .slick-track, #top_mainvisual .slide_box { height: 100%; }
#top_mainvisual .top_mv_text { color: #fff; }
#top_mainvisual .top_mv_text h2 { position: absolute; top: 50%; left: 0; right: 0; z-index: 3; transform: translateY(-50%); color: #fff; font-size: 16px; letter-spacing: 5px; text-align: center; }
#top_mainvisual .top_mv_text .case_count { position: absolute; top: 50%; right: 40px; z-index: 3; transform: translateY(-50%); color: #fff; text-align: right; display: flex; flex-wrap: wrap; }
#top_mainvisual .top_mv_text .case_count .now-count { position: relative; padding-left: 45px; }
#top_mainvisual .top_mv_text .case_count .now-count:before { content: "0"; }
#top_mainvisual .top_mv_text .case_count .now-count::after { content: ""; width: 25px; height: 1px; display: inline-block; background: #fff; opacity: 0.5; position: absolute; top: 50%; left: 10px; }
@media only screen and (max-width: 991px) { #top_mainvisual .top_mv_text .case_count { top: auto; bottom: 15%; left: 0; right: 0; text-align: center; transform: translateY(0); justify-content: center; } }
#top_mainvisual .slide_box .top_mv_copy { position: absolute; top: 50%; left: 40px; z-index: 2; transform: translateY(-50%); color: #fff; }
@media only screen and (max-width: 991px) { #top_mainvisual .slide_box .top_mv_copy { top: 25%; left: 0; right: 0; transform: translateY(0); text-align: center; } }
#top_mainvisual .top_mainvisual_slide .slide_box { background-position: center center; background-repeat: no-repeat; background-size: cover; }
#top_mainvisual .top_mainvisual_slide .slide_01 { background-image: url(../img/pages/top/mv_pc01.jpg); }
#top_mainvisual .top_mainvisual_slide .slide_02 { background-image: url(../img/pages/top/mv_pc02.jpg); }
#top_mainvisual .top_mainvisual_slide .slide_03 { background-image: url(../img/pages/top/mv_pc03.jpg); }
#top_mainvisual .top_mainvisual_slide .slide_04 { background-image: url(../img/pages/top/mv_pc04.jpg); }
@media only screen and (max-width: 767px) { #top_mainvisual .top_mainvisual_slide .slide_01 { background-image: url(../img/pages/top/mv_sp01.jpg); }
  #top_mainvisual .top_mainvisual_slide .slide_02 { background-image: url(../img/pages/top/mv_sp02.jpg); }
  #top_mainvisual .top_mainvisual_slide .slide_03 { background-image: url(../img/pages/top/mv_sp03.jpg); }
  #top_mainvisual .top_mainvisual_slide .slide_04 { background-image: url(../img/pages/top/mv_sp04.jpg); } }

footer { position: relative; z-index: 2; }

main { position: relative; z-index: 2; margin-top: 100vh; }

#top_concept { position: relative; z-index: 2; }

.backdrop-filter { position: relative; margin-bottom: 70vh; }

/* top_concept ===============*/
#top_concept { padding: 400px 0; }
#top_concept .top_concept_text { display: flex; justify-content: center; }
#top_concept .concept_text_inner { color: #fff; }
#top_concept .concept_text_inner h2 { font-size: 24px; letter-spacing: 2px; line-height: 1.6; margin: 0 0 35px; }
#top_concept .concept_text_inner p { letter-spacing: 1px; }
#top_concept .concept_text_inner .concept_text_link { margin: 40px 0 0; }
#top_concept .concept_text_inner .concept_text_link a { color: #fff; letter-spacing: 2px; }
#top_concept .concept_text_inner .concept_text_link a::before { content: ""; width: 25px; height: 1px; background: #fff; display: inline-block; margin: 0 10px 4px 0; opacity: 0.5; }
@media only screen and (max-width: 991px) { #top_concept { padding: 300px 0 200px; } }
@media only screen and (max-width: 767px) { #top_concept .concept_text_inner h2 { font-size: 20px; letter-spacing: 2px; } }

/* top_products ===============*/
#top_products { position: relative; z-index: 2; width: 100%; height: 100vh; overflow: hidden; margin: 0 auto; /* ホバー */ }
#top_products .products_wrap { display: flex; flex-wrap: wrap; position: relative; }
#top_products .products_title { /*width: 50vw;*/ width: auto; height: 100vh; position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; padding-left: 40px; }
#top_products .products_title h3 { font-size: 24px; letter-spacing: 4px; color: #fff; }
#top_products .products_img { width: 100%; height: 100vh; overflow: hidden; padding-left: 50vw; }
#top_products .scroll_contents { display: flex; }
#top_products .productsBox { width: 50vw; height: 100vh; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }
#top_products .productsBox::after { content: ""; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; backdrop-filter: blur(30px); }
#top_products .productsBox_inner { width: 100%; height: 100%; position: relative; }
#top_products .productsBox_img { width: 60%; height: 78%; display: block; position: absolute; top: 11%; left: 20%; z-index: 2; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; }
#top_products .productsBox_img:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; transform: scale(1); transition: 0.6s ease; }
#top_products .products_01, #top_products .products_01 .productsBox_img:after { background-image: url(../img/pages/top/products_01.jpg); }
#top_products .products_02, #top_products .products_02 .productsBox_img:after { background-image: url(../img/pages/top/products_02.jpg); }
#top_products .products_03, #top_products .products_03 .productsBox_img:after { background-image: url(../img/pages/top/products_03.jpg); }
#top_products .products_04, #top_products .products_04 .productsBox_img:after { background-image: url(../img/pages/top/products_04.jpg); }
#top_products .productsBox_text { opacity: 0.5; position: absolute; top: 50%; left: 20%; z-index: 3; color: #fff; transform: translate(-70px, -50%); transition: 0.3s ease; }
#top_products .products_caseTitle { margin: 0 0 30px; }
#top_products .products_caseCount span:nth-child(1)::after { content: ""; width: 25px; height: 1px; display: inline-block; background: #fff; margin: 0 10px 4px; opacity: 0.4; vertical-align: middle; }
#top_products .productsBox a { position: relative; width: 100%; height: 100%; display: block; z-index: 2; }
@media (hover: hover) { #top_products .productsBox a:hover { opacity: 1; }
  #top_products .productsBox a:hover .productsBox_text { opacity: 1; }
  #top_products .productsBox a:hover .productsBox_img:after { transform: scale(1.05); } }
@media only screen and (max-width: 991px) { #top_products { height: auto; }
  #top_products .products_title { width: 100%; height: auto; position: static; justify-content: center; padding-left: 0; margin: 0 0 60px; }
  #top_products .products_img { width: 100%; height: auto; padding-left: 0; }
  #top_products .productsBox_text { opacity: 1; }
  #top_products .scroll_contents { display: block; }
  #top_products .productsBox { width: 100%; height: 70vh; } }
@media only screen and (max-width: 767px) { #top_products .products_title { margin: 0 0 30px; }
  #top_products .products_title h3 { font-size: 20px; }
  #top_products .productsBox { height: 80vh; }
  #top_products .productsBox_text { transform: translate(-40px, -50%); } }

.progress-bar-wrap { position: absolute; bottom: 60px; left: 0; right: 0; width: 460px; height: 1px; background: rgba(255, 255, 255, 0.25); margin: 0 auto; z-index: 3; }
.progress-bar-wrap .progress-bar { width: 0%; height: 100%; background: #fff; transition: width 0.1s linear; }
@media only screen and (max-width: 991px) { .progress-bar-wrap { display: none; } }

/* top_company ===============*/
#top_company { background: #F5F5F5; height: 100vh; position: relative; z-index: 2; }
#top_company .company_wrap { padding: 40px 0; }
#top_company .company_img { width: 50%; height: calc(100vh - 80px); background: url(../img/pages/top/company_image.jpg) no-repeat center center; background-size: cover; }
#top_company .company_text { width: 50%; display: flex; justify-content: center; align-items: center; }
#top_company .company_text h3 { font-size: 24px; letter-spacing: 6px; margin: 0 0 100px; }
#top_company .company_text p { letter-spacing: 1px; }
#top_company .company_text .company_link { margin: 65px 0 0; }
#top_company .company_text .company_link a { letter-spacing: 2px; }
#top_company .company_text .company_link a::before { content: ""; width: 25px; height: 1px; background: rgba(0, 0, 0, 0.5); display: inline-block; margin: 0 10px 4px 0; opacity: 0.5; }
@media only screen and (max-width: 991px) { #top_company .inner { height: 100%; }
  #top_company .company_img { width: 100%; height: calc(50vh - 40px); }
  #top_company .company_text { width: 100%; height: calc(50vh - 40px); justify-content: flex-start; }
  #top_company .company_text h3 { margin: 0 0 50px; } }
@media only screen and (max-width: 767px) { #top_company .company_wrap { padding: 20px 0; }
  #top_company .company_img { height: calc(50vh - 20px); }
  #top_company .company_text { height: calc(50vh - 20px); }
  #top_company .company_text h3 { font-size: 20px; margin: 0 0 20px; }
  #top_company .company_text p { letter-spacing: 0; }
  #top_company .company_text .company_link { margin: 25px 0 0; } }