@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/aos/aos.css);
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
index
==============================*/

#bodyWrap { background-position: center calc(58vw - 83.5rem); }
#globalPara { top: calc(58vw - 83.5rem); }
@media screen and (max-width:1024px) { /* l */
  #bodyWrap { background-position: center calc(58vw - 83.5rem); }
  #globalPara { top: calc(76.66vw - 78.5rem); }
}


/* kv ----------*/
#kv { position: relative; width: 100%; aspect-ratio: 16 / 9.3; }
#kv:before { content: ""; position: absolute; top: 2rem; left: -20rem; z-index: 2; display: block; width: 50rem; aspect-ratio: 50 / 35.4; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/index/kv_ov_img_01.png); }
#kv .kv-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; place-items: center; transition: all 0.3s ease-out; }
#kv .kv-loading.is-loaded { opacity: 0; }
#kv .kv-loading span { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #D71518; animation: spin 1s ease-in-out infinite; }
#kv .kv-video { position: relative; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(15px 15px 40px rgba(0, 0, 0, 0.20)); opacity: 0; transition: all 0.3s ease-out 0.3s; }
#kv .kv-video.is-loaded { opacity: 1; }
#kv h1 { position: sticky; margin-top: -10rem; z-index: 5; bottom: 0; left: 0; width: 100%; padding: 0 3rem; letter-spacing: 0.1em; text-align: center; opacity: 0; transition: opacity 0.3s ease-out 0.3s; }
#kv h1.is-loaded { opacity: 1; }
#kv h1 .w { position: relative; display: inline-block; width: 100%; max-width: 126rem; margin: auto; text-align: right; }
#kv h1 .w::before,
#kv h1 .w::after { content: ""; position: absolute; z-index: 2; display: block; width: 50rem; aspect-ratio: 50 / 42; background-repeat: no-repeat; background-position: center; background-size: cover; }
#kv h1 .w::before { background-image: url(../img/index/kv_ov_img_02.png); right: 24em; bottom: -24rem; }
#kv h1 .w::after { background-image: url(../img/index/kv_ov_img_03.png); right: -12rem; bottom: -22rem; }
#kv h1 .w span { position: relative; z-index: 3; display: inline-block; font-size: 5rem; font-weight: 500; color: #FFF; }
#kv h1 .w .char { display: inline-block; opacity: 0; transform: translateY(100%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media screen and (max-width:1024px) { /* l */
  #kv { aspect-ratio: inherit; }
  #kv .kv-loading,
  #kv .kv-video { aspect-ratio: 372 / 285; }
  #kv h1 { position: relative; margin-top: 2rem; }
  #kv h1 .w { display: block; width: 100%; max-width: none; text-align: center; }
  #kv h1 .w span { color: #584343; }
  #kv h1 .w::before,
  #kv h1 .w::after { width: 60%; bottom: auto; }
  #kv h1 .w::before { left: -10%; top: -12rem; }
  #kv h1 .w::after { right: -10%; top: -12rem; }
}
@media screen and (max-width:600px) {
  #kv h1 .w::before,
  #kv h1 .w::after { width: 80%; }
  #kv h1 .w::before { left: -15%; top: -10rem; }
  #kv h1 .w::after { right: -15%; }
}
@media screen and (max-width:480px) { /* s */
  #kv { padding-top: 7rem; }
  #kv:before { width: 30rem;left: -10rem; }
  #kv h1 .w span { font-size: 8vw; }
}

/* news ----------*/
#news { position: relative; z-index: 10; max-width: 144rem; margin: auto; padding: 5rem 0 10rem 0; }
#news .news-wrap { display: flex; justify-content: end; align-items: center; gap: 3.6rem; padding-left: 3rem; }
#news .news-title h2 {}
#news .news-title h2 .e { font-size: 3.6rem;font-weight: 300; font-family: "Josefin Sans", sans-serif; color: #000; }
#news .news-title .bt.-more { margin-top: 3.6rem; }
#news .news-list { max-width: 81rem; }
@media screen and (max-width:480px) { /* s */
  #news .news-wrap  { flex-direction: column; gap: 2rem; padding-left: 0; }
  #news .news-title { position: relative; display: flex; width: 100%; align-items: center; justify-content: center;}
  #news .news-title h2 { position: absolute; left: 3rem; }
  #news .news-title .bt.-more { margin-top: 0; }
  #news .news-list { margin-left: 15%; }
}

