@charset "utf-8";
/*
	Last Update: 2025/07/25
	Auther: yt
*/
/*===================================================================
	top
===================================================================*/

:root { --sv-ratio-x:641; --sv-ratio-y:973; --sv-threshold:575; --sv-ratio:var(--sv-ratio-x)/var(--sv-ratio-y); }
#base { padding-top:0; }
.top_body_wrap { display:flex; }
.top_body_wrap.is-vertical { flex-direction:column; }
.top_body_wrap .top_sidevisual_wrap { position:sticky; left:0; top:0; height:100vh; width:calc(var(--sv-ratio-x) / var(--sv-ratio-y) * 100vh); }
.top_body_wrap.is-vertical .top_sidevisual_wrap { position:relative; width:100%; height:auto; }
.top_body_wrap .top_contents_wrap { overflow:auto; flex:1; padding-top:var(--header-height); container:contents / inline-size; }
.top_body_wrap.is-vertical .top_contents_wrap { padding-top:0; }
#side_image_wrap { position:relative; width:100%; height:100%; }
#side_image_wrap .sdgs_btn { position:absolute; bottom:2.055%; right:3.120%; width:19.033%; }
#side_image_wrap .sdgs_btn img { width:100%; height:auto; }
#side_image img { width:100%; }
.t-center { padding-left:20px; padding-right:20px; }

#main_visual_wrap { padding-top:var(--header-height); margin-top:calc(var(--header-height) * -1); background:url(../image/top/mv_gradient.jpg) no-repeat center center / cover; position:relative;  padding-bottom:80px; }
.top_body_wrap.is-vertical #main_visual_wrap { margin-top:0; padding-top:30px; }
#main_visual_wrap::before,
#main_visual_wrap::after { content:""; position:absolute; display:block; z-index:1; }
#main_visual_wrap::before { width:100%; height:auto; padding-top:20.938%; background:#fff; clip-path:polygon(0 0, 0 100%, 100% 0); top:0; left:0; }
#main_visual_wrap::after { width:100%; height:100%; top:0; right:0; background:url(../image/top/mv_logo.png) no-repeat center right -20px / auto calc(100% - 80px); }
#main_visual_wrap > * { z-index:2; position:relative; }
#main_visual_wrap .main_text { width:auto; position:absolute; bottom:40px; left:calc(50% + 200px); z-index:3; padding-right:20px; pointer-events:none; }
#main_visual_wrap .main_cm { width:auto; position:absolute; top:60px; right:calc(50% + 300px); z-index:3; padding-left:20px; max-width:322px; pointer-events:none; }
.top_body_wrap.is-vertical #main_visual_wrap .main_cm { top:0; }
#main_visual_wrap .main_cm img,
#main_visual_wrap .main_text img { width:100%; height:auto; }
#main_visual { width:1000px; margin-left:auto; margin-right:auto; max-width:calc(100% - 40px); text-align:center; position:relative; padding-top:40px; }
#main_visual .video_open { position:relative; border-radius:10px; overflow:hidden; }
@container contents (max-width:1200px){
	#main_visual_wrap .main_cm { left:0; padding-left:0; right:auto; width:268px; }
	#main_visual_wrap .main_text { right:0; left:auto; width:368px; }
}
@container contents (max-width:991px){
	#main_visual_wrap .main_cm { width:200px; }
	#main_visual_wrap .main_text { width:300px; }
}
@container contents (max-width:767px){
	#main_visual_wrap .main_cm { width:160px; }
	#main_visual_wrap .main_text { width:220px; }
}


