@charset "utf-8";
/*
	Last Update: 2026/03/24
	Auther: yt
*/
/*===================================================================
	top
===================================================================*/
#main_image_wrap { position:relative; }
#main_image { padding-bottom:0; position:relative; }
#main_image .slick-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:0; align-items:center; justify-content:center; }
#main_image .slick-dots li { line-height:0; }
#main_image .slick-dots li button { width:30px; height:30px; background:none; border:0; padding:0; position:relative; }
#main_image .slick-dots li button::before { content:''; display:block; width:12px; height:12px; border-radius:12px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
#main_image .slick-dots li.slick-active button::before { background:var(--c-green); }

#main_image img { min-height:300px; object-fit:cover; }
#main_text { padding:0 max(20px, calc(50% - 590px)); position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; }
#main_text .title { margin-bottom:30px; }
#main_text .title .title_row { display:inline-block; background:var(--c-green); color:#fff; padding:8px 25px; border-radius:8px; font-size:2.75em; line-height:1.2; letter-spacing:0.05em; }
#main_text .title .title_row:not(:last-child) { margin-bottom:25px; }
#main_text .comment { font-size:1.5em; line-height:1.6; letter-spacing:0.05em; text-shadow:0 3px 2px rgba(0,0,0,.2); color:#fff; }
@media (max-width:991px) {
	#main_text .title .title_row { font-size:2em; }
	#main_text .comment { font-size:1.25em; }
}
@media (max-width:767px) {
	#main_text .title { margin-bottom:20px; }
	#main_text .title .title_row { font-size:1.5em; padding:5px 15px; }
	#main_text .title .title_row:not(:last-child) { margin-bottom:15px; }
	#main_text .comment { font-size:1.1em; letter-spacing:0; }
}
@media (max-width:575px) {
	#main_text .comment { font-size:1.05em; }
}


#about { position:relative; }
#about::before { content:''; display:block; width:105px; aspect-ratio:105 / 105; background:url(../image/top/deco1.svg) no-repeat center center / contain; position:absolute; top:0; right:0; transform:translate(20%, -30%); }
#about .about_title { text-align:center; margin-bottom:30px; }
#about .about_title .main { display:inline; font-size:2.75em; color:var(--c-black); background:linear-gradient(to top, transparent 0%, transparent 5%, var(--c-yellow) 5%, var(--c-yellow) 15%, transparent 40%, transparent 100%); line-height:1.2; letter-spacing:.05em; }
#about .about_title .main .strong { color:var(--c-green); font-size:1.2em; margin-left:.2em; margin-right:.2em; }
#about .about_wrap { display:grid; align-items:center; grid-template-columns:64% 1fr; gap:40px; margin-bottom:10px; }
#about .about_wrap .about_list ul { padding-bottom:75px; background:url(../image/top/about_arrow.svg) no-repeat bottom center / auto 60px; }
#about .about_wrap .about_list ul li { padding:20px; font-weight:bold; font-size:1.75em; padding-left:70px; background:#fff url(../image/icon/check.svg) no-repeat left 20px center / 34px auto; border-radius:70px; }
#about .about_wrap .about_list ul li:not(:last-child) { margin-bottom:20px; }
#about .about_wrap .image { border-radius:400px; overflow:hidden; box-shadow:10px 10px 0 #fff; }
#about .about_box { border:3px solid var(--c-orange); border-radius:25px; padding:40px; background:#fff; }
#about .about_box .comment { font-size:1.75em; color:var(--c-orange); line-height:1.4; padding-right:140px; position:relative;display:flex; align-items:center; min-height:97px; }
#about .about_box .comment::before { content:''; display:block; width:141px; aspect-ratio:141 / 97; background:url(../image/top/symbol.png) no-repeat center center / contain; position:absolute; top:50%; right:0; transform:translateY(-50%); }
@media (max-width:1200px) {
	#about .about_title .main { font-size:2.25em; }
	#about .about_box { padding:20px; }
	#about .about_box .comment { font-size:1.5em; }
}
@media (max-width:991px) {
	#about .about_title .main { font-size:1.75em; }
	#about .about_wrap { gap:20px; }
	#about .about_wrap .about_list ul li { font-size:1.5em; padding:10px; padding-left:50px; background-size:25px auto; background-position:left 15px center; }
	#about .about_box .comment { font-size:1.25em; padding-right:100px; }
	#about .about_box .comment::before { width:100px; }
}
@media (max-width:767px) {
	#about .about_title .main { font-size:1.5em; }
	#about .about_wrap { grid-template-columns:1fr; }
	#about .about_wrap .about_list { order:2; }
	#about .about_wrap .image_wrap { order:1; }
	#about .about_wrap .image_wrap .image { width:260px; max-width:100%; aspect-ratio:1/1; margin:0 auto; }
	#about .about_wrap .about_list ul li  { font-size:1.25em; }
}
@media (max-width:575px) {
	#about .about_box .comment { padding-right:0; padding-bottom:60px; }
	#about .about_box .comment::before { width:auto; height:60px; top:auto; bottom:0; right:0; transform:none; }
}

