@charset "utf-8";
/*----------------
main
-----------------*/
#top section h2{ padding:0 0 44px; font-size:15px; color:#A8A897; display:block; text-align:center; }
#top section h2::before{ color:#000; content:attr(data-en)""; font-size:30px; text-align:center; display:block; padding:0 0 10px; }

#top .loading{ position:fixed; top:0; left:0; z-index:9999; width:100%; height:100vh; background:#fff; }
#top .image-wrap{ width:100%; }
#top .image-wrap img { width:100%; height:auto; }
#top .loading .loading-animation{ width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; }
#top .loading .loading_img{ animation:blur-anim 6s linear forwards 1s; width:80px; flex-shrink:0; }
#top .loading .loading_bg{ animation:change-color-loading-after 6s linear forwards 1s; position:absolute; top:0; left:0; width:100%; height:100vh; }

#top .pc{ display:block; }
#top .sp{ display:none; }

@keyframes change-color-loading-after {
	0%{
        background:rgba(255,255,255,1);
		filter: blur(0.5rem);
		opacity:1;
	}
	50%{
        background:rgba(51,51,51,1);
		filter: blur(0.5rem);
		opacity:1;
	}
	60%{
        background:rgba(51,51,51,1);
		filter: blur(0.5rem);
		opacity:1;
	}
	70%{
		background:url("../img/top/mv_back.jpg") no-repeat top left / cover;
		filter: blur(0.5rem);
		opacity:1;
	}

	100%{
        background:url("../img/top/mv_back.jpg") no-repeat top left / cover;
		filter: blur(0);
		opacity:1;
	}
}
@keyframes blur-anim{
	0%{
		filter: blur(1rem);
	}
	50%{
		filter: blur(0);
	}
	55%{
		filter: blur(0);
	}
	100%{
		filter: blur(0);
	}
}

#top .mv{ background:#333; width:100%; padding-bottom:50px; margin-top:100px; position:relative; overflow:hidden; }
#top .mv h2{ text-align:center; font-size:30px; color:#fff; margin:30px 0; position:relative; display:flex; align-items:center; justify-content:center; gap:15px; }
#top .mv h2::before{ content:"≪"; color:#777; }
#top .mv h2::after{ content:"≫"; color:#777; }
#top .mv .slide_after + .slick-slide .slide .slide_img_inner img{ opacity:0; }
#top .mv .mv_txt{ display:grid; place-items:center; align-content: center; height:100%; }
#top .mv .mv_txt_inner{ width:80px; }
#top .mv .scroll{ color:#fff; font-size:14px; position:absolute; width:62px; bottom:120px; right:0; left:0; margin:auto; }
#top .mv .scroll::after{ content:""; position: absolute; left: 0; right: 0; width: 1px; height: 30px; margin: auto; background: #fff; animation: scroll 1.4s ease-in-out infinite; opacity: 0; }
#top .slide{ padding:0 0 40px; margin:0 20px 40px; display:block !important; position:relative; top:50px; }
/*#top .slide::before{ content:""; width:30%; height:100%; position:absolute; z-index:1; background:#333; }*/
#top .slick-center .slide{ top:0; }
#top .slide .slide_img_inner{ width:100%; overflow:hidden; position:relative;}
#top .slide .slide_img_inner::before{ content:""; display:block; padding-top:64%; }
#top .slide .slide_img_inner img{ position:absolute; top:0; right:0; left:0; transform:scale(.8); transition:all .3s; opacity:0.5; }
#top .slide_after .slide .slide_img_inner img{ opacity:0; }
#top .slick-active .slide .slide_img_inner img{ opacity:1; }
#top .slide .plan_detail{ width:min(500px,90%); padding:25px 0 20px; background:#FCF6E7; border-bottom:5px solid #A8A897; box-sizing:border-box; position:absolute; left:-25px; bottom:0; opacity:0; transition:all 0.4s; display:block; }
#top .slick-center .slide .plan_detail{ animation:fadeIn 1s linear 0.5s 1 normal forwards; }
#top .slick-center .slide .plan_detail::after{ content:""; background:url(../img/top/click.png) no-repeat center / 100%; width:70px; height:70px; position:absolute; right:0; bottom:-5px; z-index:1; }
#top .slide .plan_category{ font-size:14px; font-weight:500; text-align:center; color:#fff; background:#000; width:min(365px,90%); margin:0 auto 5px; padding:3px 0; overflow:hidden; position:relative; }
#top .slide .plan_category::before{ background:#FCF6E7; content:''; inset:0; pointer-events:none; position:absolute; z-index:1; }
#top .slick-center .slide .plan_category::before{ animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards; }
#top .slide .plan_category span{ display:block; width:100%; }
#top .slide .plan_shop{ width:min(365px,90%); margin:10px auto 0; display:flex; align-items:center; justify-content:flex-start; gap:20px; overflow:hidden; position:relative; }
#top .slide .plan_shop::before{ background:#FCF6E7; content:''; inset:0; pointer-events:none; position:absolute; z-index:1; }
#top .slick-center .slide .plan_shop::before{ animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) 3s forwards; }
#top .slide .plan_shop div{ width:100px; max-height:55px; flex-shrink:0; position:relative; }
#top .slide .plan_shop p{ font-size:16px; line-height:24px; font-weight:500; }
#top .thumbnail{ width:min(765px,82%); margin:0 auto; z-index:3; }
#top .thumbslide{ width:calc(100% - 10px) !important; margin:0 5px; }
#top .thumbslide div{ width:100%; height:60px; position:relative; }
#top .thumbslide div img{ position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }
#top .slick-center .slide .slide_img_inner img{ transform: scale(1); }
#top .fixbtn{ position:fixed; bottom:55px; right:130px; z-index:3; animation: updown 3s linear 3s infinite; filter: drop-shadow(0 10px 6px rgba(0,0,0,0.16)); opacity:0; visibility:hidden; transition:all 0.4s; }
#top .fixbtn.active_btn{ opacity:1; visibility:visible; }

