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

@media (max-width: 1200px){
	.pc{
		display: none !important;
	}
	.contents_half_r{
		width: 80%;
		margin: auto;
	}
	.wrap80{
		padding: 0 8%;
	}
	.bg_img01{
		height: auto;
		background: 
			linear-gradient(to bottom, rgba(248,244,230,1) 40%,rgba(248,244,230,0),rgba(248,244,230,0)  ),
			url("../img/img05_02.jpg") ;
		background-repeat: no-repeat;
		background-size: cover,100%;
		background-position: center ,center bottom;
		padding-bottom: 600px;
	}
	.subtitle{
		height: 380px;
	}
	.subtitle h2{
		left: 80px;
		font-size: 2.5em;
	}
	.mb100{
		margin-bottom: 70px;
	}
	.mt100{
		margin-top: 70px;
	}
	
}

/* Tablet */
@media (max-width: 959px){
	.site-header h1{
		margin-left: 10px;
	}
	.site-header h1 img{
		width: 300px;
		padding-left: 15px;
	}
	.slide_copy2{
		top: 120px;
		right: 30px;
		bottom: auto;
	}
	.slide_copy2 img{
		width: 80px;
	}
	.footer_wrap{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.contents_half_r{
		width: 90%;
		margin: auto;
	}
	.bg_img01{
		height: auto;
		background: 
			linear-gradient(to bottom, rgba(248,244,230,1) 55%,rgba(248,244,230,0),rgba(248,244,230,0)  ),
			url("../img/img05_02.jpg") ;
		background-repeat: no-repeat;
		background-size: cover,100%;
		background-position: center ,center bottom;;
		padding-bottom: 500px;
	}
	.bg_img02{
		background-position: bottom 60% center;
		background-size: 100%;
	}
	.card001{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	} 
	.card001 figure img{
		max-width: 450px;
		display: block;
		margin: auto;
	}
	.card001 .point{
		width: 100%;
		max-width: 500px;
		margin: 15px auto;
		padding: 15px;
	}
	
	.card002{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}
	.card002 .img{
		text-align: center;
	}
	.card002 .img img{
		max-width: 600px;
	}
	.bg_machinami{
		aspect-ratio: auto;
		margin-bottom: 50px;
		padding-bottom: 100px;
	}

	.card001_e figure.event{
		width: calc(100% / 3 - 20px);
		padding: 8px;
		align-self: stretch;
	}
	.photo_flex{
		flex-wrap: wrap;
	}
	.photo_flex .img4-3{
		width: calc(100% / 2);
	}
	
	/* サブページタイトル==================== */
	.subtitle{
		height: 400px;
		margin: 0 auto 10px;
	}
	.sub_img01{
		right: 0;
		height: 300px;
		width: calc(100% - 280px);
	}
	.subtitle h2{
		top: auto;
		bottom: 50px;
		left: 30px;
		font-size:2.5em;
	}
	.breadcrumb-box{
		left: auto;
		right: 15px;
		bottom: 10px;
		text-align: right;
	}
	.contents_mail{
		padding: 10px;
	}
	.tel_button{
		width: 95%;
	}
	input[type='text'] ,input[type='date'] , textarea{
		width: 100% !important;
	}
	#mailform table th,
	#mailform table td{
		display: block;
		width: 100%;
	}
	
	.reverse{
		flex-direction: column-reverse;
	}
	.staff_wrap{
		display: flex;
	}
	.staff_wrap figure{
		width: 100%;
		max-width: 700px;
		margin: 0 auto 30px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.staff_wrap figure img{
		width: 200px;
		height: 200px;
	}
	.link_banner{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.link_banner li{
		width: 100%;
	}
	.link_banner li+li{
		margin-left: 0;
	}
	.presen_copy{
		display: block;
		margin: auto;
	}
	
}

/* sp */
@media (max-width: 750px){

	.pctb{
		display: none !important;
	}
	.wrap80{
		padding: 0 5%;
	}
	.slide_wrap{
		height: 70vh;
		min-height: 600px;
	}
	.top_slider{
		left: 10px;
		width: calc(100% - 20px);
	}
	.top_slider .slider{
		max-width: 100%;
		overflow: hidden;
	}
	.top_slider .slider li{
		height: calc(70vh - 130px);
		min-height: 470px;
	}
	.slide_copy img{
		max-width: 500px;
	}
	.slide_img01{
		right: 30px;
	}
	.slide_img01 img{
		width: 70px;
	}
	img.ring{
		max-width: 400px;
		left: calc(50% - 200px);
	}
	.contents_half_r{
		width: 100%;
		margin: auto;
	}
	.bg_img01{
		height: auto;
		background: 
			linear-gradient(to bottom, rgba(248,244,230,1) 60%,rgba(248,244,230,0),rgba(248,244,230,0)),
			url("../img/img05_02.jpg") ;
		background-repeat: no-repeat;
		background-size: cover,750px;
		background-position: center ,center bottom;;
		padding-bottom: 350px;
	}
	.news{
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}
	.news h3{
		border-right:none;
		padding: 10px;
	}
	.icon_flex{
		flex-wrap: wrap;
	}
	.icon_flex li{
		width: calc(100% / 3 - 20px);
	}

	.top_link{
		position: absolute;
		bottom:0px;
		top: auto;
		right: 7px;
		z-index: 10;
		width: 150px;
		text-align: center;
		padding: 0 10px;
	}

	.contents_link{
		flex-direction: column-reverse;
		align-items: center;
		justify-content:space-around;
		max-width: 500px;
		margin: auto;
	}
	figure.effect-chico{
		height: 300px
	}
	figure.effect-chico figcaption::before {
		top: 20px;
		right: 20px;
		bottom: 20px;
		left: 20px;
	}
	figure.effect-chico h3{
		position: absolute;
		top:25px;
		left: 25px;
		font-size: 1.5em;
	}
	figure.effect-chico h4{
		bottom: 25px;
		right: 25px;
	}
	figure.effect-chico p{
		position: absolute;
		top:50px;
		left: 25px;
		right: 25px;
		opacity: 1;
		transform: scale(1);
		line-height: 150%;
		
	}
	

	.area{
		background-size: 100%;
	}
	.area_in{
		width: 100%;
		background-color: rgba(255,255,255,0.49);
		padding: 10px;
	}
	.top_rec_flex{
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}

	.footer_in ul{
		margin: auto;
		max-width: 300px;
	}
	p.catch_footer{
		font-size: 1.2em;
		padding: 10px;
	}
	.flex_contents{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.subtitle h2{
		bottom: auto;
		top: 120px;
		left: 15px;
		font-size: 2rem;
	}
	.bg_subtitle{
		padding: 35px 0 25px 50px;
	}
	.sub_img01{
		width: 100%;
		bottom: auto;
		top: 100px;
		height: 300px;
		background: linear-gradient( to right ,rgba(248,244,230,1) 20%,rgba(248,244,230,0.5) 30%,rgba(248,244,230,0)),url("../img/img07.jpg");
		background-repeat: no-repeat;
		background-size:cover, 80%;
		background-position:center ,right bottom;
	}
	
	.card003{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;
	}
	.line01 table th::after{
		display: block;
		content: "";
		width: 2.5rem;
		height: 3px;
		background-color: #e170a4;
		position: absolute;
		top:calc(50% + 1rem);
		right:auto;
		left: 15px;
	}

	
	/* メールフォーム======================================== */
	.contact_top ul{
		flex-direction: column;
	}
	.contact_top ul li{
		margin: 10px;
	}
	.contact_top ul li :last-child{
		margin: 10px;
	}
	.mailform{
		padding: 10px;
	}
	input[type='text'] ,input[type='date'] , textarea{
		width: 100% !important;
	}
	.tel_button{
		width: 100%;
		max-width: 600px;
	}
	.tel_button a{
		width: 100%;
	}
	
	.anchor_link ul li{
		font-size: 0.8rem;
	}
	
	.flow_wrap02,.flow_wrap03{
		width: 100%;
		padding: 0.5em;
	}
	.flow_wrap02 dl,.flow_wrap03 dl{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flow_wrap02 dd,.flow_wrap03 dd{
		padding: 0.5em;
	}
	
	.card001_e figure.event{
		width: calc(100% / 2 - 10px);
		padding: 8px;
	}
	.mb100{
		margin-bottom: 50px;
	}
	.mt100{
		margin-top: 50px;
	}


}
@media (max-width: 450px){
	
	.wrap80{
		padding: 0;
	}
	.site-header h1 img{
		width: 270px;
	}
	.slide_copy img{
		max-width: 350px;
	}
	img.ring{
		max-width: 300px;
		left: calc(50% - 150px);
	}
	.simple01 table th,.simple01 table td{
		display: block;
		width: 100%;
	}
	.simple01 table th{
		padding: 1em 1em 0.5em;
	}
	.simple01 table td{
		padding:0.5em 1em 1em;
	}
	.line01 table th{
		padding: 1rem 0.5rem;
		min-width: 4rem;
	}
	.line01 table td{
		padding: 1rem 0.5rem;
	}
	.line01 table th::after{
		left: 0.5rem;
	}
	/* サブページタイトル==================== */
	.subtitle{
		height: 400px;
	}
	.subtitle h2{
		top: 110px;
		font-size: 1.5em;
	}
	.sub_img01{
		width: 100%;
		bottom: auto;
		top: 100px;
		height: 300px;
		background: url("../img/img08.jpg");
		background-repeat: no-repeat;
		background-size:cover;
		background-position:left bottom;
	}
	.bg_subtitle{
		padding: 35px 0 25px 30px;
	}
	#mailform{
		padding: 20px 0;
	}
	#mailform table th{
		padding: 1em 0;
	}
	#mailform table td{
		padding: 0 0 1em;
	}

	


}

@media (max-width: 450px){
	.bg_img01{
		height: auto;
		background: 
			linear-gradient(to bottom, rgba(248,244,230,1) 60%,rgba(248,244,230,0),rgba(248,244,230,0)),
			url("../img/img05.jpg") ;
		background-repeat: no-repeat;
		background-size: cover,750px;
		background-position: center ,center bottom;;
		padding-bottom: 350px;
	}
}