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





/* ##########################################
　　　　　　1024px以下の表示（タブレット）
############################################*/

@media screen and (max-width: 1024px){
	
	
	
	.pc{ display: none;}
	.sp{ display: block;}
	
	
/* ************************************
                 ヘッダー
***************************************/

	header{
		width: 100%;
		height: 100vh;
		background-image: url(../images/top.jpg);
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: scroll;
	}
	
	header div.logo.sp img{
		width: 100px;
	}
	
	


	header p.read{
		font-size: 16px;
		margin-top: 0;
		padding-top: 270px;
   		padding-bottom: 430px;
	}
	
	
	header p.scroll {
		text-align: center;
		margin: 0 auto;
		position: absolute;
		left: 50%;
		bottom: 90px;
	}
	

	
	* {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
		a,
		a:visited,
		a:hover,
		a:active{
		text-decoration: none;
		color: inherit;
	}
	
	.cp_fullscreenmenu{
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
	}
	
	.toggle{ display: block;}
	
		/*menuコンテンツ*/
	.cp_fullscreenmenu .menu{
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		visibility: hidden;
		overflow: hidden;
		width: 100%;
		height: 100%;
		pointer-events: none;
		outline: 1px solid transparent;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		align-items: center;
		justify-content: center;
	}
	
	.cp_fullscreenmenu .menu > div{
		display: flex;
		overflow: hidden;
		width: 100%;
		height: 100%;
		-webkit-transform: scale(0);
		transform: scale(0);
		text-align: center;
		color: #fefefe;
		background: rgba(109,186,254,0.8);
		flex: none;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		align-items: center;
		justify-content: center;
	}
	
	.cp_fullscreenmenu .menu > div > ul{
		display: block;
		text-align: center;
		max-height: 100vh;
		margin: 0;
		padding: 0 1em;
		list-style: none;
		transition: opacity 0.4s ease;
		opacity: 0;
	}
	
	.cp_fullscreenmenu .menu > div > ul > li{
		display: block;
		margin: 1em;
		padding: 0;
	}
	
	.cp_fullscreenmenu .menu > div > ul > li.logo{
		display: none;
	}
	
	.cp_fullscreenmenu .menu > div > ul > li > a{
		position: relative;
		display: inline;
		cursor: pointer;
	}
	
	.cp_fullscreenmenu .menu > div > ul > li > a:hover{
		color: #FFF;
	}
	
	.cp_fullscreenmenu .menu > div > ul > li > a:hover:after{
		width: 100%;
	}
	
	.cp_fullscreenmenu .menu > div > ul > li > a:after{
		position: absolute;
		z-index: 1;
		bottom: -0.15em;
		right: 0;
		width: 0;
		height: 2px;
		content: '';
		transition: width 0.4s ease;
		background-color: #e5e5e5;
	}
	
		/*クリックしたらメニューが開閉の動作*/
	.cp_fullscreenmenu .toggle{
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		opacity: 0;
	}
	
	.cp_fullscreenmenu .toggle:checked + .hamburger{
		background-color: transparent;
	}
	
	.cp_fullscreenmenu .toggle:checked + .hamburger > span{
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	
	.cp_fullscreenmenu .toggle:checked + .hamburger > span:before,
	.cp_fullscreenmenu .toggle:checked + .hamburger > span:after{
		top: 0;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	.cp_fullscreenmenu .toggle:checked + .hamburger > span:after{
		opacity: 0;
	}
	
	.cp_fullscreenmenu .toggle:checked ~ .menu{
		visibility: visible;
		pointer-events: auto;
	}
	
	.cp_fullscreenmenu .toggle:checked ~ .menu > div{
		transition-duration: 0.75s;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	
	.cp_fullscreenmenu .toggle:checked ~ .menu > div > ul{
		opacity: 1;
	}
	

	
	.cp_fullscreenmenu .toggle:checked:hover + .hamburger > span{
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
	
		/*ハンバーガー*/
	.cp_fullscreenmenu .hamburger{
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		display: block;
		width: 50px;
		height: 50px;
		padding: 5px 12px;
		cursor: pointer;
		transition: box-shadow 0.4s ease;
		border-radius: 0 0.12em 0.12em 0;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		background: rgba(109,184,254,0.5);
	}
	
	.cp_fullscreenmenu .hamburger > span{
		position: relative;
		top: 65%;
		display: block;
		width: 100%;
		height: 2px;
		transition: all 0.4s ease;
		background-color: #fefefe;
	}
	
	.cp_fullscreenmenu .hamburger > span:before,
	.cp_fullscreenmenu .hamburger > span:after{
		position: absolute;
		z-index: 1;
		top: -7px;
		right: 0;
		display: block;
		width: 100%;
		height: 2px;
		content: '';
		transition: all 0.4s ease;
		background-color: #fefefe;
	}
	
	.cp_fullscreenmenu .hamburger > span:after{
		top: 7px;
	}
	
	
	
	
	.cp_fullscreenmenu .hamburger p{
		display: inline;
		color: #FFF;
		font-size: 13px;
		top: 3px;
		left: 0;
		right: 0;
		margin: auto;
		position: absolute;
	}


/* ************************************
                 アバウト
***************************************/

	article section#about{
		background-image: none;
		background-color: #f2f2f2;
		background-attachment: scroll;
		padding: 5% 0;
	}


	article section#about div.text{
		padding: 20px 0 50px;
		width: 80%;
		margin: 80px auto 60px;
	}


	article section#about div.text h1{
		font-size: 50px;
	}


	article section#about div.text p{
		font-size: 16px;
	}



	/**********ボタン**********/
	
	article section#about div.btn{
		display: block;
		margin: 6% auto 0%;
		width: 250px;
		height: 70px;
		border: 2px solid #000;
	}


	article section#about div.btn a{
		color: #000;
		font-size: 25px;
		width: 100%;
		font-family: "游明朝", YuMincho;
	}

	article section#about div.btn span{
		line-height: 60px;
	}

	
