@charset "UTF-8";

html, body{ overflow: hidden;}

.width_con:has( > .scroll_con){  overflow: hidden; padding: 0; }
.sections.current .width_con:has( > .scroll_con){  overflow: scroll;}
.scroll_con{ position: relative;}
.scroll_con > *{ padding: var(--mrgn-x8) 0; }
strong.date{ min-width: 75px;}
.title_con{ position: relative; word-break: keep-all; margin-bottom: var(--mrgn-x3);}
.title_con h2, .title_con .h2{ margin-top: var(--mrgn);}
.title_con h3{ color: var(--color_main_01); font-weight: 700; text-transform: uppercase;}
.title_con h3.badge{ font-size: 0.8em; background: var(--color_main_01); padding: calc(var(--mrgn-half) / 2) var(--mrgn-half); border-radius: calc(var(--mrgn-half) * 3); color: var(--color_w); font-weight: 400; display: inline-block; width: auto;}
.white .title_con h3.badge{ background: var(--color_w); color: var(--color_main_01);}
.title_con h4{ margin-top: var(--mrgn); font-weight: 400;}
.title_con div{ margin-top: var(--mrgn-x5);}
a.text{ transform: translateY(var(--mrgn-x2)); opacity: 0; filter: blur(var(--mrgn-half)); transition: all 750ms ease-in-out; transition-delay: 200ms;}


.title_con.center > *{ width: inherit; margin-left: auto; margin-right: auto;}
.title_con.right{ text-align: right;}
.sections.white .title_con{ color: var(--color_w);}

