@charset "UTF-8";
.pcOnly{display:block!important;}
.spOnly{display:none!important;}


#bread{width:calc(100% - 40px);margin:0 20px;}

#service-page .oem04{background-position:left center;}
#service-page .oem04 div{width:calc(100% - 80px);padding:40px;margin:0 40px;background:rgba(0,0,0,0.5);}

@media screen and (max-width:1350px){
header.fixed #gNavi{width:calc(28em + 60px);height:2.7em;}

}
@media screen and (max-width:1300px){
header p.description{opacity:0;}
}
@media screen and (max-width:1250px){
#service-page .oem05 > div.imgLEFT{flex-direction:column;}
#service-page .oem05 > div.imgLEFT > div{width:80%;}
#service-page .oem05 p br:first-child , #service-page .oem05 p br:last-child{display:none;}

#company-page div.map{flex-direction:column;align-items:flex-start;}
#company-page div.map iframe{width:100%;margin-right:0;}
#company-page div.map div{width:100%;margin-top:30px;}
#pageField p.title{font-size:17px;letter-spacing:0em;}
#single-content figure.topIMG a.topIMG img{max-width:500px;}
#items-list li a span.thumIMG{width:100%;height:0;padding-top:calc(1 / 1 * 100%);}
}
@media screen and (max-width:1200px){
#contact > div{padding-left:300px;}
#contact > div span.logo{left:50px;}
#works-page .wr01 .imgLEFT > span.thumIMG{width:350px;}
#works-page .wr01 .imgLEFT > div{width:calc(100% - 400px);}

main#service-page{padding-top:0!important;}
#service-page .oem00{padding-left: 360px;}
#service-page .oem00 span.thumIMG{width:370px;height:100%;background-position:center center;background-size:contain;}
#service-page .oem05 h3.title03{font-size:36px;}

#flow-page .fl00 div.imgLEFT span.thumIMG{margin-left:20px;}
}
@media screen and (max-width:1100px){
i.slug{left:calc(-60% - 120px);z-index:-1;}
#service-page .oem05 > div.imgLEFT > div{width:90%;}
#flow-page .fl00 div.imgLEFT{flex-direction:column;background-size:50px;}
#flow-page .fl00 div.imgLEFT > div{width:100%;margin:0;}
#flow-page .fl00 div.imgLEFT span.thumIMG{margin-left:0;}
header #gNavi{width:calc(28em + 60px);height:fit-content;}
header #gNavi ul{justify-content:left;}
header #gNavi ul li{width:7em;margin:6px 0;padding-left:15px;}
header #gNavi ul li a:before{top:5px;bottom:0;right:auto;left:-12px;}

}
@media screen and (max-width:1000px){
#contact{width:90%;}
#single-content div.single-head.lock form div{width:100%;padding:120px 40px 40px 40px;}

#pageField table.mailform tr th{padding-right:0;width:180px;}
#pageField table.mailform tr td{padding-right:0;}

#service-page .oem00{padding-left:300px;}
#service-page .oem00 span.thumIMG{width:300px;}
#works-page .wr00 li,
}
@media screen and (max-width:900px){
#pageField table.mailform tr.company input,
#pageField table.mailform td textarea{width:100%;box-sizing:border-box;}
#news-list > li{width:calc(100% / 2 - 8px);}
#news-list > li:nth-of-type(3n){margin-right:15px;}
#news-list > li:nth-of-type(2n){margin-right:0;}
#items-list li{width:calc(100% / 3 - 30px)!important;margin:0 15px 30px 15px;}
#works-page .wr02 ul li{width:calc(100% / 3);}

}
@media screen and (max-width:850px){
header.fixed #gNavi,
header #gNavi{width:calc(28em + 0px);height:2.7em;}
header #gNavi ul li{width:7em;box-sizing:border-box;}
#service-page .oem00{padding-left:0;flex-direction:column;}
#service-page .oem00 > div{margin-left:0;width:100%;}

#service-page .oem00 span.thumIMG{width:350px;height:auto;aspect-ratio:509 / 416;margin:0 auto 30px auto;right:auto;left:auto;bottom:auto;top:auto;position:relative;}
#service-page .oem00{width:100%;margin-left:auto;margin-right:auto;}
#service-page .oem01 p{text-align:left;}
#service-page .oem02 div.items div{width:calc(100% / 2 - 40px);}
#service-page .oem03 ul li{padding-left:100px;}
#service-page .oem03 ul li b{width:80px;left:0;}
#service-page .oem03 ul li br{display:none;}
#service-page .oem04 div h3.title03{font-size:40px;}
#service-page .oem05 > div.imgLEFT span.thumIMG{margin-bottom:20px;}
#print > div.scroll button.close{right:15px;}
}
@media screen and (max-width:800px){
header.fixed #gNavi ul li,
header #gNavi ul li{width:7em;}

#singlePost #detail table.detailTable th , #singlePost #detail table.detailTable td{display:block;width:auto;padding:15px;}

}
@media screen and (max-width:768px){
header.fixed #gNavi,
header #gNavi{width:calc(24em + 0px);}
header.fixed #gNavi ul li,
header #gNavi ul li{width:6em;}
#titleIMG span.titleIMG img{width:140%;height:auto;top:-100px;bottom:-100px;margin:auto;}
i.slug{left:calc(-80% - 120px);}
#contact{width:100%;}
#pageField table th{width:140px;padding-right:0;}
#service-page .oem04{background:url(../oem/06sp.webp) no-repeat center / cover;}
}
@media screen and (max-width:700px){
i.slug{display:none;}
#works-page #pageField > p.title br{display:none;}
#contact > div{padding-left:250px;}
#contact > div span.logo{left:25px;}
#works-page .wr01 p.title br{display:none;}
#works-page .wr01 > div.imgLEFT{display:block;}
#works-page .wr01 .imgLEFT > span.thumIMG{width:350px;margin:0 auto 30px auto;}
#works-page .wr01 .imgLEFT > div{width:90%;margin:0 auto;}

#single-content div.single-head.lock form label input[type=password]{width:7em;}
#pageField table.mailform tr.name input,
#pageField table.mailform tr.kana input,
#pageField table.mailform tr.mail input{width:100%;box-sizing:border-box;}
}
@media screen and (max-width:650px){
#contact{height:330px;}
#contact > video{width:auto;height:100%;}
#contact > div{padding:40px 15px;display:block;}
#contact > div span.logo{position:relative;top:auto;bottom:auto;left:auto;margin:0 auto;scale:0.8;}
#contact > div > div{width:fit-content;margin:15px auto 0 auto;}
#contact > div > div a.link{margin:20px auto 0 auto;}
#contact > div > div h4{text-align:center;}
#contact > div > div a.tel{width:fit-content;margin:0 auto;}

#service-page .oem00{width:90%;}

#items-list li{width:calc(100% / 2 - 40px)!important;margin:0 20px 30px 20px;}
}
@media screen and (max-width:600px){
#works-page i.slug{display:none;}

#single-content div.single-head.lock form{padding:0;background-color:transparent;}
#pageField table.mailform,
#pageField table.mailform tbody,
#pageField table.mailform tr,
#pageField table.mailform tr th,
#pageField table.mailform tr td{display:block;border:0;width:100%;box-sizing:border-box;}
#pageField table.mailform tr:nth-child(odd){background-color:inherit;}
#pageField table.mailform tr th,
#pageField table.mailform tr td{padding:15px;}
#pageField table.mailform tr th{font-size:16px;padding-top:7px;padding-bottom:7px;background-color:#efefef;margin-bottom:10px;}
#pageField table.mailform tr td{margin-bottom:25px;}
#pageField table.mailform td input,
#pageField table.mailform td textarea{background:#fff;border:1px solid #ccc;border-radius:0;}
.mailform tr.privacy td > span{text-align:center;}
.mfp_buttons input, .mfp_buttons button{min-width:140px;}
input + .wpcf7-spinner{margin:auto 2px;}

#service-page .oem05 > div.imgLEFT span.thumIMG{width:335px;height:335px;}
#works-page .wr00 li,
#items-list li{width:calc(100% / 2 - 30px);margin-left:15px;margin-right:15px;}
#works-page .wr02 ul li{width:calc(100% / 2);}

}
@media screen and (max-width:550px){
}