#top .ttl_h h1{ font-size: 12px; text-align: center; padding-top: 10px; background: #F8F8F7; }

#top .information{ padding:100px 0 80px; background:#F8F8F7; }
#top .information .section_inner{ max-width:1000px; margin:0 auto; width:90%; }
#top .information .section_inner > div{ width:250px; margin:70px auto 0; overflow:hidden; }
#top .information .section_inner > div a{ text-align: center; padding:15px 0; display:block; position:relative; overflow:hidden; border-radius:50px; border:1px solid #808080; will-change: transform; }
#top .information .section_inner > div a::before { transition:1s all; content: ''; position: absolute; border-radius:50px; top: 0; left: 0; z-index: -1; background:#A8A897; width: 100%; height: 100%; transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; }
#top .information .section_inner > div a:hover{ color:#fff; transition:1s all; }
#top .information .section_inner > div a:hover:before{ transform-origin:left top; transform:scale(1, 1); }
#top .information .section_inner > div a span{ position:relative; z-index:2; width:185px; display:block; margin:0 auto; text-align:left; background:url("../img/top/link_arrow.svg"); background-size:20px; background-position:right center; background-repeat:no-repeat; color:#808080; }
#top .information .section_inner > div a:hover span{ color:#fff; background:url("../img/top/link_arrow_white.svg"); background-size:20px; background-position:right center; background-repeat:no-repeat; }
#top .information ul li{ padding:28px 0; border-bottom:1px solid #8E8E8E; padding-left:150px; }
#top .information ul li:first-of-type{ border-top:1px solid #8E8E8E; }
#top .information ul li a{ display:flex; align-items:center; flex-wrap: wrap; padding-right:35px; }
#top .information ul li span{ display:block; }
#top .information ul li .category{ color:#fff; font-size:13px; background:#A8A897; width:100px; text-align:center; margin:0 30px 0 50px; padding:3px 0; border-radius:13px; }

