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

@media(max-width:834px){
	.sp_only{display: block;}
	.pc_only{display: none;}
	
	header {padding:14px 10px;}
	header .logo{width:210px;}
	header #humb{cursor:pointer;position:absolute;top:15px;right:15px;z-index:1000;}
	header #humb .border{width:36px;height:36px;position:relative;}
	header #humb .border01{position:absolute;width:34px;height:2px;background:#FFF;top:6px;left:50%;transform:translate(-50%, -50%);transform-origin:center;transition:0.5s;}
	header #humb .border02{position:absolute;width:34px;height:2px;background:#FFF;top:50%;left:50%;transform:translate(-50%, -50%);transform-origin:center;transition:0.5s;}
	header #humb .border03{position:absolute;width:34px;height:2px;background:#FFF;bottom:6px;left:50%;transform:translate(-50%, 50%);transform-origin:center;transition:0.5s;}
	header #humb.active .border01{top:50%;transform:translate(-50%, -50%) rotate(135deg);} 
	header #humb.active .border02{width:0;} 
	header #humb.active .border03{bottom:50%;transform:translate(-50%, 50%) rotate(-135deg);} 

	header nav{position:absolute;top:70px;right:0px;width:0;transition:0.5s;overflow:hidden;z-index:1000;background:#1A1A1A;}
	header #humb.active + nav{width:100%;}
	header .links{width:100vw;max-width:300px;height:calc(100vh - 70px);margin: 0 auto;}
	header .links a{display:block;margin: 30px auto;font-size:18px;}
	header .links .link span{display:inline-block;margin-right:10px;font-size:36px;font-family: 'Oswald', sans-serif;}
	header .links .tellink{font-size:26px;}

	footer {padding:25px 0 40px;}
	footer .links{border-top : 1px solid #353535;border-bottom : 1px solid #353535;position:relative;flex-wrap:wrap;}
	footer .links::before{content:"";width:1px;height:100%;background:#353535;position:absolute;top:0;left:50%;}
	footer .links::after{content:"";width:100%;height:1px;background:#353535;position:absolute;top:50%;left:0;}
	footer .links *{width:50%;padding:10px 0;margin: 0;text-align:center;}
	footer .links p{display:none;}
	footer .totop{bottom:20px;right:15px;}



	.top .sec_hero{padding:100px 0;}
	.top .sec_hero .mainarea{width:490px;height:490px;}
	.top .sec_hero .mess{position:absolute;bottom:35px;left:calc(50% - 220px);}
	.top .sec_hero .deco01{height:200px;background-size:1360px 200px;position:absolute;bottom:51%;left:0;animation: herobgsp 20s linear infinite;}
	.top .sec_hero .deco02{height:216px;background-size:1360px 216px;position:absolute;top:51%;left:0;animation: herobgsp 20s linear infinite;}
	.top .sec_hero .deco03{width:700px;}

	@keyframes herobgsp{
	  0% {background-position-x:0;}
	  100% {background-position-x:-1360px;}
	}



	.top .sec_concept{padding:50px 20px 30px;}
	.top .sec_concept::before{content:"";border-top:35px solid #1A1A1A;}
	.top .sec_concept::after{content:"";border-top:7px solid #FFF;border-left:10vw solid transparent;border-right:10vw solid transparent;top:29px;}
	.top .sec_concept .sec_title{margin-bottom:20px;}
	.top .sec_concept .text{font-size:14px;line-height:30px;text-align:justify;margin-bottom:25px;}
	.top .sec_concept .bg01 img{object-position:top center;}
	.top .sec_concept .bg02 img{object-position:top center;}

	.top .sec_system{padding:20px 20px 0;box-sizing:border-box;margin-top:30px;}
	.top .sec_system .titles{margin-bottom:20px;}
	.top .sec_system .titles .sec_etitle{text-align:center;}
	.top .sec_system .titles .sec_title{text-align:center;margin-bottom:20px;}
	.top .sec_system .titles .text{width:100%;position:static;}
	.top .sec_system .item{padding:25px 0;}
	.top .sec_system .item .img{width:100%;margin-bottom:15px;}
	.top .sec_system .item .texts{width:100%;padding:0px;}
	.top .sec_system .item .prices{margin: 20px 0;}
	
	.top .sec03 {margin: 0px auto;max-width:calc(100% - 40px);}
	.top .sec03 .icon{width:calc(25vw - 35px);height:calc(25vw - 35px);margin-top:20px;}
	.top .sec03 .text{text-align:justify;}

	.top .sec_access{padding-top:40px;margin-bottom:0px;}
	.top .sec_access .sec_etitle{text-align:center;}
	.top .sec_access .sec_title{text-align:center;margin-bottom:25px;}
	.top .sec_access iframe{width:calc(100% - 40px);height:250px;margin: 0 auto;display:block;}
	.top .sec_access .infos{flex-wrap:wrap;padding:20px;}
	.top .sec_access .infos dl{width:100%;flex-wrap:wrap;}
	.top .sec_access .infos dt{width:100%;margin-bottom:0;padding:0;border:none;font-weight:bold;}
	.top .sec_access .infos dd{width:100%;margin-bottom:15px;padding-bottom:15px}
	.top .sec_access .infos .img{width:100%;margin-top:5px;}

	.top .sec_prf{text-align:center;}
	.top .sec_prf .texts{margin: 0 auto;}
	.top .sec_prf .data{display:inline-block;text-align:left;}
	.top .sec_prf .message{padding: 0 20px;box-sizing:border-box;}
	.top .sec_prf .beforeafter{width:350px;max-width:100%;margin: 0 auto 20px;}
	.top .sec_prf .beforeafter .before{width:100px;bottom:120px;left:5px;}
	.top .sec_prf .beforeafter .deco{bottom:250px;left:40px;}

	.top .sec_kids {display:block;width:calc(100% - 40px);padding:20px;margin: 0 auto 20px;}
	.top .sec_kids .img{width:100%;height:170px;}
	.top .sec_kids .img img{object-fit:cover;width:100%;height:100%;}
	.top .sec_kids .texts{width:100%;padding:20px 0;}
	.top .sec_kids .deco{font-size:72px;}

	.top .gallery{height:196px;background-size:1568px 196px;animation: gallery_sp 30s linear infinite;}
	
	@keyframes gallery_sp{
	  0% {background-position-x:0;}
	  100% {background-position-x:-1568px;}
	}

	.top .sec_contact{padding:30px 20px 20px;}
	.top .sec_contact .sec_title{margin-bottom:30px;}
	.top .sec_contact .links {width:330px; max-width:100%;}
	.top .sec_contact .links .line_link{margin: 0 auto;flex-wrap:wrap;position:relative;}
	.top .sec_contact .links .line_link .texts{width:100%;}
	.top .sec_contact .links .line_link .icon{width:68px;}
	.top .sec_contact .links .line_link .title{padding-left:80px;font-size:20px;line-height:30px;margin-bottom:180px;}
	.top .sec_contact .links .line_link .qr{width:160px;position:absolute;top:100px;left:calc(50% - 80px);}
	.top .sec_contact .links .tel_link{margin: 20px auto 0;padding:20px 0;}


}
@media(max-width:500px){

	.top .sec_hero .mainarea{width:290px;height:290px;}
	.top .sec_hero .mess{width:205px;position:absolute;bottom:35px;left:calc(50% - 20px);}
	.top .sec_hero .deco03{width:410px;}

	.top .sec03 {margin: 0px auto;max-width:calc(100% - 40px);}
	.top .sec03 .sec_title{font-size:26px;}
	.top .sec03 .icons{flex-wrap:wrap;margin-top:0;}
	.top .sec03 .icon{width:calc(50vw - 50px);height:calc(50vw - 50px);margin-top:20px;}
	.top .sec03 .icon span{bottom:20px;font-size:12px;}
	.top .sec03 .text{text-align:justify;}
}