@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@700&display=swap');

.we-dea br.sp { display:none; }
.we-dea { overflow:hidden; }
.we-dea img { max-width:100%; }
.we-dea .nav { position:fixed; left:50%; top:144px; transform:translateX(-50%); z-index:10; }
.we-dea .nav ul { display:flex; flex-wrap:nowrap; max-width:890px; min-width:720px; }
.we-dea .nav ul li { width:calc(264 / 890 * 100%); margin-right:calc(49 / 890 * 100%); }
.we-dea .nav ul li:last-child { margin-right:0; }
.we-dea .nav ul li a { display:block; background:#fff; }
.we-dea .nav ul li img { transition:opacity 0.3s ease-in-out; }
.we-dea .nav ul li a:hover img { opacity:0.5; }
.we-dea .main-visual { position: relative; width: 100%; height:calc(100vh - 89px); overflow:hidden; min-height:700px; background-size:cover;  }
.we-dea .main-visual .video-wrapper { position: absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; background:#000; }
.we-dea .main-visual .video-wrapper video { transition-duration: 1s; transition-property:opacity; opacity:1; }
.we-dea .main-visual .video-wrapper video.standby { opacity:0; }
.we-dea .main-visual > .title { position:absolute; left:50%; top:calc(50% + 40px); transform:translate(-50%,-50%); max-width:976px; min-width:720px; }
.we-dea .about { text-align:center; padding-top:100px; position:relative; background:#e2e4e8; }
.we-dea .about .about-first { position:relative; overflow:hidden; padding-bottom:295px; }
.we-dea .about .text { display:inline-block; text-align:left; position:relative; z-index:1; }
.we-dea .about p { font-size:18px; font-weight:700; font-family: 'Zen Kaku Gothic New', sans-serif; line-height:220%; margin-bottom:1.5em; }
.we-dea .about p strong { font-size:25px; }
.we-dea .about p strong span { letter-spacing:2px; }
.we-dea .about .video { position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:0; }
.we-dea .about .video video { display:block; }
.we-dea .about .video img { display:block; width:1920px; max-width:none; }
.we-dea .about .about-second { background:#e2e4e8; margin-top:-1px; position:relative; z-index:2; }
.we-dea .about .youtube { padding:100px 0; }
.we-dea .about .youtube iframe { width:1000px; max-width:100%; height:563px; }
.we-dea .about .about-third { background:#ea90af; padding:100px 0 70px; }
.we-dea .about .figure { max-width:1164px; min-width:720px; margin:0 auto; }
.we-dea .howtouse { background:#e1e4e6; padding-top:100px; padding-bottom:50px; }
.we-dea .howtouse .title { width:300px; margin:0 auto 18px; }
.we-dea .howtouse .process { max-width:924px; min-width:720px; margin:0 auto; }
.we-dea .howtouse .process li { }



@media screen and (max-width: 767px) {
.we-dea br.sp { display:block; }
.we-dea br.pc { display:none; }
.we-dea .nav ul { min-width:350px; }
.we-dea .main-visual > .title { top:calc(50% - 60px); min-width:350px; }
.we-dea .main-visual .video-wrapper video { object-fit:cover; width:100%!important; height:100%!important; }
.we-dea .about { padding-top:50px; }
.we-dea .about .text { margin:0 20px; }
.we-dea .about p { font-size:15px; }
.we-dea .about p strong { font-size:18px; }
.we-dea .about .about-first { padding-bottom:150px; }
.we-dea .about .video { width:1000px; }
.we-dea .about .video video { width:100%; }
.we-dea .about .video img { width:100%; }
.we-dea .about .youtube { padding:50px 0; }
.we-dea .about .about-third { padding-top:50px; }
.we-dea .about .figure { min-width:0; margin:0 20px; }
.we-dea .howtouse { padding-top:50px; }
.we-dea .howtouse .title { width:200px; }
.we-dea .howtouse .process { min-width:0; }

}