#top .work{ padding:150px 0 0; }
#top .work .section_inner .img_ttl{ max-width:340px; width:80%; margin:0 auto; }
#top .work .work_txt{ line-height:30px; text-align:center; margin:47px 0 0; }
#top .work .work_mv{ background-image:url("../img/top/work.png"); background-repeat:no-repeat; background-size:contain; background-position:center; margin:70px 0 60px; padding:38px 0 0; }
#top .work .work_mv div{ width:150px; margin:0 auto; }
#top .work .work_list > div{ padding-top:100px; display:flex; align-items:center; background: rgb(230,230,221);
background: linear-gradient(0deg, rgba(230,230,221,1) 0%, rgba(255,255,255,1) 100%); }
#top .work .work_list > div:first-of-type{ padding-top:0; }
#top .work .work_list > div .work_text{ width:49%; }
#top .work .work_list > div .work_img{ width:51%; }
#top .work .work_text h3{ font-size:30px; line-height:50px; width:100%; }
#top .work .work_list h3::before{ font-size:40px; line-height:50px; border-bottom:5px solid #333; padding-bottom:6px; }
#top .work .work_list > div:nth-of-type(1) h3::before{ content:"01"; }
#top .work .work_list > div:nth-of-type(2) h3::before{ content:"02"; }
#top .work .work_list > div:nth-of-type(3) h3::before{ content:"03"; }
#top .work .work_list h3 span{ display:block; margin:21px 0 14px; line-height:45px; }
#top .work .work_list div:nth-child(odd) .work_text{ margin-left:75px; display:flex; justify-content:flex-start; }
#top .work .work_list div:nth-child(even) .work_text{ margin-right:75px; display:flex; justify-content:flex-end; }
#top .work .work_text a{ width:300px; height:60px; background:#fff; display:flex; justify-content:center; align-items:center; box-shadow:0 4px 6px rgba(0,0,0,0.16); position:relative; }
#top .work .work_text a::before{ content:""; position: absolute; top: 0; left: 0; z-index: 2; background:#333; width:100%; height: 100%; transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; }

#top .work .work_text a:hover::before{ transform-origin:left top; transform:scale(1, 1); }
#top .work .work_text a:hover span{ color:#fff; }
#top .work .work_text a svg{ width:50px; margin-left:13px; position:relative; z-index:2; }
#top .work .work_text a svg path{ stroke:#707070; }
#top .work .work_text a:hover svg path{ stroke:#fff; }
#top .work .work_text a span{ position:relative; z-index:2; }
#top .work .work_text p{ margin-bottom:40px; }

#top .flow{ background-image:url("../img/top/flow_back.png"); background-size:cover; background-position: center; background-repeat: no-repeat; }
#top .flow .section_inner{ padding:120px 0 160px; max-width:1000px; width:90%; margin:0 auto; }
#top .flow h2{ display: flex; align-items: center; justify-content: flex-end; flex-direction: row-reverse; color:#333; }
#top .flow h2::before{ content:none; }
#top .flow h2::after{ content:attr(data-en); color:#000; font-size:30px; }
#top .flow h2 img{ max-width:85px; margin:0 15px; }