/* **************************************
                  事業内容
*****************************************/
	
	
	article section#service{
		padding-bottom: 2%;
	}
	
	article section#service h2,article section#news h2,
	article section#acss h2{ font-size: 70px;}
	
	article section#service h2{ top: -110px;}

	article section#service h3,article section#news h3,
	article section#acss h3{ font-size: 18px;}

	article section#service h3{ top: 12px;}

	article section#service div.s_list{
		padding-top: 100px;
	}

	article section#service div.s_list img{
		max-width: 100%;
	}



	article section#service div.s_list p{
		line-height: 1.5em;
	}


	article section#service div.s_list h4{
		font-size: 20px;
	}

	article section#service div.s_list div.s_more{
		width: 150px;
		font-size: 20px;
		line-height: 1.6em;
		padding: 18px 0;
	}
	
	
	
	

/* ************************************
                 ニュース
***************************************/
	
	article section#news{
		width: 90%;
		margin: 80px auto;
	}
	
	article section#news h2{
		top: -85px;
	}

	article section#news h3{
		top: 36px;
	}
	
	article section#news div.news_box img{
		display: none;
	}


	article section#news div.news_box{
		position: relative;
		max-width: 600px;
		display: block;
		padding-top: 120px;
    	padding-bottom: 10px;
    	margin: 0 auto;
	}
	
	article section#news div.news_box div.news_list h4{
		font-size: 18px;
		padding: 10px 0 0;
		margin: 8px 0;
	}

	article section#news div.news_box div.news_list{
		width: 100%;
		margin: 30px auto 50px;
		border-bottom: 1px solid #929292;
		transition: none;
	}
	
	article section#news div.news_box div.news_list:hover{
		padding: 0;
		transform: none;
	}

	
	article section#news p.date{
		margin: 0;
	}
	
	article section#news p.date span.day{
		font-size: 18px;
	}
	
	article section#news p.date span.category{
		margin-right: 5%;
		font-size: 18px;
		padding: 1px 18px;
	}
	

	article section#news div.news_more{
		width: 220px;
		position: relative;
		background-color: #7bc3ff;
		border-radius: 35px;
		border: 2px solid #7bc3ff;
		line-height: 45px;
  		padding: 25px;
		margin: 2% auto;
		height: 45px;
		font-size: 1.5vw;
		font-family: "游明朝", YuMincho;
	}
	
	article section#news div.news_more a{
		font-size: 22px;
	}

	