#reason .reason_list { display:grid; grid-template-columns:repeat(2, 1fr); gap:70px 40px; counter-reset:reason-unit; padding:0 30px; }
#reason .reason_list .reason_unit { counter-increment:reason-unit; }
#reason .reason_list .reason_unit .image img { border-radius:20px; overflow:hidden; }
#reason .reason_list .reason_unit .text { position:relative; }
#reason .reason_list .reason_unit .text::before { content:'0' counter(reason-unit); display:block; font-size:5em; line-height:1; color:var(--c-green); position:absolute; top:20px; right:30px; opacity:.1; font-weight:bold; font-family:"Aoboshi One", serif; font-weight:normal; font-style:normal; letter-spacing:-.03em; }
#reason .reason_list .reason_unit .text > * { position:relative; z-index:1; }
#reason .reason_list .reason_unit .text .title { font-size:2em; line-height:1.4; color:var(--c-green); padding-bottom:20px; border-bottom:1px solid #F3F3F3; margin-bottom:20px; }
#reason .reason_list .reason_unit .text .comment { font-size:1.1em; letter-spacing:.05em; font-weight:500; color:var(--c-gray); line-height:1.6; }
#reason .reason_list .reason_unit._large { grid-column:span 2; display:flex; background:#fff; border-radius:10px; margin-top:20px; }
#reason .reason_list .reason_unit._large .image { width:46%; }
#reason .reason_list .reason_unit._large .text { flex:1; padding:20px 40px; display:flex; flex-direction:column; justify-content:center; }
#reason .reason_list .reason_unit._large:nth-child(2n+1) { flex-direction:row; }
#reason .reason_list .reason_unit._large:nth-child(2n+1) .image { transform:translate(-30px, -25px); margin-right:-30px; }
#reason .reason_list .reason_unit._large:nth-child(2n) { flex-direction:row-reverse; }
#reason .reason_list .reason_unit._large:nth-child(2n) .image { transform:translate(30px, -25px); margin-left:-30px; }
#reason .reason_list .reason_unit:not(._large) { display:flex; flex-direction:column; }
#reason .reason_list .reason_unit:not(._large) .image { position:relative; z-index:1; width:calc(100% - 40px); margin:0 20px; }
#reason .reason_list .reason_unit:not(._large) .text { flex:1; background:#fff; padding:50px 30px 20px; margin-top:-30px; border-radius:10px; }
#reason .reason_list .reason_unit:not(._large) .text::before { top:30px; }
#reason .reason_list .reason_unit:not(._large) .text .comment { letter-spacing:0; font-size:1.05em; }
@media (max-width:1200px) {
	#reason .reason_list { padding:0 15px; gap:70px 20px; }
	#reason .reason_list .reason_unit .text::before { font-size:4em; }
	#reason .reason_list .reason_unit .text .title  { font-size:1.75em; }
	#reason .reason_list .reason_unit._large { margin-top:15px; }
	#reason .reason_list .reason_unit._large:nth-child(2n+1) .image { transform:translate(-15px, -15px); margin-right:-15px; }
	#reason .reason_list .reason_unit._large:nth-child(2n) .image { transform:translate(15px, -15px); margin-left:-15px; }
	#reason .reason_list .reason_unit._large .text { padding:20px; }
	#reason .reason_list .reason_unit:not(._large) .text { padding:50px 20px 20px; }
}
@media (max-width:991px) {
	#reason .reason_list { gap:40px 10px; }
	#reason .reason_list .reason_unit .text::before { font-size:3.5em; }
	#reason .reason_list .reason_unit .text .title  { font-size:1.5em; padding-bottom:15px; margin-bottom:15px; }
	#reason .reason_list .reason_unit .text .comment,
	#reason .reason_list .reason_unit:not(._large) .text .comment { letter-spacing:0; font-size:1em; }
}
@media (max-width:767px) {
	#reason .reason_list { grid-template-columns:1fr; padding:0; }
	#reason .reason_list .reason_unit { grid-column:span 1!important; display:flex; flex-direction:column!important; background:transparent!important; }
	#reason .reason_list .reason_unit .image { position:relative; z-index:1; width:calc(100% - 30px)!important; margin:0 15px!important; transform:none!important; }
	#reason .reason_list .reason_unit .text { flex:1; background:#fff; padding:50px 20px 20px!important; margin-top:-30px; border-radius:10px; }
	#reason .reason_list .reason_unit .text::before { top:40px!important; right:20px!important; font-size:3em!important; }
	#reason .reason_list .reason_unit .text .title  { font-size:1.25em; padding-bottom:10px; margin-bottom:10px; }
}

