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


@media(max-width:900px){
	.header .rightside ul{display: block;}
	.header .rightside ul li a{padding: 10px 10px 10px 20px;margin-bottom: 20px;display: block;text-align: left;}
	.header .rightside ul li a::before{content: "・";font-size: 20px; width: auto;height: auto;left: 0;top:10px;;right: auto;bottom: auto;background: none;color: #FF7300;}

	.footer .area01_02{display: none;}
}

@media(max-width:834px){
	.sp_only{display: block;}
	.pc_only{display: none;}

	.txt16{font-size:14px;line-height: 32px;}
	.txt22{font-size:18px;line-height: 32px;}

	body{min-width: 100%;}

	.header {position: fixed;padding: 10px;background: #FFF;z-index: 99;width: 100%;box-sizing: border-box;}
	.header .leftside{width: 150px;}


	.footer{width:100%;padding: 5% 0;box-sizing: border-box;}
	.footer .wrap{padding: 0;}
	.footer .area01_01 .tel{margin: 10px 0;}
	.footer .area01_03{position: static;text-align: center;width:100%;margin-top: 40px;}

	.top .hero{padding: 120px 0;}
	
	.top .hero .img{width:180px;padding-left: 80px;}
	.top .hero .img::after{width:100px;height: 100px;top:calc(50% - 50px);left:calc(50% - 50px);}

	.top .hero.visible .img::after{top:calc(50% - 25px);left:0;width:50px;height:50px;}


/*
	@keyframes cover01 {
	      0% {width:100%;}
	     20% {width:100%;}
	     50% {width:0;}
	    100% {width:0;}
	}
	
	
	@keyframes transform01{
	      0% {top:calc(50% - 50px);left:calc(50% - 50px);width:100px;height:100px;}
	    100% {top:calc(50% - 25px);left:calc(50% - 120px);width:50px;height:50px;}
	}
*/


	
	
	
	
	.top .sec01{width:100%;padding: 5%;box-sizing: border-box;}
	.top .sec01::before{background: #F7F7F7;}
	.top .sec01 .area01_01{width:100%;}
	.top .sec01 .area01_01 .img{width:280px;margin: 0 auto;padding: 20px 0;}
	.top .sec01 .area01_02{width:100%;padding-top: 20px;}
	.top .sec01 .button-wrap a{margin: 0 auto;}
	.top .sec02 {padding-bottom: 0;}
	.top .sec02 .sectitle{margin-bottom: 30px;}
	.top .sec02 .area01 > * {width:calc(50% - 10px);margin-bottom: 10px;}
	.top .sec03 {padding-bottom: 0;}
	.top .sec03 .area01_01{width: 100%; text-align: center;margin-bottom: 20px;}
	.top .sec03 .area01_01 .address{text-align: left;}
	.top .sec03 .area01_01 a{margin: 0 auto;}
	.top .sec03 .area01_02{display: none;}
	.top .sec03 .sp_map{display: block;width: 100%; height: 200px;padding-bottom: 30px;}

	.top .sec04{width:100%;padding: 5%;box-sizing: border-box;}

	.company .hero{padding:50px 0 40px;}
	.company .hero .title{font-size:20px;}
	.company .sec01 .wrap{width:100%;max-width: 100%;}
	.company .sec01 .wrap::before{display: none;}
	.company .sec01 .wrap2{padding: 20px 0 50px;}
	.company .sec01 .area01{margin-bottom: 30px;}
	.company .sec01 .area01_01{width:100%;margin-bottom: 20px;}
	.company .sec01 .area01_01 dt{width:100%;color: #666666;margin-bottom: 5px;}
	.company .sec01 .area01_01 dd{width:100%;}
	.company .sec01 .area01_02{width:100%;}
	.company .sec01 .area02_01{width:100%;margin-bottom: 20px;}
	.company .sec01 .area02_02{width:100%;}
	.company .sec01 .area02_02 iframe{height: 220px;}


	.concept .hero .title{font-size:20px;}
	.concept .sec01 .area01 .img{width:270px;margin: 0 auto 40px;}
	.concept .sec01 .title{margin-bottom:20px;}
	.concept .sec01 .text{margin-bottom:50px;}


	.contents .hero{padding:50px 0 40px;}
	.contents .hero .title{font-size:20px;}
	.contents .sec01 .wrap{width:100%;max-width: 100%;}
	.contents .sec01 .wrap::before{display: none;}
	.contents .sec01 .wrap2{padding: 70px 0 50px;}
	.contents .sec01 .item+.item{margin-top: 90px;}
	.contents .sec01 .num{font-size: 140px;}
	.contents .sec01 .item:nth-child(2n + 1) .num{top:-30px;left:auto;right:0;}
	.contents .sec01 .item:nth-child(2n    ) .num{top:-30px;right:0;}
	.contents .sec01 .title{width:100%;margin-bottom: 20px;}
	.contents .sec01 .item:nth-child(2n + 1) .title{margin-left:0;}
	.contents .sec01 .img {width:100%;padding-bottom: 20px;}
	.contents .sec01 .box {width:100%;padding: 0;}
	.contents .sec01 .item:nth-child(2n    ) .img{order:2;}
	.contents .sec01 .item:nth-child(2n    ) .text{order:3;}


	.contact .sec01 .area02 .text{padding-top: 35px;}
	.contact .sec01 .area02 dt{width:100%;padding: 20px 0 0;}
	.contact .sec01 .area02 dd{width:100%;padding: 0 0 30px;border: none;}
	.contact .sec01 .area02 input[type="submit"]{width:100%;height:100%;border:none;padding:10px 20px;font:inherit;}
	.contact .sec01 .area02 textarea{width:100%;}


}