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

@media (max-width: 1200px){
	.site-header{
		height: 80px;
	}
	.site-header h1{
		font-size: 2.5rem;
	}
	.site-header h1 img{
	}
	.top_nav{
		display: none;
	}
	.card001{
		max-width: 960px;
		margin: auto;
	}
	.card001 figure{
		width: calc(100% / 3 - 20px);
	}
	.card002_link{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.card002_link .txt{
		width: 100%;
		max-width: 960px;
	}
	.contents_link{
		padding: 50px 15px;
	}
	.wrap80{
		padding: 10px 5%;
	}
	.services_wrap{
		margin: auto;
		width: calc(100% - 20px);
	}
}

/* Tablet */
@media (max-width: 959px){
	.pc{
		display: none !important;
	}
	.site-header h1{
		margin-left: 10px;
	}
	.bg_cut01_tr,
	.bg_cut01_bl{
		background-size: 50%;
	}

	.footer_wrap{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.footer_contact{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.card002,
	.card003{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}
	.card002 .img{
		text-align: center;
	}
	.card002 .img img{
		max-width: 600px;
	}
	.card002 .txt{
		padding: 15px;
	}
	
	.point h3 span.ja{
		display: block;
	}
	.contents_half_r{
		width: 70%;
	}

	.f_revers{
		flex-direction: column-reverse;
	}

	.txt_wrap_left,.txt_wrap_right{
		width: 100%;
		margin:0 ;
	}

	.breadcrumb-box{
		font-size: 80%;
		left: 70px;
		bottom: 10px
	}
	.motto_flex{
		flex-wrap: wrap;
	}
	.motto_flex li{
		width: calc(100% / 3 - 20px);
	}
	
	
	
	.reverse{
		flex-direction: column-reverse;
	}
	/*モバイルのみ画像比率16：9*/

	/* ビフォーアフター==================================================  */
	.before_after{
		flex-direction: column;
		justify-content: center;
	}
	.before_after .ba_img {
		max-width: 380px;
		width: calc(100% - 30px);
		margin: auto;
	}
	.ba_arrow{
		transform: rotate(90deg);
		margin: 10px;
	}
}

/* sp */
@media (max-width: 768px){
	.pctb{
		display: none !important;
	}
	.bg_grad02{
		background:linear-gradient(to bottom,transparent 20%, #e1f2fa 20%);
	}
	.bg_cut01{
		padding-bottom: 180px;
		background-size: 150px;
		background-position: bottom right 5%;
	}
	.site-header h1 img{
		height: 40px;
	}
	.motto_flex li img{
		width: 100%;
		max-width: 200px;
		padding: 0;
	}
	
	.contents_half_r{
		width: 100%;
	}
	.contents_link{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		max-width: 500px;
		margin: auto;
		padding: 30px 10px;
		background-position: right 10% bottom 0;
		background-size: 170px;
	}
	.contents_link div{
		width: 100%;
	}
	figure.effect-chico,
	figure.effect-chico img {
		aspect-ratio: 16 / 9;
	}
	figure.effect-chico h4 {
		writing-mode:horizontal-tb;
	}
	.line02 table th{
		display: block;
		width: 100%;
		border-bottom: none;
		text-align: left;
		padding-bottom: 0;
	}
	.line02 table td{
		display: block;
		width: 100%;
		border-bottom: solid 3px #0fbf4a;
	}
	
	.line02 dl{
		flex-direction: column;
		align-self: flex-start;
		justify-content: flex-start;
	}
	.button_wrap{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.button_wrap .gap{
		width: auto;
		height: 30px;
	}
	.footer_contact{
		flex-direction: column;
	}
	.flex_contents{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	footer h2{
		text-align: center;
	}
	footer h2 img{
		width: calc(100% - 60px);
	}
	.wrap80{
		padding: 10px 0;
	}

	
	/* メールフォーム======================================== */
	#mailform{
		padding: 10px 0;
	}
	#mailform table th,
	#mailform table td{
		display: block;
		width: 100%;
		padding: 0.5rem 0;
	}
	#mailform table td{
		padding-bottom: 1rem;
	}
	
	input[type='text'] ,input[type='date'] , textarea{
		width: 100% ;
	}
	.tel_button{
		width: 100%;
		max-width: 600px;
	}
	.tel_button a{
		width: 100%;
	}
	.flex_btn{
		display: block;
		width: 100%;
	}
	.img_center{
		margin-right: 15px;
	}
	.work_wrap p,.work_wrap ul,.work_wrap dl{
		padding-left: 0;
	}

}
@media (max-width: 450px){
	.site-header h1 img{
		height: auto;
		width: calc(100% - 70px);
		max-width: 350px;
	}
	.w1600{
		width: calc(100% - 30px);
	}
	.bg_w_inner{
		padding: 50px 15px;
	}
	.card003 .txt{
		padding: 10px;
	}
	.bg_cut01{
		padding-bottom: 150px;
		background-size: 120px;
	}

	.dl_border01 dl{
		display: block;
		width: 100%;
	}
	.dl_border01 dl dt{
		width: 100%;
		padding: 1em 1em 0.5em;
	}
	.dl_border01 dl dd{
		width: 100%;
		padding:0.5em 1em 1em;
	}
	.sbtn a{
		width: 100%;
		max-width: 300px;
	}



}