.fixed_title{ position: fixed !important; top: 50%; margin-top: 60px; transform: translateY(-50%); z-index: 1;}
.sections:has(.fixed_title){clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

.title_con > h3,
.title_con > h2,
.title_con > h4,
.title_con > div{ transform: translateY(var(--mrgn-x2)); opacity: 0; filter: blur(var(--mrgn-half)); transition: all 750ms ease-in-out; transition-delay: 200ms;}
.sections.current .title_con > h2,
.sections.current .title_con > div.h2{ transition-delay: 350ms;}
.sections.current .title_con > h4{ transition-delay: 500ms;}
.sections.current .title_con > div,
.sections.current a.text{       transition-delay: 650ms;}
.sections.current .title_con > h3,
.sections.current .title_con > h2,
.sections.current .title_con > h4,
.sections.current .title_con > div,
.sections.current a.text{ transform: translateY(0); opacity: 1; filter: blur(0);}


.title_con h1{ margin-bottom: var(--mrgn); }


#visual.sections.section_01{background: var(--color_k_1e); overflow: hidden;}
#visual.sections.section_01 .width_con{ padding: 0;}
#visual.sections.section_01 .width_con .title_con{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#visual.sections.section_01 .width_con .title_con h4{  font-weight: 500; max-width: 750px;}
#visual.sections.section_01 ul.tab_content,
#visual.sections.section_01 ul.tab_content li{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#visual.sections.section_01 ul.tab_content li{ opacity: 0; pointer-events: none; transition: all 350ms ease-out;}
#visual.sections.section_01 ul.tab_content li.show{ opacity: 1; pointer-events: auto;}
#visual.sections.section_01 ul.tab_content li:before,
#visual.sections.section_01 ul.tab_content li:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; }
#visual.sections.section_01 ul.tab_content li:before{ background: inherit; transform: scale(1.15); transition: all 1000ms ease-out; }
#visual.sections.section_01 ul.tab_content li.show:before{ transform: scale(1); }
#visual.sections.section_01 ul.tab_content li:after{  background: var(--color_k_1e); opacity: .5; z-index: 1;}
#visual.sections.section_01 ul.tab_content li h1,
#visual.sections.section_01 ul.tab_content li h4{ position: relative; transform: translateY(var(--mrgn-x2)); opacity: 0; filter: blur(var(--mrgn-half)); z-index: 1; transition: all 750ms ease-in-out;}
#visual.sections.section_01 ul.tab_content li.show h1,
#visual.sections.section_01 ul.tab_content li.show h4{ transform: translateY(0); opacity: 1; filter: blur(0);}
#visual.sections.section_01 ul.tab_content li.show h1{ transition-delay: 0ms;}
#visual.sections.section_01 ul.tab_content li.show h4{ transition-delay: 200ms;}
#visual.sections.section_01 .rolling_timer{ position: absolute; top: calc(50% + var(--mrgn-x6)); left: 50%; transform: translate(-50%, -50%); z-index: 4;}
#visual.sections.section_01 .rolling_timer > *{ display: inline-block; vertical-align: middle;}
#visual.sections.section_01 .rolling_timer > img{ cursor: pointer;}
#visual.sections.section_01 .rolling_timer > img.pause,
#visual.sections.section_01 .rolling_timer > img.play{  width: 46px; margin-left: 15px; margin-right: -42px;}
#visual.sections.section_01 .rolling_timer .current_index_no,
#visual.sections.section_01 .rolling_timer .visual_no{ width: 10px; height: 10px; border: 1px solid var(--color_w_030); border-radius: 50%; margin: 5px;}
#visual.sections.section_01 .rolling_timer .visual_no.on{ border-color: var(--color_w);}
#visual.sections.section_01 .rolling_timer .timer_gage{ width: var(--mrgn-x6); height: 2px; background: var(--color_w_030); border-radius: 2px; margin: 5px;}
#visual.sections.section_01 .rolling_timer .timer_gage div{ height: inherit; width: 0; background: var(--color_w); border-radius: 2px;}


#business.sections.section_02{ background: var(--color_w) url(../img/bg_business.svg) no-repeat -10% -50% / 50%;  transition: background 1250ms cubic-bezier(0, .35, .35, 1) 350ms;}
#business.sections.section_02.current{ background: var(--color_w) url(../img/bg_business.svg) no-repeat -10% -15% / 50%;}

#business.sections.section_02 .width_con .scroll_con{ max-width: none;}
#business.sections.section_02 .width_con .scroll_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells:nth-child(1){ padding-top: 25%;}
#business.sections.section_02 .width_con .scroll_con > ul.v_con.two_con > li.cells > ul.v_con.two_con > li.cells > ul.v_con > li.cells.box > h4{ padding: var(--mrgn-half) 0 0 var(--mrgn); box-sizing: border-box;}
#business.sections.section_02 .title_con h4{ font-size: 1em; font-weight: 300; color: var(--color_k_66);}


#story.sections.section_03{ background: url(../img/bg_story.png) no-repeat 50% 50% / cover; background-attachment: fixed;}
#story.sections.section_03 .title_con .h2{ display: flex; width: 100%; align-items: end;}
#story.sections.section_03 .title_con .h2 h2{ flex: 1 1 auto; margin-top: 0;}
#story.sections.section_03 .title_con h4{ font-size: 1em; font-weight: 300; color: var(--color_k_060);}
#story.sections.section_03 .title_con div:not(.h2, .history_slide) { margin-top: 0;}
#story.sections.section_03 .history { margin: 0 auto var(--mrgn-x4) auto; text-align: left; column-count: 2; column-gap: var(--mrgn-x7); width: fit-content; max-width: 100%;}
#story.sections.section_03 .history li { position: relative;}
#story.sections.section_03 .history div { break-inside: avoid; margin-bottom: var(--mrgn-half);}
#story.sections.section_03 .history .date { position: absolute; }
#story.sections.section_03 .history span{ font-size: 0.9em; margin-left: var(--mrgn-half); padding-left: 1.7em; display: inline-block;}
#story.sections.section_03 .year { display: flex; justify-content: space-between;}
#story.sections.section_03 .year .slick-slide { font-size: 7em; color: var(--color_k_010); font-weight: 700; text-align: center;}
#story.sections.section_03 .year .slick-center { color: var(--color_k);}
#story.sections.section_03 .slick-arrow { display: none!important;}
#story.sections.section_03 .btn { margin-top: var(--mrgn-x3); position: relative;}
#story.sections.section_03 .btn:before {position: absolute; border-top: 1px solid var(--color_main_01_025); top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; content:"";}
#story.sections.section_03 .btn span { cursor: pointer; background: var(--color_main_01); width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; position: relative;}
#story.sections.section_03 .btn .btn_prev { border-top-left-radius: var(--mrgn); border-bottom-left-radius: var(--mrgn);}
#story.sections.section_03 .btn .btn_next { border-top-right-radius: var(--mrgn); border-bottom-right-radius: var(--mrgn);}


#portfolio.sections.section_04{ background: var(--color_w) url(../img/bg_portfolio.png) no-repeat 50% 50% / cover; overflow-x: hidden;}
#portfolio.sections.section_04 .width_con { max-width: 1920px; width: 100%;}
#portfolio.sections.section_04 .portfolio_bg { width: calc(100% - 100px); max-width: 1920px; padding: 0 50px;}
#portfolio.sections.section_04 .title_con div:not(.h2, .portfolio) { margin-top: 0;}

#portfolio.sections.section_04 .portfolio_slide { margin-top: calc(-1 * var(--mrgn-half) * 7);}
#portfolio.sections.section_04 .portfolio_slide .slick-slide { margin: 0 50px; filter: grayscale(100%); transition: all 0.4s ease; transform: scale(0.95);}
#portfolio.sections.section_04 .portfolio_slide .slick-slide > img { border-radius: calc(var(--mrgn) + 2px); width: 100%; }
#portfolio.sections.section_04 .portfolio_slide .slick-center.img { filter: grayscale(0%); transform: scale(1.2); transform-origin: center center;}
#portfolio.sections.section_04 .portfolio_slide .slick-center.img > img { border-radius: var(--mrgn); }
#portfolio.sections.section_04 .portfolio_slide .slick-list { padding-top: calc(var(--mrgn-half) * 4)!important; padding-bottom: calc(var(--mrgn-half) * 16)!important;}
#portfolio.sections.section_04 .portfolio_slide .slick-track { display: flex !important; align-items: center; justify-content: center;}
#portfolio.sections.section_04 .portfolio_info { margin-top: 0;}
#portfolio.sections.section_04 .portfolio .slick-list { margin: 0 -50px;}
#portfolio.sections.section_04 .portfolio .info { padding-top: var(--mrgn-half); display: flex; margin-top: var(--mrgn); position: absolute; bottom: 0; width: 100%; transform: translateY(100%);}
#portfolio.sections.section_04 .portfolio .info * { font-size: 1.05em; line-height: 1.4; color: var(--color_w); opacity: 0; transition: all 0.4s ease;}
#portfolio.sections.section_04 .portfolio .txt_s { display: flex; justify-content: space-between;}
#portfolio.sections.section_04 .portfolio .slick-center .info * { opacity: 1;}
#portfolio.sections.section_04 .portfolio .slick-center .txt { flex: 1 1 auto; }
#portfolio.sections.section_04 .portfolio .company img{ height: 50px; max-width: 200px;}
#portfolio.sections.section_04 .slick-arrow { display: none!important;}
#portfolio.sections.section_04 .btn-arrow { position: absolute; z-index: 1; background: var(--color_main_04); display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; cursor: pointer; border-radius: 50%;}
#portfolio.sections.section_04 .btn_prev { transform: translate(50%, -50%); }
#portfolio.sections.section_04 .btn_next{ transform: translate(-50%, -50%); } 


#portfolio.sections.section_04 .progress-container { width: 81.6%; height: 2px; background: var(--color_w_020);  margin: calc(var(--mrgn-half) * 4) auto!important; position: relative; overflow: hidden; display: none;}
#portfolio.sections.section_04 .progress-bar { width: 0%; height: 100%; background: var(--color_w); transition: width 0.3s ease;}



#certificate.sections.section_05{ background: var(--color_main_04);}
#certificate.sections.section_05 h4{ font-size: 1em; font-weight: 300; margin-bottom: calc(var(--mrgn-half) * 5);}
#certificate.sections.section_05 .cells{ overflow: hidden; background: #F8F8FA;}
#certificate.sections.section_05 .cells img{ border-radius: 0; width: 60%; margin: var(--mrgn) 0;}
#certificate.sections.section_05 .cells .txt { padding: calc(var(--mrgn-half) * 3) var(--mrgn); color: var(--color_k); margin-top: 0; background: var(--color_w);}
#certificate.sections.section_05 a.text.h4{ margin-top: calc(var(--mrgn-half) * 5);}


#notice.sections.section_06{ background: var(--color_w) url(../img/bg_notice.png) no-repeat 50% 50% / cover;}
#notice.sections.section_06 .title_con h4{ font-size: 1em; font-weight: 300; color: var(--color_k_66);}
#notice.sections.section_06 .title_con h4 img{ border-radius: 20px;}
#notice.sections.section_06 .scroll_con{ top: 50%; transform: translateY(-50%); margin-top: 60px; }
#notice.sections.section_06 .cells{ margin: 0 var(--mrgn);}
#notice.sections.section_06 .cells li a{ display: flex; margin: 0 var(--mrgn); padding: var(--mrgn) 0; border-bottom: 1px solid var(--color_k_dd);}
#notice.sections.section_06 .cells li a:hover{ border-color: var(--color_main_01);}
#notice.sections.section_06 .cells li a:hover h4{ color: var(--color_main_01);}
#notice.sections.section_06 .cells li .title{ flex: 1 1 auto; padding-right: var(--mrgn-x2); min-width: 0;}
#notice.sections.section_06 .cells li .title h4{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--mrgn-half);}
#notice.sections.section_06 .cells li .title span{font-weight: 300; color: var(--color_k_66); font-size: 0.75em; }
#notice.sections.section_06 .cells li img{ width: 28.4%; border-radius: var(--mrgn-half); object-fit: cover; height: 100%; aspect-ratio: 100 / 47;}
#notice.sections.section_06 .scroll_con > * { padding: 0;}
#notice.sections.section_06 ul.v_con { margin-bottom: 0px;}


#contact.sections.section_07{ background: linear-gradient(var(--color_k_f6) 0%, var(--color_w) 75%);}
#contact.sections.section_07 > .width_con{ padding: 0; z-index: 1;}
#contact.sections.section_07 .width_con ul.v_con.ub_two_con{ padding: calc(var(--mrgn) * 12) 0 0;}
#contact.sections.section_07  ul.v_con.ub_two_con > li.cells:first-child { width: calc(50% - var(--mrgn-x2));}
#contact.sections.section_07 .width_con ul.v_con.ub_two_con li.cells:last-child {height: calc(90vh - calc(var(--mrgn) * 12)); margin-bottom: 0; border: 1px solid var(--color_k_015); box-sizing: border-box; border-radius: var(--mrgn-x6) var(--mrgn-half) 0 0; overflow: hidden;width: calc(50% - var(--mrgn-x2));}

::-webkit-scrollbar-thumb:vertical{height:0px;}
::-webkit-scrollbar-thumb:horizontal{width:0px;}
::-webkit-scrollbar{width:0; height:0;}