.flow .flex .column { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; width: 100%; box-shadow:0 0 7px rgb(0,0,0,.16); box-sizing: border-box; margin-top: 60px; position: relative; border-radius: 15px; display: flex; justify-content: space-between; align-items: center; padding: 25px 0; }
.flow .flex .column::before { content: ""; width: 1px; height: calc(100% - 50px); background: #fff; position: absolute; left: 324px; }
.flow .flex .column::after { content: ""; position: absolute; width: 15%; height: 18px; margin: auto; -webkit-mask: url(../img/top/arrow-right.svg) no-repeat center; mask: url(../img/top/arrow-right.svg) no-repeat center; -webkit-mask-size: 9px auto; mask-size: 9px auto; background: #333; transform: rotate(90deg); right: 0; left: 0;  bottom: -40px; }
.flow .flex .column:nth-of-type(1) { background:rgba(168,168,151,.3); order: 1; }
.flow .flex .column:nth-of-type(2) { background:rgba(168,168,151,.4); order: 2; }
.flow .flex .column:nth-of-type(3) { background:rgba(168,168,151,.5); order: 3; }
.flow .flex .column:nth-of-type(4) { background:rgba(168,168,151,.6); order: 6; }
.flow .flex .column:nth-of-type(5) { background:rgba(168,168,151,.7); order: 5; }
.flow .flex .column:nth-of-type(6) { background:rgba(168,168,151,.8); order: 4; }
.flow .flex .column:nth-of-type(6)::after { display: none; }
.flow .flex .column h3 { font-size:18px; line-height:21px; width: 325px; padding-left: 85px; box-sizing: border-box; font-weight: 700; }
.flow .flex .column h3::after { content:attr(data-day); width: 100%; margin: 0 auto auto 0; display: block; font-size: 12px; }
.flow .flex .column ul { font-size: 14px; line-height: 27px; font-weight: 500; width: calc(100% - 325px); box-sizing: border-box; padding: 0 40px; }
.flow .flex .column ul li::before { content: "・"; }
.flow .flex .column ul li { text-indent: -1em; margin-left: 1em; }

#top .recruit{ background-image:url("../img/top/recruit_back.png"); background-size:cover; background-position: center; background-repeat: no-repeat; max-height:348px; padding:150px 0; }
#top .recruit .section_inner{ max-width:1000px; margin:0 auto; position:relative; overflow:hidden; }
#top .recruit .section_inner a{ position:relative; display:block; overflow:hidden; }
#top .recruit .section_inner a img{ transition:0.5s all; }
#top .recruit .section_inner a:hover img{ transform:scale(1.2,1.2); transition:0.5s all; }
#top .recruit .recruit_txt{ position: absolute; display: inline-flex; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; align-items: center; justify-content: center; flex-direction: column; margin: 25px; border: 1px solid #E1C053; }
#top .recruit .recruit_txt h2{ color:#fff; }
#top .recruit .recruit_txt h2:before{ content:"RECRUIT"; color:#fff; }
#top .recruit .recruit_txt h2 span:before{ content:""; background:#fff; width:46px; height:5px; display:block; margin:10px auto 20px; }
#top .recruit .recruit_txt p{ color:#fff; position: relative; z-index: 2; width:250px; display: block; margin: 0 auto; text-align: left; border:1px solid #fff; border-radius:50px; padding:17px 0 15px; }
#top .recruit .recruit_txt p span{ background: url(../img/top/link_arrow_white.svg); background-size: 20px; background-position: right center; background-repeat: no-repeat; display:block; width:150px; margin:0 auto; }

@keyframes scroll{
	0%{ height:0; top:20px; opacity: 0; }
	30%{ height:50px; opacity:1; }
	100%{ height:0; top:70px; opacity:0; }
}
@keyframes updown {
	0%, 100%{ transform: translateY(0); }
	50%{ transform: translateY(-10px); }
}
@keyframes fadeIn {
	0%{ opacity:0; transform:translateY(-20px); }
	100%{ opacity:1; transform:translateY(0); }
}
@keyframes img-wrap {
	100% { transform:translateX(100%); }
}

@media screen and (min-width:769px){
	#top .mv h2{ line-height:1; width:30%; height:100%; margin:0; padding:80px 0 0 0; align-items:flex-start; position:absolute; z-index:0; box-sizing:border-box; }
	#top .mv h2::before,#top .mv h2::after{ content:none; }
	#top .mv h2 > span{ width:75%; border-left:4px solid #fff; padding:10px 0 10px 10px; display:flex; flex-direction:column; gap:10px; }
	#top .mv h2 > span span:first-of-type{ text-align:left; }
	#top .mv h2 > span span:last-of-type{ text-align:right; }

	#top .slide .plan_detail{ width:60%; padding:15px 0; left:-70%; bottom:unset; top:47%; }
	#top .slide .plan_category{ margin:0 auto; }
	#top .slide .plan_shop{ margin:5px auto 0; }
	#top .slide .plan_shop div{ width:80px; }
	#top .slide .plan_shop p{ line-height:20px; }
	#top .slick-center .slide .plan_detail::after{ width:50px; height:50px; }
}

@media (min-width: 768px) and (max-width: 1400px){
	#top .mv{ margin-top:85px; }
	#top .mv h2{ font-size:21px; margin:5px 0 20px; }

	#top .slide{ padding:0 0 30px; margin:0 20px 25px; }
	#top .slide .plan_category{ font-size:12px; }
	#top .slide .plan_detail{ width:70%; padding:15px 0 10px; left:-84%; bottom:unset; top:62%; }
	#top .slick-center .slide .plan_detail::after{ width:45px; height:45px; }
	#top .slide .plan_shop{ width:75%; margin:5px 20% 0 5%; }
	#top .slide .plan_shop div{ width:80px; max-height:44px; }
	#top .slide .plan_shop p{ font-size:12px; line-height:16px; }
}
/*タブレット横*/
@media screen and (max-width:1024px) {
	#top .mv .fixbtn{ bottom:0; right:25px; width:120px; }
	
	#top .information ul li .news{ margin-top:10px; }
	
	#top .work .work_text h3{ font-size:25px; line-height:40px; }
	#top .work .work_list h3::before{ font-size:25px; line-height:40px; padding-bottom:2px; border-bottom:4px solid #333; }
	#top .work .work_list h3 span{ margin:10px 0 5px; }
	#top .work .work_list > div{ padding-top:50px; }
	#top .work .work_text p{ font-size:11px; line-height:21px; margin-bottom:20px; }
	#top .work .work_text a{ height:45px; }
}
/*ipad air たて*/
@media screen and (width:834px){
}
@media screen and (width:820px){
	#top .mv h2{ padding:0; font-size:18px; line-height:14px; }
	#top .slide .plan_detail{ width:80%; top:40%; left:-88%; }
	#top .slide .plan_shop div{ width:60px; }
	#top .slide .plan_shop p{ font-size:11px; line-height:14px; }
}

/*タブレット縦-スマホ*/
@media screen and (max-width:768px) {
	#top .pc{ display:none; }
	#top .sp{ display:block; }

	#top section h2{ letter-spacing:0.05em; }

	#top .fixbtn{ width:100%; left:0; bottom:0; animation:none; }

	#top .mv{ margin-top:80px; }
	#top .mv h2{ font-size:18px; }
	#top .mv h2::before{ width:17px; height:12px; }
	#top .mv h2::after{ width:17px; height:12px; }
	#top .mv .scroll{ display:none; }
	#top .mv .fixbtn{ animation:none; position:absolute; left:0; bottom:0; width:100%; filter: none; }

	#top .slide{ padding:0; margin:0; position:relative; top:0; }
	#top .slide .slide_img_inner{ padding-bottom:220px; overflow:auto; }
	#top .slide .slide_img_inner::before{ padding-top:0; }
	#top .slide .slide_img_inner picture{ width:100%; height:340px; display:block; }
	#top .slide .slide_img_inner img{ height:100%; width:auto; position:relative; }
	#top .slide_after .slide .slide_img_inner img{ opacity:0.5; }
	#top .slide .plan_detail{ right:0; left:0; width:100%; margin:0 auto; }
	#top .slick-center .slide .plan_detail::after{ width:50px; height:50px; }
	#top .slide .plan_shop{ gap:10px; }
	#top .slide .plan_shop div{ width:70px; max-height:44px; }
	#top .slide .plan_shop p{ font-size:13px; line-height:17px; }

	#top .thumbnail{ position:absolute; bottom:195px; right:0; left:0; }
	
	#top .information ul li{ padding:19px 0 17px; }
	#top .information ul li span{ font-size:14px; }
	#top .information ul li .category{ margin:0 0 0 15px; font-size:13px; }
	#top .information ul li .news{ margin-top:10px; width:100%; }
	#top .information .section_inner > a{ margin:50px auto 0; }
	
	#top .work .work_mv{ background-image:url("../img/top/sp_work.png"); background-repeat:no-repeat; background-size:contain; background-position:center; margin-bottom:60px; }
	#top .work .work_list h3::before{ font-size:40px; line-height:30px; }
	#top .work .work_list h3 span{ margin:22px 0 14px; font-size:30px; line-height:45px; }
	#top .work .work_list > div{ flex-direction: column; padding-top:0; }
	#top .work .work_list > div:nth-child(even){ flex-direction: column-reverse; }
	#top .work .work_list > div .work_img{ width:100%; }
	#top .work .work_list > div .work_text{ width:90%; padding:50px 0 70px; justify-content:center; }
	#top .work .work_list div:nth-child(odd) .work_text,#top .work .work_list div:nth-child(even) .work_text{ justify-content: center; margin:0; }
	#top .work .work_text p{ font-size:13px; line-height:22px; margin-bottom:40px; }
	#top .work .work_text a{ margin:0 auto; }
	
	#top .flow h2{ flex-direction:column-reverse; padding-bottom:30px; }
	#top .flow h2 img{ transform:rotate(90deg); transform-origin:center; display:block; height: 1px; padding:50px 0; width:85px; margin:20px 0; }
	#top .flow .section_inner{ padding:132px 0 150px; }

	.flow .flex .column { display: block; max-width: 550px; width: 100%; padding: 0 20px 20px 20px; min-height: auto; margin: 25px auto 0 auto; }
	.flow .flex .column::before { display: none; }
	.flow .flex .column::after{ bottom: -22px; }
	.flow .flex .column h3 { font-size: 16px; width: 100%; display: block; padding: 0; border-bottom: 1px solid #fff; text-align: center; padding: 15px 0 15px 0; }
	.flow .flex .column h3 .sp { display: inline; }
	.flow .flex .column ul { width: 100%; padding: 0; margin-top: 20px; font-size: 14px; }


	#top .recruit{ padding:100px 0; max-height:none; }
	#top .recruit .section_inner{ width:90%; margin:0 auto; }
}