@media screen and (max-width:500px){
#pageField table.table,
#pageField table.table tbody,
#pageField table.table tr,
#pageField table.table th,
#pageField table.table td{display:block;border:0;width:100%;box-sizing:border-box;}
#pageField table.table tr:nth-child(odd){background-color:inherit;}
#pageField table.table th,
#pageField table.table td{padding:15px;}
#pageField table.table th{padding-top:7px;padding-bottom:7px;}
#pageField table.table td{margin-bottom:25px;background:#f9f9f9;}
}
@media screen and (max-width:460px){
#contact > div > div h4{font-size:13px;text-align:center;}
#contact > div > div a.tel{font-size:33px;padding-left:35px;background-size:27px auto;}
#single-content div.single-head.lock form div{padding:70px 15px 30px 15px;background:url(../layout/icon-lock.svg) no-repeat center top 35px / 20px auto , linear-gradient(to bottom,#fff,#efefef);}
#works-page .wr01 .imgLEFT > span.thumIMG{width:250px;height:auto;aspect-ratio:1 / 1;}
#works-page .wr02 ul li{width:100%;}

}
@media screen and (max-width:400px){
#contact > div > div a.tel{width:fit-content;margin:0 auto;font-size:25px;padding-left:26px;background-size:20px auto;}


.mfp_buttons input, .mfp_buttons button{min-width:4em;padding-left:15px;padding-right:15px;}
}
@media screen and (max-width:360px){
#pageField table.mailform tr td{padding-left:0;padding-right:0;}
}