/* message ----------*/
#message { padding-bottom: 2rem !important; }
#message .msg-wrap_01 { display: flex; align-items: start; }
#message .msg-wrap_01 .msg-pw { width: 48%; }
#message .msg-wrap_01 .msg-pw .clip.-msg_01 { position: relative; left: -17rem; }
#message .msg-wrap_01 .msg-tw { width: 52%; position: relative; z-index: 3; }
#message .msg-wrap_02 { display: flex; align-items: end; gap: 14rem; justify-content: end; margin-top: -3rem; }
#message .clip.-msg_01 { clip-path: url(#msg_01); max-width: 48.5rem; aspect-ratio: 485 / 456; }
#message .clip.-msg_02 { clip-path: url(#msg_02); max-width: 32.6rem; aspect-ratio: 326 / 247; }
#message .clip.-msg_03 { clip-path: url(#msg_03); max-width: 23rem; aspect-ratio: 230 / 198; }
#message .parallax-img.-msg_01 { z-index: 2; bottom: 0; left: -15rem; }
#message .parallax-img.-msg_02 { z-index: 2; top: -10rem; left: 25rem; }
#message .parallax-img.-msg_03 { z-index: 2; top: -10rem; right: -20rem; }
@media screen and (max-width:1260px) { /* x */
  #message .msg-wrap_01 .msg-pw .clip.-msg_01 { margin-top: -5rem; left: -4rem; }
  #message .msg-wrap_02 { margin-top: 3rem; gap: 4rem; }
  #message .parallax-img.-msg_02 { top: -10rem; left: 35rem; }
}
@media screen and (max-width:896px) { /* m */
  #message .msg-wrap_01 { flex-direction: column; }
  #message .msg-wrap_01 .msg-pw,
  #message .msg-wrap_01 .msg-tw { width: 100%; }
  #message .msg-wrap_01 .msg-pw { margin-bottom: 3rem;}
  #message .msg-wrap_01 .msg-pw .clip.-msg_01 { left: 0; margin: auto; }
  #message .msg-wrap_02 { justify-content: center; }
  #message .parallax-img.-msg_01 { bottom: auto; top: 15rem; left: -12rem; width: 60%; }
  #message .parallax-img.-msg_02 { top: -10rem; left: auto; right: -5rem; width: 40%; }
  #message .parallax-img.-msg_03 { display: none; }
}
@media screen and (max-width:480px) { /* s */
  #message { padding-bottom: 14rem !important; }
  #message .clip.-msg_01 { width: 85%; }
  #message .msg-wrap_02 { gap: 0; }
  #message .clip.-msg_02 { width: 70%; margin-left: -6rem;}
  #message .clip.-msg_03 { width: 40%; margin-right: -3rem; position: relative; top: 10rem; }
  #message .parallax-img.-msg_01 { left: -8rem; }
  #message p { font-size: 1.75rem; }
}

