/* CSS Document */
@charset "UTF-8";

@media(max-width:834px){
	.sp_only{display: block;}
	.pc_only{display: none;}
	
	
	header .logo01{width:50px;}
	header .logo02{width:70px;}
	header #humb{display:block;position:fixed;top:10px;right:10px;width:30px;height:30px;z-index:1000;}
	header #humb::before{content:"";width:20px;height:2px;background:#FFF;position:absolute;top:30%;left:50%;transform:translate(-50% , -50%);transition:0.5s;}
	header #humb::after{content:"";width:20px;height:2px;background:#FFF;position:absolute;bottom:30%;left:50%;transform:translate(-50% , 50%);transition:0.5s;}
	header #humb.active::before{top:50%;transform:translate(-50% , -50%) rotate(135deg);background:#000;}
	header #humb.active::after{bottom:50%;transform:translate(-50% , 50%) rotate(-135deg);background:#000;}
	header #humb.active + .navi{transform:translateX(0%);}
	header .navi{display:block;position:fixed;top:0px;width:100%;height:100vh;box-sizing:border-box;padding:50px;background:url("../img/products/bg.jpg") repeat;background-size: 160px 160px;transform:translateX(100%);transition:0.5s;}
	header .navi a{font-size:14px;font-weight:bold;color:#000;margin-bottom:8px;}
	header .navi a span{display:inline-block;margin-right:20px;}

	footer .logos{width:100%;}
	footer .logo{margin: 0 auto 20px;}
	footer .address{text-align:center;}
	footer .tels{justify-content:center;}
	footer .navi{display:none;}
	footer .copyright{text-align:center;}

	.top .sec_hero{padding-right: 00px;}
	.top .sec_hero .titles{padding-top:40px;z-index:10;}
	.top .sec_hero .etitle{font-size:50px;line-height:50px;margin-bottom:20px;}
	.top .sec_hero .title{font-size:20px;font-weight:bold;}
	.top .sec_hero .scroll{font-size:10px;position:absolute;bottom:25px;right:20px;}
	.top .sec_hero .frimg{overflow:hidden;}
	.top .sec_hero .frimg img{width:250%;transform:translateX(-60%);}

	.top .sec_company{padding:0px 0 170px;margin-top:20px;}
	.top .sec_company .wrap{padding:0 10px 0 0;box-sizing:border-box;}
	.top .sec_company .texts{padding:20px 10px 30px 10px;}
	.top .sec_company .titles{flex-wrap:wrap;margin-bottom:20px;}
	.top .sec_company .etitle{font-size:50px;width:100%;}
	.top .sec_company .title{font-size:16px;}
	.top .sec_company .text{padding-left:15px;}
	.top .sec_company .img{top:auto;bottom:0;width:100%;height:auto;}
	.top .sec_company .link{margin: 0 auto;}

	.top .sec_about{padding:0px 0 170px;}
	.top .sec_about .wrap{padding:0 0 0 10px;box-sizing:border-box;}
	.top .sec_about .texts{padding:20px 20px 30px 10px;}
	.top .sec_about .titles{flex-wrap:wrap;margin-bottom:20px;}
	.top .sec_about .etitle{font-size:50px;width:100%;}
	.top .sec_about .title{font-size:16px;}
	.top .sec_about .text{padding-left:15px;}
	.top .sec_about .img{top:auto;bottom:0;width:100%;height:auto;}
	.top .sec_about .link{margin: 0 auto;}

	.top .sec_works .titles{justify-content:center;}
	.top .sec_works .etitle{font-size:50px;}
	.top .sec_works .title{font-size:16px;}
	.top .sec_works .items{padding: 0 20px;box-sizing:border-box;}
	.top .sec_works .item{width:100%;max-width:100%;}
	.top .sec_works .item + .item{margin-top:30px;}
	.top .sec_works .img{height:calc(66vw - 25px);}
	.top .sec_works .texts{width:calc(100% - 30px);}

	.top .sec_products{background:linear-gradient(to top, #F78C40 70%,transparent 70%)}
	.top .sec_products .titles{justify-content:center;}
	.top .sec_products .etitle{font-size:50px;margin: 0;}
	.top .sec_products .title{font-size:16px;}
	.top .sec_products .items{padding: 0 20px;box-sizing:border-box;}
	.top .sec_products .img{height:calc(66vw - 25px);}
	.top .sec_products .item{width:100%;max-width:100%;}
	.top .sec_products .item + .item{margin-top:30px;}
	
	.top .sec_contact{padding:75px 20px 85px;}
	.top .sec_contact .link::after{background-size:250px 50px;}
	.top .sec_contact .deco{position:absolute;bottom:-65px;right:70px;}


	.sec_hero.sub01{padding-right: 10px;}
	.sec_hero.sub01::before{width:calc(100% - 10px);height:calc(100% - 30px);}
	.sec_hero.sub01 .titles{top:53%;z-index:10;}
	.sec_hero.sub01 .etitle{font-size:40px;letter-spacing:0.05em;}
	.sec_hero.sub01 .title{font-size:16px;font-weight:bold;}
	.sec_hero.sub01 .img{overflow:hidden;}
	.sec_hero.sub01 .img img{width:150%;transform:translateX(-33.3%);}

	.sec_hero.sub02{padding-right: 10px;position:relative;}
	.sec_hero.sub02::before{content:"";width:100%;height:50px;background:linear-gradient(-45deg, transparent 5px , #000 5px);}
	.sec_hero.sub02 .titles{padding-left:10px;padding-top:100px;}
	.sec_hero.sub02 .etitle{font-size:40px;letter-spacing:0.05em;}
	.sec_hero.sub02 .title{font-size:16px;font-weight:bold;}

	.company .sec01{padding: 0 20px;box-sizing:border-box;}
	.company .sec01 iframe{width:100%;}
	.company .sec01 .texts{width:100%;font-size:14px;line-height:30px;letter-spacing:0.1em;}

	.about .sec01 .intro{padding:0 20px;box-sizing:border-box;}
	.about .sec01 .item{flex-wrap:wrap;;}
	.about .sec01 .item:nth-child(n) .texts{order:3;}
	.about .sec01 .img{width:100%;}
	.about .sec01 .texts{width:100%;max-width:100%;padding:20px 20px 0;box-sizing:border-box;}


	.products .sec01 .img{width:100%;max-width:100%;height:calc(66vw - 25px);}
	.products .sec01 .texts{width:100%;max-width:100%;padding-bottom:30px;}
	.products .sec01 .title{font-size:16px;padding-left:10px;margin-top:10px;}
	.products .sec01 .items{padding:10px;}
	.products .sec01 .item{padding:10px;}

	.product .sec01{padding: 0 10px;box-sizing:border-box;}
	.product .sec01 .item{padding:10px;}
	.product .sec01 .steps::after{width:calc((100% - 30px) / 2);}
	.product .sec01 .step{width:calc((100% - 30px) / 2);margin-bottom:15px;}
	.product .sec01 iframe{height:66vw;}
	.product .sec01 .js-on{border:1px solid #000;}

	.works .sec01 .items{padding:0 20px;box-sizing:border-box;}
	.works .sec01 .item{width:100%;max-width:100%;margin-bottom:30px;}
	.works .sec01 .img{height:calc(66vw - 25px);}
	.works .sec01 .texts{width:calc(100% - 30px);}

	.work .sec01{padding: 0 10px;box-sizing:border-box;}
	.work .sec01 .item{padding:10px;}
	.work .sec01 .js-on{border:1px solid #000;}


	.contact .secinput{padding:20px;}
	.contact .text01{font-size:18px;line-height:36px;text-align:center;}
	.contact .text02{font-size:14px;line-height:28px;text-align:justify;margin-top:10px;}
	.contact .text03{font-size:14px;line-height:28px;text-align:center;margin-top:20px;}
	.contact .text04{font-size:14px;line-height:28px;text-align:center;}
	.contact .caption{font-size:12px;line-height:24px;}
	.contact .item{justify-content:flex-start;}
	.contact .name{margin-left:10px;margin-bottom:10px;}
	.contact .input{width:100%;}
	.contact .output{width:100%;}

	.icontact .secinput .title span{display:block;margin: 10px 0 0 0 ;}
	.icontact .secinput{padding:10px;box-sizing:border-box;}
	.icontact .text01{font-size:18px;line-height:36px;text-align:center;}
	.icontact .text02{font-size:14px;line-height:28px;text-align:justify;margin-top:10px;}
	.icontact .text03{font-size:14px;line-height:28px;text-align:center;margin-top:20px;}
	.icontact .text04{font-size:14px;line-height:28px;text-align:center;}
	.icontact .caption{font-size:12px;line-height:24px;}
	.icontact .item{justify-content:flex-start;}
	.icontact .name{margin-left:10px;margin-bottom:10px;}
	.icontact .input{width:100%;}
	.icontact .output{width:100%;}

}