@charset "utf-8";

.sp{display: none;}
/*********************
 window resize 774px
*********************/
@media screen and (max-width: 774px) {
	.pc{display: none;}
	.sp{display: inline-block;}

	/*********************
	 header
	*********************/
	header .headerBox h1 img{
		width:50%;
		cursor:pointer;
	}
	/** menu button **/
	header .menu_btn{
		position: relative;
		top:-10px;
		right:-10px;
		cursor: pointer;
		width: 75px;
		height:50px;
		z-index:999;
	}
	header .menu_btn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		top: 5px;
		right: 15px;
		height: 2px;
		border-radius: 5px;
		background: #333;
		width: 45%;
	 }
	header .menu_btn span:nth-of-type(1) { top:23px; }
	header .menu_btn span:nth-of-type(2) { top:29px; }
	header .menu_btn span:nth-of-type(3) { top:35px; }

	header .menu_btn span:nth-of-type(3)::after {
		content:"Menu";
		position: absolute;
		top:1px;
		left:0px;
		color: #333;
		font-size: 0.6rem;
		text-transform: uppercase;
	}
	header .menu_btn.active span:nth-of-type(1) {
		top: 18px;
		right: 25px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	header .menu_btn.active span:nth-of-type(2) { opacity: 0; }
	header .menu_btn.active span:nth-of-type(3){
		top: 30px;
		right: 25px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
	header .menu_btn.active span:nth-of-type(3)::after {
		content:"Close";
		transform: translateY(0) rotate(-45deg);
		top: 3px;
		left:8px;
	}
	/** menu list **/
	header .menu_list{
		position: fixed;
		width:75vw;
		top:70px;
		right: -100%;
		z-index:998;
		display:none;
		opacity: 0;
		height: 100vh;
		background:rgba(205,238,254,0.9);
	}
	header .menu_list.active{
		animation-name:slideinRight;
		animation-duration:0.3s;
		animation-fill-mode:forwards;
		display:inline-block;;
	}
	@keyframes slideinRight {
	  100% {
		opacity: 1;
		right: 0%;
	  }
	}
	header .menu_list li{
		display:block !important;
		padding-right:0 !important;
		border-bottom:1px solid #999;
	}
	header .menu_list li{
		color:#fff;
		text-decoration:none;
		position: relative;
		display: inline-block;
		padding:15px 20px;
		width:100%;
	}
	header .menu_list li:hover{
		background:#e3e0f8;
	}
	header .menu_list li:before {
		content: '';
		width: 6px;
		height: 6px;
		border: 0;
		border-top: solid 2px #333;
		border-right: solid 2px #333;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 30px;
		bottom: 0;
		margin: auto;
	}
	/*********************
	 main
	*********************/
	main{
		margin-top:70px;
	}
	/*********************
	 topimg
	*********************/
	#topimg article{
		background-image:url(../img/topimg_sp_bg.png);
	}
	#topimg article img{
		width:90%;
	}
	#topimg article img:last-child{
		display:inline;
		width:70%;
		padding-top:60px;
	}

	/*********************
	 service
	*********************/
	#service .title{
		padding:80px 20px 40px;
	}
	#service ul{
		display: inline-block !important;
	}
	#service li{
		width:100% !important;
		max-width:100% !important;
	}
	#service ul img.sp{
		width:100%;
	}
	#service .text{
		margin-left:0;
		height:200px;
		padding-top:0px;
	}

	/*********************
	 price
	*********************/
	#price img{
		width:100%;
	}
	#price .imgBox{
		display: inline-block !important;
	}
	#price img{
		width:100%;
	}
	#price .caution font{
		padding-right:0;
	}

	/*********************
	 contact
	*********************/
	#contact form{
		max-width:100%;
		margin:0 auto;
	}
	#contact form .formitem{
		display:block;
		margin-top:20px;
	}
	#contact form .formtxt{
		width:100%;
	    text-align:left;
	}
	#contact form .formnote{
		margin:0;
	}
	/*********************
	 company
	*********************/
	#company ul{
		display: inline-block !important;
	}
	#company article{
		text-align:center;
	}
	#company article li{
		width:initial;
	}
	#company article li:last-child{
		text-align:left;
	}
	#company article li p{
		width:140px;
	}




}