/* *********************************************
                     アクセス
************************************************/
	
	
	article section#acss{
		margin: 180px auto 0;
	}

	article section#acss h2{
		top: -110px;
	}
	
	article section#acss h3{
		top: 10px;
	}


	article section#acss div.acss_box{
		width: 90%;
	}

	article section div.parking{
		max-width: 400px;
	}


	article section div.parking p{
		font-size: 14px;
	}


	article section div.parking p:first-line{
		font-size: 18px;
	}


	article section#acss div.map{
		width: 400px;
	}


	
	
	
	
/* *********************************************
                     フッター
************************************************/


	footer div.address p{
		margin-left: 30px;
		line-height: 1.5em;
		font-size: 15px;
	}

	footer div.address p:first-line{
		font-size: 22px;
	}
	
	
	footer div.contact{
		display: block;
		position: relative;
		width: 200px;
		height: 60px;
		margin: 10px auto 0;
		background-color: #FFF;
		text-align: center;
		border: 1px solid #000;
		font-size: 2vw;
	}
	
	
	footer div.contact span{
		line-height: 55px;
		font-size: 20px;
	}
	
	footer div.contact a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #000;
	}

	
	footer div.contact i.fas{
		font-weight: 600;
		font-size: 15px;
		margin-left: 25px;
		margin-right: 30px;
	}



	footer nav.banner img{
		width: 180px;
	}

	footer nav.menu{
		margin-top: 0;
	}

	
	footer div.footer_menu nav.menu ul li{
		display: block;
		font-size: 15px;
		line-height: 2em;
		margin: 2em auto;
	}
	
	footer div.footer_menu nav.menu ul li a{
		font-size: 20px;
	}
	
	footer div.footer_menu div.top{
		margin: 10% auto 6%;
		font-size: 15px;
	}
	
	footer div.footer_menu nav.menu ul li.sns{
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}
	
	footer div.footer_menu nav.menu ul li.sns a{
		margin-left: 30px;
	}
	
	footer div.footer_menu nav.menu ul li.sns a:first-of-type{
		margin-left: 0;
	}
	
	footer div.footer_menu nav.menu ul li.sns img{
		width: 50px;
	}
	
	footer div.footer_menu nav.menu ul li.sns a:after{
		display: none;
	}

	footer div.footer_menu small{
		color: #FFF;
		font-size: 12px;
	}
	
	footer nav.menu i.fab,
	footer nav.menu i.far{
		font-size: 40px;
	}


}
	
	
	
	
	
	
	
	

/* ##########################################
　　　　　　1024px以下の表示（スマホ）
############################################*/

@media screen and (max-width: 480px){
	


/* *********************************************
                     ヘッダー
************************************************/



	header p.read{
		margin-top: 0;
		margin-left: 11%;
		padding-top: 150px;
   		padding-bottom: 400px;
	}




	header nav ul li.sns{
		margin-left: 10px;
	}

	header nav ul li.sns img{
		max-width: 50%;
	}

	header nav ul li:first-of-type{
		display: none;
	}

	header nav ul li a{
		color: #FFF;
		font-weight: bold;
	}


	
	
	
	

/* ************************************
                 アバウト
***************************************/
	

	article section#service h2,article section#news h2,
	article section#acss h2{
		font-size: 60px;
	}
	
	article section#service h3,article section#news h3,
	article section#acss h3{
		font-size: 16px;
	}
	
	
	
	article section#about div.text{
		width: 90%;
		padding: 0 0 15%;
		margin: 10% auto;
	}
	
	article section#about div.text h1{
		font-size: 35px;
		margin: 50px auto 10px;
		line-height: 40px;
	}
	

	
	article section#about div.text p{
		display: block;
		font-size: 14px;
		margin-top: 15px;
		line-height: 1.5em;
	}	
	
	article section#about div.btn{
		width: 180px;
		height: 55px;
		margin-top: 30px;
		border: 1px solid #000;
	}
	
	
	article section#about div.btn a{
		font-size: 22px;
	}

	
	article section#about div.btn span{
		line-height: 50px;
	}
	
	
	
	
	