#top_news_pickup .news_pickup { background:#fff; padding:10px 20px; display:flex; align-items:center; min-height:50px; margin-top:-25px; width:min(900px, calc(100% - 20px)); margin-left:auto; border-radius:5px 0 0 5px; position:relative; z-index:1; box-shadow:0 1px 13px rgba(0,0,0,.2); }
#top_news_pickup .news_wrap { display:flex; align-items:center; width:100%; }
#top_news_pickup .news_wrap > *:not(:last-child) { padding-right:10px; }
#top_news_pickup .news_wrap .category .tag { display:inloine-block; background:#292929; color:#fff; font-weight:500; padding:5px; font-size:.9em; }
#top_news_pickup .news_wrap .date { color:#9B8719; font-weight:500; }
#top_news_pickup .news_wrap .title { flex:1; }
#top_news_pickup .news_wrap .title .main { font-weight:500; }
#top_news_pickup .readmore_btn .main { padding-left:22px; background:url(../image/icon/arrow3-r.png) no-repeat center left / 18px auto; font-weight:bold; color:#3D444E; }
@container contents (max-width:767px){
	#top_news_pickup .news_wrap { flex-wrap:wrap; }
	#top_news_pickup .news_wrap .title,
	#top_news_pickup .news_wrap .readmore { width:100%; padding-right:0; flex:none; }
	#top_news_pickup .news_wrap .title { padding:5px 0; }
	#top_news_pickup .news_wrap .readmore { text-align:right; }
}

#top_about { background:url(../image/top/about_bg.jpg) no-repeat center center / cover; }
#top_about .image { margin-bottom:20px; }
#top_about .hl_about { text-align:center; margin-bottom:15px; }
#top_about .hl_about .main { font-size:1.5em; font-weight:bold; line-height:1.4; }
#top_about .hl_about .main .strong { font-size:1.5em; color:#9B8719; display:inline-block; padding:0 2px; letter-spacing:2px; text-indent:2px; }
#top_about .lead { font-size:1.1em; line-height:1.8; margin-bottom:30px; }
@container contents (max-width:575px) {
	#top_about .hl_about .main { font-size:1.25em; }
}

#top_problem { background:var(--c-blue); position:relative; z-index:2; }
#top_problem::after { content:""; width:min(300px, 50%); height:35px; background:var(--c-blue); clip-path:polygon(0 0, 100% 0, 50% 100%); position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); }
#top_problem .hl_problem { padding-left:200px; position:relative; min-height:80px; padding-bottom:30px; text-align:center; display:inline-block; }
#top_problem .hl_problem::before { content:""; width:189px; height:158px; display:block; position:absolute; left:0; bottom:0; background:url(../image/top/problem_image_2.png) no-repeat center bottom / contain; }
#top_problem .hl_problem .main { font-weight:bold; font-size:2em; color:#fff; text-align:left; }
#top_problem .problem_list ul li { background:#fff; padding:10px 20px; border-radius:10px; }
#top_problem .problem_list ul li:not(:last-child) { margin-bottom:20px; }
#top_problem .problem_list ul li .main { padding-left:35px; min-height:30px; display:flex; align-items:center; font-weight:bold; font-size:1.2em; background:url(../image/top/problem_icon.png) no-repeat center left / auto 30px; }
@container contents (max-width:575px) {
	#top_problem .hl_problem { padding-left:120px; }
	#top_problem .hl_problem .main { font-size:1.5em; }
	#top_problem .hl_problem::before { width:150px; height:125px; left:-30px; }
}