/* corporate ----------*/
#corporate {}
#corporate .h2 { margin-bottom: 0.8em !important; }
#corporate .corp-articles { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9rem; row-gap: 6rem; }
#corporate .corp-article { transition: all 0.3s ease-out; }
#corporate .corp-article:has(.clip:hover) { filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.20)); }
#corporate .corp-article:nth-child(1) { margin-top: -2rem; margin-left: -12rem; }
#corporate .corp-article:nth-child(2) { margin-top: 8rem; margin-left: -12rem; }
#corporate .corp-article:nth-child(3) { margin-top: -14rem; }
#corporate .corp-article:nth-child(4) {}
#corporate .corp-article .clip { margin: auto; }
#corporate .corp-article .btw { display: none; text-align: center; }
#corporate .corp-article p { max-width: 34rem; margin: auto; font-size: 1.6rem; margin-top: 1.7rem; }
#corporate .clip { position: relative; background-size: 100%; transition: all 0.3s ease-out; }
#corporate .clip::before,
#corporate .clip::after { content: ""; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s ease-out; pointer-events: none; }
#corporate .clip::before { background: linear-gradient(190deg, rgba(130, 180, 142, 0.00) 36.51%, rgba(23, 62, 65, 0.50) 91.83%); }
#corporate .clip::after { opacity: 0; background: linear-gradient(190deg, rgba(236, 247, 238, 0.50) 36.51%, rgba(23, 62, 65, 0.70) 91.83%); }
#corporate .clip:hover { background-size: 105%; cursor: pointer; }
#corporate .clip:hover::before { opacity: 0; }
#corporate .clip:hover::after { opacity: 1; }
#corporate .clip a { position: absolute; display: grid; place-items: end center; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; padding-bottom: 10%; }
#corporate .clip a:hover { opacity: 1; }
#corporate .clip a .w { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
#corporate .clip a h3 {}
#corporate .clip a h3 span { display: block; text-align: center; color: #FFF; }
#corporate .clip a h3 .e { font-size: 1.4rem; font-family: "Josefin Sans", sans-serif; font-weight: 400; letter-spacing: 0.1em; }
#corporate .clip a h3 .j { font-size: 2.4rem;}
#corporate .clip a .bt.-more { color: #FFF; margin-top: 10%; }
#corporate .clip a .bt.-more .arrow { fill: #FFF; }
#corporate .clip:hover a .bt.-more span::after { width: 0; }
#corporate .clip:hover a .bt.-more .arrow { width: 2.5rem; background-color: rgba(255,255,255,0.2); }
#corporate .clip.-corp_01 { clip-path: url(#corp_01); max-width: 42.4rem; aspect-ratio: 424 / 341; }
#corporate .clip.-corp_02 { clip-path: url(#corp_02); max-width: 36.5rem; aspect-ratio: 365 / 391; }
#corporate .clip.-corp_03 { clip-path: url(#corp_03); max-width: 40.2rem; aspect-ratio: 402 / 321; }
#corporate .parallax-img.-corp_01 { z-index: 2; top: 20rem; left: 30rem; }
@media screen and (max-width:1024px) { /* l */
  #corporate .corp-articles { column-gap: 4rem; row-gap: 4rem; }
  #corporate .corp-article:nth-child(1) { margin-top: -2rem; margin-left: 0; }
  #corporate .corp-article:nth-child(2) { margin-top: 8rem; margin-left: 0; }
  #corporate .corp-article:nth-child(3) { margin-top: -14rem; }
}
@media screen and (max-width:480px) { /* s */
  #corporate .corp-articles { grid-template-columns: 1fr; gap: 3rem; }
  #corporate .corp-article:nth-child(1) { margin-top: 0; }
  #corporate .corp-article:nth-child(2) { margin-top: 0; }
  #corporate .corp-article:nth-child(3) { margin-top: 0; }
  #corporate .clip a .bt.-more { display: none; }
  #corporate .corp-article .btw { display: block; margin-top: 2rem; }
  #corporate .corp-article p {  font-size: 1.75rem; }

}

/* about ----------*/
#about {}
#about .about-wrap { display: flex; gap: 5.5rem; }
#about .about-pw { position: relative; width: calc(50% - 2.75rem); }
#about .about-pw::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; aspect-ratio: 514 / 375; border-radius: 2rem; background: linear-gradient(180deg, rgba(144, 121, 121, 0.48) 0%, rgba(195, 175, 162, 0.18) 63.5%); }
#about .about-pw h3 { position: absolute; z-index: 3; color: #FFF; top: 3rem; left: 2.5rem; padding-right: 2rem; text-align: left; }
#about .about-pw h3 .e { font-size: 1.4rem; font-weight: 400; display: block; letter-spacing: 0.1em; margin-bottom: 1rem; }
#about .about-pw h3 .j { font-size: 2.6rem; }
#about .about-pw .pg { position: relative; z-index: 1; width: 100%; aspect-ratio: 514 / 375; overflow: hidden; border-radius: 2rem; }
#about .about-pw .pg li { aspect-ratio: 514 / 375; background-repeat: no-repeat; background-position: center; background-size: cover; }
#about .about-pw .pg .owl-dots { display: none !important; }
#about .about-tw { padding-bottom: 7rem; width: calc(50% - 2.75rem); pointer-events: none; }
#about .about-tw p { font-size: 1.6rem; }
#about .about-wrap .bt.-more { position: absolute; bottom: 2rem; left: calc(100% + 5.5rem); }
@media screen and (max-width:896px) { /* m */
  #about .about-wrap { flex-direction: column; gap: 3rem; }
  #about .about-pw,
  #about .about-tw { width: 100%; }
  #about .about-pw { text-align: center; }
  #about .about-wrap .bt.-more { position: relative; left: 0; bottom: auto; margin-top: 3rem; }
}
@media screen and (max-width:480px) { /* s */
  #about .about-tw p { font-size: 1.75rem; }
  #about .about-pw h3 .j { font-size: 2rem; }
}

