@charset "UTF-8";

@media screen and (min-width: 1000px) {

	main{
		width : 100%;
		height : auto;
		margin : 0 auto;
		padding-top : 80px;
	}
	
	.topImg{
		position: relative; /*親要素にrelative*/
	}
	
	.topImg h1{
		position: absolute; /*重ねたい子要素にabsolute*/
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%); /*ベンダープレフィックス*/
		-webkit-transform: translate(-50%,-50%); /*ベンダープレフィックス*/
		transform: translate(-50%,-50%); /*センター寄せの修正*/
		color: #fff;
	}

	.topImg img{
		width : 90%;
		margin : 0 5%;
		display: block;
		box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
	}
	
	/* フェードイン */
	/* 下から上にフェードイン */
	.fadeInUp {
		animation-name: fadeInUp; /* キーフレームアニメーションを指定 */
		animation-duration: 1.5s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		transform: translateY(50px);
		opacity: 0;
	}
	@keyframes fadeInUp {
		0% {
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* フェードイン */
	.fadeIn {
		animation-name: fadeIn; /* キーフレームアニメーションを指定 */
		animation-delay: 0.5s; /* アニメーションの開始時間の遅延 */
		animation-duration: 1s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		opacity: 0;
	}
	@keyframes fadeIn {
		0% {
		}
		100% {
			opacity: 1;
		}
	}

	.wrap{
		width : 100%;
		height : auto;
		margin : -100px auto 0 auto;
		padding : 160px 0 60px 0;
		background-color :#E8ECEF;
	}
	
	.container{
		width :60% ;
		min-width : 800px;
		margin : 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.flexbox1{
		width :50% ;
		margin : 0 30px 0 0;
		background-color : #fff;
		padding: 30px;  
		border-radius:30px;
	}

	.flexbox2{
		width :50% ;
		margin : 0 auto 0 auto;
		background-color : #fff;
		padding: 30px;  
		border-radius:30px;
	}

	address a:link{
		display: block;
		text-align : center;
		padding-top : 10px;
		font-size : 1.2em;
		font-weight : 700;
		font-style : normal;
		color : #f3a7a5;
		transition: .3s;
	}

	address a:visited{
		color : #f3a7a5;
	}
	
	.formbox{
		width :60%;
		min-width : 800px;
		margin : 30px auto 0 auto;
		border-radius:30px;
		padding : 30px 0 20px 0;
		background-color : #fff;
	}
	
	.formmailer-embed{
		padding-top : 20px;
	}
}

/* ==================== */
/*        スマホ        */
/* ==================== */

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

	main{
		width : 100%;
		height : auto;
		padding-top : 60px;
	}

	.topImg{
		position: relative; /*親要素にrelative*/
	}
	
	.topImg h1{
		position: absolute; /*重ねたい子要素にabsolute*/
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%); /*ベンダープレフィックス*/
		-webkit-transform: translate(-50%,-50%); /*ベンダープレフィックス*/
		transform: translate(-50%,-50%); /*センター寄せの修正*/
		color: #fff;
	}

	.topImg img{
		width: 100%;
		height: 200px;
		object-fit: cover;
		margin : 0 auto;
		display: block;
		box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
	}

	/* フェードイン */
	.fadeIn {
		animation-name: fadeIn; /* キーフレームアニメーションを指定 */
		animation-duration: 1.5s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		opacity: 0;
	}
	@keyframes fadeIn {
		0% {
		}
		100% {
			opacity: 1;
		}
	}
	
	.wrap{
		width : 100%;
		height : auto;
		margin :  0 auto;
		padding : 30px 0;
		background-color :#E8ECEF;
	}
	
	.container{
		width : 100%;
		height : auto;
		margin : 0px auto;
	}

	.flexbox1{
		width : 88%;
		max-width : 600px;
		margin : 0 auto;
		padding: 30px 3%; 
		background-color : #fff;
		border-radius:30px;
	}
	
	.flexbox2{
		width : 88%;
		max-width : 600px;
		margin : 30px auto;
		padding: 30px 3%; 
		background-color : #fff;
		border-radius:30px;
	}

	address a:link{
		display: block;
		text-align : center;
		padding-top : 10px;
		font-size : 1.1em;
		font-weight : 700;
		font-style : normal;
		color : #f3a7a5;
		transition: .3s;
	}

	address a:visited{
		color : #f3a7a5;
	}
	
	.formbox{
		width : 88%;
		max-width : 600px;
		margin : 30px auto 0 auto;
		padding: 30px 3% 0 3%; 
		background-color : #fff;
		border-radius:30px;
	}
	
	.formmailer-embed{
		margin : 0 auto;
		display: block;
		padding-top : 30px;
	}
}

/* ==================== */
/*        ホバー        */
/* ==================== */

@media (hover: hover) {
	address a:hover{
		opacity:0.7;
	}
}

@media (hover: none) {
	address a:active{
		transform: scale(1.05);
	}
}