#top_service { background:url(../image/top/service_bg.jpg) no-repeat center center / cover; }
#top_service .service_contact_wrap { position:relative; }
#top_service .service_contact_wrap .service_contact_img { position:absolute; top:50%; transform:translateY(-50%); }
#top_service .service_contact_wrap .service_contact_img._left { right:calc(50% + 150px); }
#top_service .service_contact_wrap .service_contact_img._right { left:calc(50% + 170px); }
#top_service .hl_service { text-align:cener; margin-bottom:30px; }
#top_service .hl_service .main { text-align:center; }
#top_service .lead { text-align:center; font-weight:bold; margin-bottom:30px; }
#top_service .button_wrap { text-align:center; }
#top_service .button_wrap .button .main { padding-left:30px; background:url(../image/icon/contact.png) no-repeat center left / 20px auto; }
#top_service .service_about_wrap { padding-top:40px; }
#top_service .service_about_wrap .hl_service_about { margin-bottom:20px; text-align:center; z-index:1; position:relative; }
#top_service .service_about_wrap .hl_service_about .main { font-size:2.25em; font-weight:bold; margin-bottom:10px; }
#top_service .service_about_wrap .hl_service_about .sub { font-size:1.25em; font-weight:bold; }
#top_service .service_about_wrap .service_about_text { display:flex; align-items:center; justify-content:center; }
#top_service .service_about_wrap .service_about_text .comment { font-weight:bold; font-size:1.1em; line-height:2; width:480px; }
#top_service .service_about_wrap .service_about_text .image { max-width:calc(100% - 500px); display:flex; align-items:center; }
#top_service .service_list .unit_wrap { width:33.333%; }
@container contents (max-width:991px) {
	#top_service .service_list .unit_wrap .unit .text { font-size:1em; }
}
@container contents (max-width:767px) {
	#top_service .service_contact_wrap { display:flex; flex-wrap:wrap; justify-content:center; width:450px; max-width:100%; margin-left:auto; margin-right:auto; }
	#top_service .service_contact_wrap .text_wrap { width:100%; margin-bottom:40px; }
	#top_service .service_contact_wrap .service_contact_img { position:relative; left:auto!important; right:auto!important; top:auto; transform:none; }
	#top_service .service_contact_wrap .service_contact_img._left { width:52%; }
	#top_service .service_contact_wrap .service_contact_img._right { width:48%; }
	#top_service .service_contact_wrap .service_contact_img img { max-width:unset; width:110%; margin-left:-5%; margin-right:-5%; }
	#top_service .service_about_wrap .hl_service_about { text-align:left; width:480px; max-width:100%; margin-left:auto; margin-right:auto; }
	#top_service .service_about_wrap .service_about_text { position:relative; }
	#top_service .service_about_wrap .service_about_text .image { position:absolute; bottom:100%; right:calc(50% - 270px); width:195px; max-width:unset; }
	#top_service .service_list .unit_wrap { width:50%; }
}
@container contents (max-width:575px) {
	#top_service .service_about_wrap { max-width:330px; margin-left:auto; margin-right:auto; }
	#top_service .service_about_wrap .hl_service_about .main { font-size:1.5em; }
	#top_service .service_about_wrap .hl_service_about .sub { font-size:1.1em; }
	#top_service .service_about_wrap .service_about_text .image { width:170px; right:calc(50% - 180px); }
	#top_service .top_case_img img { width:240px; }
}


#top_case { padding-top:10cqw; margin-top:-10cqw; background:url(../image/top/case_bg.jpg) no-repeat center center / cover; clip-path: polygon(0 10cqw, 0 100%,100% 100%,100% 0); }
#top_case .top_case_inner { padding-top:30px; }
#top_case .hl_case { text-align:center; margin-bottom:40px; }
#top_case .hl_case .main { margin-bottom:10px; }
#top_case .hl_case .sub { color:#fff; font-weight:bold; }
#top_case .case_list .case_list_unit { width:33.333%; }
#top_case .case_list .case_list_unit a { box-shadow:none; }
#top_case .button_wrap { text-align:center; }
@container contents (max-width:767px) {
	#top_case .case_list { flex-direction:column; align-items:center; }
	#top_case .case_list .case_list_unit { width:min(100%, 360px); }
}

#top_recruit { background:url(../image/top/recruit_bg_2.jpg) no-repeat center center / cover; }
#top_recruit .top_recruit_wrap { display:flex; }
#top_recruit .top_recruit_wrap .text_wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:2; padding-left:20px; }
#top_recruit .top_recruit_wrap .text_wrap .hl_recruit { margin-bottom:20px; text-align:center; }
#top_recruit .top_recruit_wrap .text_wrap .hl_recruit img { width:300px; }
#top_recruit .top_recruit_wrap .text_wrap .text_box { background:var(--c-blue); padding:30px; border-radius:10px; }
#top_recruit .top_recruit_wrap .text_wrap .text_box .comment { color:#fff; font-weight:bold; text-align:center; font-size:1.75em; line-height:1.4; margin-bottom:20px; }
#top_recruit .top_recruit_wrap .text_wrap .text_box .button_wrap { text-align:center; }
#top_recruit .top_recruit_wrap .image_wrap { position:relative; z-index:1; flex-grow:1; }
#top_recruit .top_recruit_wrap .image_wrap .image { width:105%; margin-left:-5%; display:flex; align-items:flex-end; height:100%; }
#top_recruit .top_recruit_wrap .image_wrap .image img { width:100%; }
@container contents (max-width:767px) {
	#top_recruit .top_recruit_wrap { flex-direction:column; }
	#top_recruit .top_recruit_wrap .text_wrap { padding-left:20px; padding-right:20px; }
	#top_recruit .top_recruit_wrap .image_wrap { margin-top:-20px; }
}