/* business ----------*/
#business { padding-top: 17rem !important; }
#business .biz-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; }
#business .biz-wrap .biz-cont {}
#business .btw { margin-top: -14rem; text-align: center; }
#business .clip.-biz_01 { clip-path: url(#biz_01); max-width: 27.1rem; aspect-ratio: 271 / 270; margin-top: -17rem; margin-left: -5rem; }
#business .clip.-biz_02 { clip-path: url(#biz_02); max-width: 51.2rem; aspect-ratio: 512 / 416; position: relative; margin-top: -3rem; right: -7rem; margin-bottom: 5rem; }
#business .clip.-biz_03 { clip-path: url(#biz_03); max-width: 33.2rem; aspect-ratio: 332 / 256; margin-top: -8rem; margin-left: 14rem; }
#business .clip.-biz_04 { clip-path: url(#biz_04); max-width: 32.6rem; aspect-ratio: 326 / 248; position: relative; margin-left: auto; right: -3rem; margin-top: -3rem; }
@media screen and (max-width:1024px) { /* l */
  #business .clip.-biz_03 { margin-top: 2rem; margin-left: 0; }
  #business .clip.-biz_04 { right: -3rem; margin-top: -3rem; }
  #business .btw { margin-top: -4rem; }
}
@media screen and (max-width:896px) { /* m */
  #business .biz-wrap { grid-template-columns: 1fr; gap: 4.8rem; }
  #business .clip.-biz_01 { max-width: 30.1%; margin-top: -10rem; }
  #business .clip.-biz_02 { max-width: 70.2%; margin-top: 0; right: -6rem; margin-bottom: 0; margin-left: auto; }
  #business .clip.-biz_03 { max-width: 60.2%; margin-top: 4rem; margin-left: -4rem; }
  #business .clip.-biz_04 { max-width: 59.6%;  margin-right: -4rem; }
  #business .btw { margin-top: 0; }
}
@media screen and (max-width:480px) { /* s */
  #business { padding-top: 2rem !important; }
}

/* recruit ----------*/
#recruit { padding-bottom: 23rem !important; }
#recruit .recruit-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8.5rem; }
#recruit .recruit-links li {}
#recruit .recruit-links li > a { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 496 / 358; overflow: hidden; border-radius: 4rem; color: #FFF; background-repeat: no-repeat; background-position: center; background-size: 100%; text-decoration: none; transition: all 0.3s ease-out; }
#recruit .recruit-links li > a:hover { opacity: 1; background-size: 105%;  }
#recruit .recruit-links li > a::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(211, 197, 189, 0.41); transition: all 0.3s ease-out; }
#recruit .recruit-links li > a:hover:before { background: rgba(151, 184, 172, 0.50); }
#recruit .recruit-links li > a span { position: relative; z-index: 2; }
#recruit .recruit-links li .btw { display: none; }
#recruit .recruit-links li .recruit-links-title { width: 100%; text-align: left; padding-left: 3rem; }
#recruit .recruit-links li .recruit-links-title .e { font-size: 2rem; display: block; font-family: "Josefin Sans", sans-serif; letter-spacing: 0.1em; }
#recruit .recruit-links li .recruit-links-title .j { font-size: 2.2rem; font-weight: bold; }
#recruit .recruit-links li .more { position: absolute; right: 2.4rem; bottom: 3rem; display: flex; line-height: 1; align-items: center; gap: 2.2rem; font-family: "Josefin Sans", sans-serif; font-size: 1.6rem; font-weight: 400; }
#recruit .recruit-links li .more .arrow { width: 1.7rem; aspect-ratio: 15 / 12; fill: #FFF; }
@media screen and (max-width:1024px) { /* l */
  #recruit .recruit-links { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
@media screen and (max-width:896px) { /* m */
  #recruit .recruit-links { grid-template-columns: 1fr; }
}
@media screen and (max-width:480px) { /* s */
  #recruit { padding-bottom: 8rem !important; }
  #recruit .recruit-links li .more { display: none; }
  #recruit .recruit-links li .btw { display: block; text-align: center; margin-top: 2rem; }
}