/* ************************************
                 お知らせ
***************************************/		

	article section#news h3{
		top: 18px;
	}
	
	article section#news div.news_box{
		padding-top: 80px;
	}
	
	article section#news div.news_box div.news_list{
		margin: 30px auto 40px;
	}
	
	article section#news div.news_box div.news_list h4{
		font-size: 16px;
		padding: 5px 0 0;
	}
	
	
/* ************************************
                 事業内容
***************************************/	
	
	article section#service h2{
		top: -95px;
	}

	article section#service h3{
		top: 8px;
	}
	
	article section#service div.s_list{
		display: block;
		padding-top: 60px;
	}
	
	article section#service div.s_list div{
		width: 100%;
		margin: 20% auto 10%;
		border: none;
		padding: 0;
	}
	
	article section#service div.s_list div:first-child{
		margin: 8% auto;
	}
	
	article section#service div.s_list img{
		max-width: 90%;
		display: block;
		margin: 0 auto;
	}

	article section#service div.s_list h4{
		font-size: 22px;
		margin: 25px auto 0;
	}
	
	article section#service div.s_list p{
		font-size: 15px;
		margin: 10px auto 0;
		line-height: 1.5em;
	}

	article section#service div.s_list div.s_more{
		width: 200px;
		line-height: 40px;
		padding: 20px 0;
		margin: 20px auto;
		font-size: 22px;
		height: 45px;
	}
	
	

	
	
	
	

	
/* ************************************
                 アクセス
***************************************/
	

	article section#acss{
		margin: 25% auto 0;
	}
	
	
	article section#acss h2{
		top: -90px;
	}
	
	article section#acss h3{
		top: 10px;
	}
	
	article section#acss div.acss_box{
		margin: 0 auto;
		display: block;
		padding-top: 8%;
		padding-bottom: 0;
	}
	
	
	
	article section#acss div.acss_box p.pc{
		display: none;
	}
	
	article section#acss div.acss_box p.sp{
		display: block;
		font-size: 13px;
	}	

	article section div.parking{
		max-width: 100%;
		text-align: center;
		margin-top: 50px;
	}
	
	article section div.parking p{
		font-size: 14px;
		line-height: 1.5em;
		text-align: left;
	}
	
	
	article section div.parking p:first-line{
		font-size: 18px;
		line-height: 2em;
	}
	
	article section div.parking p span{
		font-size: 14px;
		line-height: 1.5em;
		margin-top: 5px;
	}

	
	article section div.parking img{
		max-width: 100%;
	}
	
	
	article section#acss div.map{
		width: 100%;
		height: 250px;
		margin-top: 40px;
		margin-left: 0;
	}
	
	
	
/* ************************************
                 フッター
***************************************/
	
	footer div.footer_menu div.top{
		padding: 15px 0px 20px;
	}
	

	footer div.address{
		width: 300px;
		padding-top: 10%;
		display: block;
		text-align: center;
	}
	
	footer div.address p{
		width: 100%;
		margin: 0 auto;
		line-height: 1.5em;
		font-size: 14px;
	}
	
	footer div.address p:first-line{
		font-size: 20px;
	}
	
	footer div.address p span{
		margin-top: 10px;
	}
	
	footer div.address img{
		width: 100px;
	}
	
	
	
	footer div.contact{
		width: 180px;
    	height: 50px;
    	line-height: 50px;
		border: 1px solid #000;
		margin: 20px auto 50px;
	}

	footer div.contact span{
		line-height: 50px;
		font-size: 18px;
		margin-left: 10px;
	}

	footer nav.banner img{
		width: 28%;
	}

	footer nav.banner ul li{
		margin: 0px 8px;
	}
	

	footer nav.menu i.fab,
	footer nav.menu i.far{
		font-size: 40px;
	}
	

	
}