html, body{height:100%;-webkit-text-size-adjust:100%;}
body{font-family: 'Centrale', "Noto Sans JP", sans-serif;margin:0;padding:0;background:#fff;color:#231F20;line-break:strict;}
a,a:hover,a:active,a:focus,a:visited,a:link,object,embed{outline:none;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
.clear{clear:both;}
a{color:#000;}
a:hover{color:#62b300;}
h1{font-size:30px;}

header{width:calc(100% - 5px);max-width:1840px;height:50px;margin-left:auto;margin-right:auto;padding:20px 0 20px 5px;position:relative;color:#000;}
.header-logo{display:block;background:url(https://cdn.cedarleafmedia.co.jp/img/header-logo-bk.svg) 0 0 no-repeat;background-size:contain;width:230px;margin-top:-10px;height:72px;}
nav{position:absolute;top:30px;right:0;}
nav li{display:inline-block;margin-left:2vw;}
nav li a{font-size:1.35vw;font-weight:bold;text-transform:uppercase;}
.lang{margin-left:2vw;margin-right:5px;}
.lang a{color:#355F2E;font-weight:normal;font-size:1.354vw;}
.lang a.on{border-bottom:solid 3px #355F2E;}
.mobile-menu{display:none;}
.activepage{border-bottom:solid 3px black;}

.stage{width:100%;max-width:1920px;margin:0 auto;flex:1 0 auto;}
.flex-box,.flex-box-rev{margin-left:auto;margin-right:auto;padding:0 10%;display:flex;flex-direction:row;flex-wrap:wrap;}

.home{background:url(https://cdn.cedarleafmedia.co.jp/img/home-poster.jpg) 0 0/cover no-repeat;width:100%;padding-top:41.84%;position:relative;}
.home video{position:absolute;width:100%;height:100%;left:0;top:0;}
.lottie-logo{position:absolute;width:100%;height:100%;left:0;top:0;}

.section{margin-top:50px;}

.about .flex-box{flex-direction:row-reverse;}
.about h1{font-weight:bold;text-transform:uppercase;width:14%;margin:0;border-left:solid 4px #231F20;padding:0 3%;align-content:center;}
.about-text{font-size:15px;font-weight:300;width:calc(74% - 4px);padding:0 3%;}
.about-text p{margin:0;padding:10px 0;}

.services{background:#EAEAE9;padding:5% 0 20px 0;}
.services .flex-box{padding-left:4%;}
.services h1{font-weight:bold;text-transform:uppercase;width:17%;margin:0;border-right:solid 4px #231F20;padding:0 3% 0 0;text-align:right;align-content:center;direction:rtl;}
.service-list{width:calc(74% - 4px);padding:0 3%;}
.service{font-size:24px;font-weight:500;border-bottom:solid 2px #231F20;margin-bottom:13.75px;padding-bottom:13.75px;cursor:pointer;position:relative;text-transform:uppercase;}
.service-detail{font-size:15px;font-weight:normal;margin:10px;line-height:25px;display:none;text-transform:none;}

.pm-button{width:34.4px;height:34.4px;border:0;font-size:1.5em;position:absolute;top:0;right:0;}
.pm-button span{position:absolute;transition:300ms;background:black;border-radius:2px;}
.pm-button span:first-child{top:27%;bottom:27%;width:6%;left:48%;}
.pm-button span:last-child{left:27%;right:27%;height:6%;top:48%;}
.pm-button.open span{transform:rotate(-90deg);}
.pm-button.open span:last-child{left:50%;right:50%;}

.more{display:block;width:23%;font-size:15px;font-weight:300;text-transform:uppercase;border:solid 2px #231F20;text-align:center;padding:10px 0;margin-left:calc(48.5% + 3px);margin-top:3%;}
.more:hover{background:#c7c7c7;color:#000;}

.reel{width:82%;max-width:1500px;margin:0 auto;}
.reel video{width:100%;height:56.25%;border:solid 1px #707070;cursor:pointer;}

.projects h1{font-weight:bold;text-transform:uppercase;border-bottom:solid 4px #231F20;text-align:right;width:95%;margin:0 5% 1% 0;line-height:55px;}
.projects .flex-box{padding:0;}
.project{cursor:pointer;width:100%;padding-top:26.1458%;position:relative;margin-bottom:20px;}
.project-title{font-size:2.344vw;font-weight:bold;text-decoration:underline;position:absolute;top:50%;color:white;font-style:italic;}

.contact{margin:80px 0 40px 0;background:#231F20;color:#fff;}
.logo{width:62%;background:url(https://cdn.cedarleafmedia.co.jp/img/footer-logo.svg) center 50%/contain no-repeat;margin:7% 0;}
.contact-info{width:38%;font-size:12.4px;font-weight:300;}
.contact-info h1{font-weight:bold;text-transform:uppercase;}
.company{font-size:15px;padding:0 10px;text-transform:uppercase;}
.contact-info p{padding:6.9px;}
.contact-info a{color:#fff;}
.contact-info a:hover{color:#62b300;}
.contact-info a img{margin:0 6.9px 13.75px 6.9px;}

.blur{filter:brightness(50%) blur(10px);-webkit-filter:blur(5px);height:100%;}
.fuzz{width:100%;height:100%;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.5);display:none;}
.modal{background:#fff;box-shadow:-4px 4px 12px 4px rgba(0, 0, 0, 0.3);width:90vw;max-width:1728px;padding:min(2vw, 38.4px);position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);display:none;}

.project-img{width:60%;padding-top:33.75%;display:inline-block;}
.project-info{width:37%;padding:0 1.5%;display:inline-block;vertical-align:top;}
.modal h2{font-size:24px;font-style:italic;margin:0 0 1.5% 0;}
.links a{display:block;color:#107FB7;text-decoration:underline;font-weight:bold;}
.thumbs{margin:2% 0 0 0;}
.thumbs div{width:240px;height:135px;display:inline-block;margin-right:0.5%;cursor:pointer;}

.close{position:absolute;right:10px;top:10px;width:32px;height:32px;cursor:pointer;}
.close:before,.close:after{position:absolute;left:15px;content:' ';height:33px;width:2px;background-color:#000;}
.close:before{transform:rotate(45deg);}.close:after{transform:rotate(-45deg);}
.close:hover::before,.close:hover::after{background-color:#62b300;}

.ourworks{text-align:center;text-transform:uppercase;}
.work{display:inline-block;width:32%;margin:0.666%;padding-top:18%;text-align:center;cursor:pointer;background-position:center 0;background-repeat:no-repeat;background-size:100%;transition:all 200ms;}
.work:hover{background-size:105%;}
.work-title{font-size:14px;font-weight:bold;padding:1% 0;text-transform:uppercase;background:#fff;}
.work-type{font-size:12px;font-weight:300;background:#fff;}
.grid3-2{display:flex;flex-wrap:wrap;}

.approach{background:url(https://cdn.cedarleafmedia.co.jp/img/service-bg.jpg) right top/60% no-repeat;margin:40px 5%;max-width:1344px;}
.approach h1{text-transform:uppercase;width:27%;margin:0 0 0 12%;padding:0.5% 0;text-align:right;font-size:3.333vw;}
.approach div{background:#EAEAE9;width:41%;padding:1% 3% 5% 3%;font-size:1.333vw;text-align:justify;}

.service-details{padding:0 15% 0 20%;}
.service-details h2{display:inline;text-transform:uppercase;list-style:square;background:url(https://cdn.cedarleafmedia.co.jp/img/square.svg) 0 center/18px no-repeat;padding-left:35px;font-size:35px;margin:0;}
.service-details h2 img{height:44px;vertical-align:bottom;display:inline-block;margin-left:1%;}
.service-details p{margin:0 0 0 38px;padding:6px 0;}
.sideline-box{padding-bottom:38px;position:relative;}
.sideline-box p:last-child{margin-bottom:0;}
.sideline{position:absolute;width:3px;top:24px;bottom:-24px;left:8px;background:#000;}

.equipment{padding:5% 5% 0 5%;}
.equipment .thumbs{margin-top:0.5%;}
.equipment .thumbs div{width:19.6%;height:auto;padding-top:11.025%;}
.equipment .thumbs div:last-child{margin-right:0;}
.equipment h1{text-transform:uppercase;margin-top:0;}
.equipment .description{font-size:20px;line-height:28px;}
.equipment p{margin-bottom:0;}
.equipment ul{font-weight:500;margin-left:3%;}
.equip-media{width:60%;display:inline-block;}
.equip-img{padding-top:56.25%;}
.equip-info{width:37%;padding:0 1.5%;display:inline-block;vertical-align:top;}
.equipment .more{margin-left:auto;margin-right:auto;}

@media screen and (min-width:1320px){
    header{width:calc(100% - 80px);padding-left:80px;}
    nav li{margin-left:50px;}
    nav li a{font-size:20px;}
    .lang{margin-left:100px;}
    .lang a{font-size:18px;}
    .about-text{font-size:1.146vw;}
    h1{font-size:2.604vw;}
    .service{font-size:1.823vw;margin-bottom:1.042vw;padding-bottom:1.042vw;}
    .service-detail{font-size:15px;}
    .pm-button{width:2.604vw;height:2.604vw;}
    .more{font-size:1.042vw;}
    .projects h1{line-height:4.167vw;}
    .project-title{font-size:2.344vw;}
    .company{font-size:1.146vw;}
    .contact-info{font-size:0.938vw;}
    .contact-info p{padding:0.521vw;}
    .contact-info a img{margin:0 0.521vw 1.042vw 0.521vw;}
    .modal h2{font-size:1.823vw;}
    .work-title{font-size:0.938vw;}
    .work-type{font-size:0.833vw;}
}

@media screen and (min-width:1500px){
    .approach{margin:40px auto;}
    .approach h1{font-size:50px;}
    .approach div{font-size:20px;}
}

@media screen and (min-width:1920px){
    h1{font-size:50px;}
    .about-text{font-size:22px;}
    .service{font-size:35px;margin-bottom:20px;padding-bottom:20px;}
    .service-detail{font-size:18px;}
    .pm-button{width:50px;height:50px;}
    .more{font-size:20px;}
    .projects h1{line-height:80px;}
    .project-title{font-size:45px;}
    .company{font-size:22px;padding:0 10px;}
    .contact-info{font-size:18px;}
    .contact-info p{padding:10px;}
    .contact-info a img{margin:0 10px 20px 10px;}
    .modal h2{font-size:35px;}
    .work-title{font-size:18px;}
    .work-type{font-size:16px;}
}

@media(max-width:1000px){
    .modal{top:3vw;right:3vw;bottom:3vw;left:3vw;width:auto;transform:none;overflow-y:scroll;padding:2vw;}
    .project-top{display:flex;flex-direction:column-reverse;}
    .project-img{width:100%;padding-top:56.25%;display:block;margin-top:4vw;}
    .project-info{width:100%;padding:0;display:block;}
    .thumbs div,.equipment .thumbs div{width:49%;height:auto;padding-top:27.5625%;margin-right:2%;}
    .thumbs div:nth-child(2n),.equipment .thumbs div:nth-child(2n){margin-right:0;}
    .close{position:fixed;top:calc(3vw + 10px);right:calc(3vw + 10px);}
    .description p{font-size:14px;}

    .service-details{padding:0 5%;}
    .service-details h2{background-size:16px;background-position:0 1px;padding-left:30px;font-size:22px;}
    .service-details h2 img{height:28px;}
    .service-details p{margin-left:30px;}
    .sideline-box{padding-bottom:35px;}
    .sideline-box:last-child{padding-bottom:0;}
    .sideline{top:13px;bottom:-13px;left:7px;}
}

@media(max-width:1000px) and (orientation:portrait){
    .flex-box{flex-direction:column;}
    .flex-box-rev{flex-direction:column-reverse;}
    .about h1,.services h1,.projects h1,.about-text,.contact-info{width:100%;}
    .logo{margin:40px auto 0 auto;background-size:contain;}
    
    .mobile-menu{display:block;width:45vw;height:12vw;padding-top:3vw;}
    .menu-on{}
    .menu-lines{background:url(https://cdn.cedarleafmedia.co.jp/img/mobile_menu.svg) right 4vw center no-repeat;background-size:contain;padding-top:8.25vw;}
    .menu-on .menu-lines{}
    nav{display:inline-block;top:0;right:0;z-index:40;}
    nav ul{display:none;background:white;padding:10px 0;width:45vw;box-shadow:-4px 7px 7px 1px rgba(0,0,0,0.1);}
    nav li{font-weight:bold;margin-left:0;display:block;}
    nav li a{display:inline-block;padding:10px 20px;font-size:16px;}
    .lang{margin:0;}
    .lang a{font-size:15px;}
    .activepage{border:none;}
    
    header{height:13vw;width:100%;padding:1vw 0;position:fixed;z-index:1000;background:#fff;}
    .header-logo{margin:2vw 0 0 4vw;height:9vw;width:29.88vw;padding-top:0;}
    .stage{padding-top:15vw;}
    
    .anchor{display:block;position:relative;top:calc(40px - 15vw);visibility:hidden;}
    
    .about-text{font-size:16px;}
    .services h1,.projects h1{margin:0 0 6vw 0;border:none;border-left:solid 4px #231F20;padding:0 3%;text-align:left;}
    .projects h1{margin:0 auto 6vw auto;width:74vw;font-size:7vw}
    .services .flex-box{padding:0 10%;}
    .service-list{width:100%;padding:0 3%;}
    .contact-info h2{font-size:35px;}
    .more{width:56%;margin:8% auto 0 auto;}
    
    .modal{top:18vw;right:5vw;bottom:5vw;left:5vw;width:auto;transform:none;overflow-y:scroll;padding:4vw;}
    .close{position:fixed;top:calc(18vw + 10px);right:calc(5vw + 10px);}
    
    .work{width:45.5%;margin:3%;padding-top:25.59375%;}
    .work:nth-child(2n){margin-left:0;}
    
    .approach{background-size:48%;margin-top:0;}
    .approach h1{font-size:28px;width:50%;margin-left:0;}
    .approach div{font-size:16px;width:80%;}
    
    .equipment{display:flex;flex-direction:column;}
    .equip-media{width:100%;margin-bottom:2%;}
    .equip-info{width:100%;}
    .equipment .description{font-size:15px;line-height:22px;}
    .equipment .thumbs{margin-top:2%;}
}