#top_instagram { background:url(../image/top/ig_bg_2.jpg) no-repeat center center / cover; }
#top_instagram .hl_ig { text-align:center; margin-bottom:30px; color:#fff;  }
#top_instagram .hl_ig .image { margin-bottom:20px; }
#top_instagram .hl_ig .main { font-size:2em; font-weight:bold; }
#top_instagram .comment { font-size:1.1em; font-weight:bold; margin-bottom:30px; color:#fff; text-align:center; }
#top_instagram .ig_account { display:inline-block; text-align:center; height:45px; position:relative;background:linear-gradient(to right, #B73A9F, #FFB344); border-radius:45px; padding:1px; overflow:hidden; }
#top_instagram .ig_account::before { content:""; width:45px; height:45px; left:0; top:0; z-index:1; position:absolute; background:url(../image/top/ig_icon.png) no-repeat center center / contain; }
#top_instagram .ig_account .ig_account_inner { padding-left:45px; border-radius:45px; background:#fff; height:100%; display:flex; align-items:center; justify-content:center; }
#top_instagram .ig_account .ig_account_inner .main { display:block; padding-left:15px; padding-right:20px; font-weight:bold; color:#BF50A4; }

#top_company { background:url(../image/top/company_bg.jpg) no-repeat center center / cover; }
#top_company .hl_company { text-align:center; margin-bottom:30px; }
#top_company .hl_company .main { margin-bottom:10px; }
#top_company .hl_company .sub { font-weight:bold; font-size:1.1em; }
#top_company .service_list .unit_wrap { width:50%; }

/*===================================================================
	#modal
===================================================================*/
#modal { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9000; text-align:left; padding-top:120px; padding:120px 20px; text-align:center; align-items:center; justify-content:center; overflow:auto; overscroll-behavior:none; display:flex; }
#modal:not(._load) { opacity:0; pointer-events:none; }
#modal .modal_bg { position:absolute; top:0; left:0; z-index:1; width:100%; height:calc(100vh + 1px); background:rgba(0, 0, 0, 0.71); }
#modal .modal_wrap { position:relative; width:100%; max-width:1150px; display:inline-block; margin-top:40px; z-index:2; }
#modal .modal_wrap._modal_video { max-width:min(1150px,calc(80vh * (16/9) - 40px)); }
#modal .modal_wrap .modal_close { content:""; width:40px; height:40px; background:url(../image/icon/time.png) no-repeat center center / 35px auto; display:block; position:absolute; top:-10px; right:0; transform:translateY(-100%); cursor:pointer; transition:.2s; }
#modal .modal_wrap .modal_area { max-height:calc(100vh - 120px); overflow-y:auto; overscroll-behavior:none; }
.video { position:relative; width:100%; height:0; padding-bottom:56.25%; }
.video>video { position:absolute; top:0; left:0; width:100%; height:100%; display:block;}
@media (max-width:767px) {
	#modal { padding:80px 20px; }
	#modal .modal_wrap .modal_area { max-height:calc(100vh - 160px); }
	#modal .modal_wrap .modal_close { width:30px; height:30px; background-size:20px; }
}

.service_list { display:flex; flex-wrap:wrap; width:calc(100% + 20px); margin-left:-10px; margin-right:-10px; position:relative; z-index:1; }
.service_list .unit_wrap { width:33.333%; padding:0 10px 20px; }
.service_list .unit_wrap .unit { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.14); display:flex; flex-direction:column; height:100%; }
.service_list .unit_wrap .unit .text { display:flex; padding:10px; align-items:center; justify-content:center; text-align:center; font-weight:bold; font-size:1.2em; font-weight:600; height:100%; }

@container contents (max-width:575px) { .hidden-cont-only { display:none!important; } }
@container contents (min-width:576px) { .visible-cont-only { display:none!important; } }
@container contents (max-width:767px) { .hidden-cont-xs { display:none!important; } }
@container contents (min-width:768px) { .visible-cont-xs { display:none!important; } }
@container contents (max-width:991px) { .hidden-cont-sm { display:none!important; } }
@container contents (min-width:992px) { .visible-cont-sm { display:none!important; } }