#works { position:relative; }
#works::before { content:''; display:block; width:115px; aspect-ratio:115 / 115; background:url(../image/top/deco2.svg) no-repeat center center / contain; position:absolute; top:0; left:0; transform:translate(-20%, -30%); }
#works .works_list { display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; margin-bottom:50px; }
#works .works_list .image img { border-radius:50%; overflow:hidden; aspect-ratio:1/1; object-fit:cover; }
#works .works_list .text { display:flex; align-items:center; justify-content:center; text-align:center; min-height:50px; margin-top:-25px; position:relative; z-index:2; width:100%; max-width:220px; margin-left:auto; margin-right:auto; padding:10px; color:var(--c-brown); text-align:center; font-size:1.5em; line-height:1.2; letter-spacing:.05em; position:relative; filter:drop-shadow(0 4px 4px rgba(0,0,0,.11)); }
#works .works_list .text::before { content:''; display:block; width:100%; height:100%; clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); background:var(--c-yellow-o); position:absolute; top:0; left:0; z-index:-1; }
#works .copy { font-size:2em; color:var(--c-green); text-align:center; letter-spacing:.05em; line-height:1.4; }
@media (max-width:991px) {
	#works .works_list .text { font-size:1.25em; min-height:40px; margin-top:-20px; }
}
@media (max-width:767px) {
	#works .works_list { grid-template-columns:repeat(3, 1fr); }
	#works .copy { font-size:1.5em; }
}
@media (max-width:575px) {
	#works .works_list { grid-template-columns:repeat(2, 1fr); }
}

#message .message_unit { display:flex; gap:40px; align-items:center; background:#fff; padding:40px; border-radius:20px; box-shadow:0 4px 4px rgba(0,0,0,.1); }
#message .message_unit .image { width:22%; }
#message .message_unit .image img { width:100%; border-radius:50%; overflow:hidden; aspect-ratio:1/1; object-fit:cover; }
#message .message_unit .text { flex:1; }
#message .message_unit .text .name { margin-bottom:30px; }
#message .message_unit .text .name > * { line-height:1.2; letter-spacing:.05em; color:var(--c-black); }
#message .message_unit .text .name .sub { font-size:1.25em; margin-bottom:15px; }
#message .message_unit .text .name .main { font-size:2em; }
#message .message_unit .text .comment { font-size:1.1em; letter-spacing:.05em; font-weight:500; color:var(--c-gray); line-height:1.6; }
@media (max-width:991px) {
	#message .message_unit { gap:30px 20px; padding:40px 20px; }
	#message .message_unit .text .comment { font-size:1em; letter-spacing:0; }
}
@media (max-width:767px) {
	#message .message_unit { flex-direction:column; }
	#message .message_unit .image { width:100%; max-width:240px; text-align:center; }
	#message .message_unit .text .name { text-align:center; }
	#message .message_unit .text .name > * { letter-spacing:0; }
	#message .message_unit .text .name .sub { font-size:1.1em; }
}

