@media screen and (min-width: 768px){
	.br-sp {display: none; }
	}
@media screen and (max-width: 767px) {
	/* 767px以下に適用されるCSS（スマホ用） */

	.sp{
		display: block;
	}
		/* スマホの場合は横幅にpxを使うのは基本NG
			機種によって全然サイズが違うからほぼ100%k崩れる
			ロゴとか明らかに小さい限られたパーツのみ */
	main{
		width: 100%;
		height: 600px;
		position: relative;
	}

	.access-right iframe{
		width: 100%;
		margin: 0;
	}
	.wrapper{
        width: 90% !important;
        margin: 0 auto;
    }
	#particles-js{
		overflow: hidden;
		width: 100% !important;
		height: auto;
		background-size: cover !important;
		background-repeat: no-repeat !important;
	}

	header h1{
		width: 100px !important;
	}

	#nav-content .logo-img img{
		width: 100px !important;
	}

	#nav-content .logo-img{
		padding: 20px 0 0 30px !important;
	}

	h1,p,ul{
		max-width: 100%;
	}
	p,ul{
		font-size: 14px;
	}
	.title{
		width: 100% !important;
		padding: 0 !important;
		margin: 50px 0;
	}


	.main-img{
		height: 400px;
		object-fit: cover;
	}
	.news{
		width: 100%;
		height: auto !important;
	}

	.news-content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.content{
		margin: 0 auto !important;
		width: 100%;
	}

	.news-img{
		width: 100%;
	}

	.concept{
		width: 100% !important;
		text-align: center;
		height: auto !important;
	}

	
	.about-title p{
		
		font-size: 18px !important;
	}

	.about-title{
		margin-bottom: 30px !important;
	}
	
	.about-content {
		width: 100% !important;
		margin: 0 !important;
		height: auto;
		background-color: rgb(32, 32, 32);
		text-align: center;
		padding: 50px 0 !important;
	}
	.about-content-l{
		width: 100% !important;
		height: auto;
		margin: 0 !important;
		background-color: rgb(0, 0, 0) !important;
		text-align: center;
		padding: 50px 0 !important;
	}

	.merit{
		width: 100%;
		height: auto !important;
		height: 100%;
	}
	.merit-content{
		width: 100% !important;
		height: auto;
		margin: 0 !important;
		padding: 10px 5%;
	}

	.merit-box{
		margin: 20px auto;
	}
	
	.merit-title{
		padding: 30px 0 20px 0 !important;
		
		
	}
	.merit-title p{
		font-size: 15px !important;
	}
	.merit-text{
		padding: 20px 0 !important;
	}
	.plans{
		height: auto !important;
	}

	.plans-box .box{
		margin: 0 auto !important;
	}
	.box {
		width: 90%;
		height: auto;
		display: block;
	}
	.plans-btn{
		width: 100%;
		margin: 0 auto !important;
	}
	
	.plans-boxes {
		
		display: flex;
		flex-direction: column;

	}
	.access{
		height: auto !important;
		width: 100% !important;
		padding-bottom: 50px;
	}

	.access-box{
	
		flex-direction: column;

	}
	/* ↓こことかpadding-left付けて
		幅寄せるとかじゃなくて、横幅に％つけて中央寄せする
		デザインによるけど大抵の場合90%がバランスいいと思う */
		
	.access-left{
		width: 90% !important;
		margin: 0 auto !important;
		padding-left: 0 !important;
	}
	.access-right{
		width: 90% !important;
		margin: 20px auto !important;
		padding: 0 !important;
	}
	iframe{
		width: 90%;
		margin: 0 auto;
		display: block;
	}


	footer{
		margin-top: 100px !important;
		width: 100%;
	}
	.icon{
		padding: 30px 0 30px 0 !important;
	}
	.footer-text{
		
		display: block !important;
	}
	.footer-text ul{
		padding: 0!important;
	}
	.last{
		padding-top: 60px !important;
	}

	.icon{

		box-sizing: border-box;
	}
	footer .logo-img{
		padding-bottom: 20px !important;
	}

	#nav-content{
		max-width: 100%;
	}
	#nav-content ul{
   
		margin: 40px 0 0 60px !important;
	
	  }
	  #nav-content .icon{
		margin:180px 0 0 20px !important;
		padding: 0;   
		width: 75px !important;
	  }

	  .d-demo__item{
		width: calc(100vw / 2);
	  }
	  
	  .d-demo__item > img{
		 width: calc(100vw / 2);
		 height: 200px;
	  }


}