@media screen and (max-width:1050px){
div#infiniteITEMS div.panel{margin:0 7px;}

}
@media screen and (max-width:1000px){
section#top00 ul li{width:250px;margin:0 7px 15px 7px;}
section#NEWS{height:600px;box-sizing:border-box;padding:50px;background-size:cover;}
section#NEWS > div{height:100%;}
section#NEWS div div.newsBOX{padding:50px;height:100%;box-sizing:border-box;}
section#NEWS div div.newsBOX h3.title{text-align:center;margin-bottom:25px;}
section#NEWS div div.newsBOX h3.title i{font-size:30px;margin-bottom:5px;}
section#NEWS div div.newsBOX h3.title b{font-size:17px;}
section#NEWS div div.newsBOX ul{height:320px;}
main.top section p{font-size:13px;}
#service-page .oem04 div a.link{margin:30px auto;}
}

@media screen and (max-width:900px){
main.top section{height:auto;padding:50px 0;}
main.top section#top01{padding-left:calc(30% + 30px);}
main.top section div.img{width:30%;}
main.top section.rightIMG{padding-right:calc(30% + 30px);}
}
@media screen and (max-width:850px){
}
@media screen and (max-width:800px){
#coverIMG .panel > div > h2{font-size:40px;}

}
@media screen and (max-width:768px){
#titleIMG:after{content:'';display:block;width:100%;height:100%;background:url(../layout/.gif) no-repeat left center / cover;}
#titleIMG.concept:after{background-image:url(../layout/titleMOVIE/conceptBCKGsp.webp);}
#titleIMG.company:after{background-image:url(../layout/titleMOVIE/companyBCKGsp.webp);}
#titleIMG.contact:after{background-image:url(../layout/titleMOVIE/contactBCKGsp.webp);}
#titleIMG.oem:after{background-image:url(../layout/titleMOVIE/conceptBCKGsp.webp);}
#titleIMG.single-items-page:after,
#titleIMG.items-page:after,
#titleIMG.items:after{background-image:url(../layout/titleMOVIE/itemsBCKGsp.webp);}
#titleIMG.news-page:after{background-image:url(../layout/titleMOVIE/newsBCKGsp.webp);}
#titleIMG.works:after{background-image:url(../layout/titleMOVIE/worksBCKGsp.webp);}

#contact{position:relative;}
#contact video{display:none;}
#contact > div:before{content:'';display:block;width:100%;height:100%;background:url(../layout/titleMOVIE/fContact.jpg) no-repeat left center / cover;position:absolute;top:0;left:0;z-index:0;filter:brightness(0.7);}
#contact > div span.logo + div{position:relative;}

main.top{width:90%;}
main.top section{padding:0;}
section#top00 h3{line-height:1.5;}
section#top00 h3 br{display:block;}
main.top section#top01{padding-top:0;margin-top:50px;}
main.top section div.img{bottom:auto;}
section#NEWS div div.newsBOX{width:100%;padding-right:20px;}
section#NEWS div div.newsBOX ul{padding-right:20px;}
section#NEWS div div.newsBOX ul li{margin:25px 0;}
section#NEWS div div.newsBOX ul li a{padding-left:0;}
section#NEWS div div.newsBOX ul li a time{position:relative;left:auto;top:auto;margin-bottom:5px;}
section.fBanner time{display:none;}
section.fBanner h3{padding-right:0;}
section.fBanner p{padding-right:0;}
}
@media screen and (max-width:700px){
section#NEWS div div.newsBOX ul li a{padding-left:0;padding-top:20px;}
#coverIMG .panel.leftPANEL > div{padding-right:0;}
}
@media screen and (max-width:640px){
}
@media screen and (max-width:600px){
main.top section#top01{padding-left:0;padding-top:250px;}
main.top section div.img{width:180px;padding-bottom:215px;top:0;margin:0 auto;left:0;right:0;}
section h3.title i, section#NEWS h3.title i{font-size:40px;}
section#top02 h3.title i{width:300px;}
section h3.title b{font-size:20px;}
main.top section a.link{margin:50px auto;}
main.top section.rightIMG{padding-right:0;padding-top:100px;}
main.top section.rightIMG div.img{top:-30px;}
section#top00 ul li{width:calc(100% / 2 - 14px);}
}

@media screen and (max-width:550px){
.spOnly{display:block!important;}
.pcOnly{display:none!important;}
#coverIMG .panel.pl02 > div{left:55%;width:45%;}
}
@media screen and (max-width:500px){
section#top00 h3{font-size:27px;}
main.top section.rightIMG{padding-top:220px;}
main.top section.rightIMG div.img{right:0;left:0;margin:0 auto;}
section#top02 h3.title i{width:auto;}
section#NEWS{padding:30px 20px;}
section#NEWS div div.newsBOX{padding:30px;}
section#top00 ul li b{font-size:16px;}
section#top00 ul li b br{display:none;}
}
@media screen and (max-width:450px){
section#top00 ul li{width:100%;}
footer .fContainer p{line-height:1.5;}
footer address.copy{font-size:15px;margin-top:40px;}
}








/*▲下層ページのみ▲*/