#thought { position:relative; background:#fff; overflow:hidden; }
#thought::before,
#thought::after { content:''; display:block; background:no-repeat center center / contain; position:absolute; max-width:100%; z-index:1; mix-blend-mode:multiply; }
#thought::before { background-image:url(../image/top/thought_bg1.jpg); top:0; right:0; background-position:top right; width:713px; aspect-ratio:713 / 627; }
#thought::after { background-image:url(../image/top/thought_bg2.jpg); bottom:0; left:0; background-position:bottom left; width:295px; aspect-ratio:295 / 414; }
#thought > * { position:relative; z-index:2; }
#thought .thought_head .hl_1 { position:relative; }
#thought .thought_head .hl_1::before { content:''; display:block; width:282px; aspect-ratio:282 / 181; background:url(../image/top/symbol.png) no-repeat center center / contain; position:absolute; top:10px; right:0; }
#thought .thought_head .hl_1,
#thought .thought_head .lead { text-align:left; }
#thought .thought_head .lead { font-weight:bold; line-height:1.8; }
#thought .thought_list { display:grid; grid-template-columns:repeat(3, 1fr); gap:25px; }
#thought .thought_list .thought_unit { display:flex; flex-direction:column; border-radius:8px; overflow:hidden; }
#thought .thought_list .thought_unit .image img { width:100%; aspect-ratio:375/201; object-fit:cover; }
#thought .thought_list .thought_unit .text { background:var(--c-yellow-o); padding:0 0 20px; text-align:center; flex:1; }
#thought .thought_list .thought_unit .text .icon { margin-top:-48px; padding-bottom:10px; }
#thought .thought_list .thought_unit .text .icon img { width:96px; height:auto; aspect-ratio:1/1; object-fit:contain; }
#thought .thought_list .thought_unit .text .title { font-size:1.5em; color:#4B4B4B; margin-bottom:10px; }
#thought .thought_list .thought_unit .text .comment { color:#4B4B4B; font-weight:500; }
@media (max-width:1200px) {
	#thought .thought_head .hl_1::before { width:240px; }
	#thought .thought_list { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:991px) {
	#thought .thought_head .hl_1::before { width:200px; }
}
@media (max-width:767px) {
	#thought .thought_list { grid-template-columns:repeat(1, 1fr); }
	#thought .thought_list .thought_unit { max-width:400px; margin-left:auto; margin-right:auto; }
	#thought .thought_list .thought_unit .text .icon { margin-top:-36px; }
	#thought .thought_list .thought_unit .text .icon img { width:72px; }
}
@media (max-width:575px) {
	#thought .thought_head .hl_1::before { width:100px; top:auto; bottom:-30px; }
}

#step .step_list { list-style:none; counter-reset:step-unit; }
#step .step_list li { counter-increment:step-unit; background:var(--c-yellow-o); padding:10px 30px; border-radius:10px; display:flex; align-items:center; gap:15px; box-shadow:0 4px 4px rgba(0,0,0,.05); position:relative; }
#step .step_list li::before { content:counter(step-unit); display:flex; align-items:center; justify-content:center; font-size:2em; line-height:1; color:#fff; background:var(--c-green); width:46px; height:46px; border-radius:46px; font-weight:bold; }
#step .step_list li:not(:last-child) { margin-bottom:60px; }
#step .step_list li:not(:last-child)::after { content:""; width:64px; height:24px; background:var(--c-yellow); display:block; position:absolute; bottom:-46px; left:50%; transform:translateX(-50%); clip-path:polygon(0 0, 100% 0, 50% 100%); }
#step .step_list li .main { flex:1; font-size:1.75em; letter-spacing:.05em; line-height:1.4; }
@media (max-width:991px) {
	#step .step_list li { padding:10px 20px; }
}
@media (max-width:767px) {
	#step .step_list li { padding:10px 15px; gap:8px; }
	#step .step_list li::before { width:32px; height:32px; font-size:1.5em; }
	#step .step_list li .main { font-size:1.25em; letter-spacing:0; }
}

#company .company_box { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px 40px; background:#fff; border-radius:8px; padding:15px; }
#company .company_box .map { position:relative; height:100%; border-radius:5px; overflow:hidden; }
#company .company_box .map iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
body.pc #company .company_box a:hover { text-decoration:underline; }
@media (max-width:991px) {
	#company .company_box { grid-template-columns:1fr; }
	#company .company_box .map { aspect-ratio:16/9; }
}