@charset "UTF-8";
/* ======================================== パソコン向けスタイル 			======================================== */
@media only screen and (min-width:480px) {

	/* Eye Catch */
  section#eye_catch #top_image			{position: relative; overflow: hidden; box-shadow:inset 0 0 10px 15px #fffcff;}
	section#eye_catch #top_image img		{position: relative; width: 100%; z-index: -1;}
	section#eye_catch #top_image h2 		{position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); font-size: min(3.5vw,2.7rem); background-color: white; width:70%; text-align: center; vertical-align: top;  }
	section#eye_catch #top_image h3 		{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: min(2.8vw,1.8rem); background-color: white; padding: 0 1rem;}

	/* Main Article 1st */
	section#service				{display: flex;align-items: center; justify-content: space-between;	padding-top: 3rem;}
	section#service article 	{padding: 0 0 0 10rem; width: 60%; font-size: 0.9rem; box-sizing: border-box;}
	section#service article h2 	{font-size: min(3.2vw,3.2rem); padding-bottom: 1rem;}
	section#service .img-frame 	{width:700px; height: 400px; overflow: hidden; margin: 0; padding: 0 ; position: relative;}
	section#service .backboard	{display: block; width: 300px; height: 300px; background-color: #f7e2bc; position: absolute; top:0px; left:10rem;}
	.img-01, .img-02, .img-03	{width:300px; height:300px; background-size: cover; background-repeat: no-repeat; position: absolute; top:2rem; left:7.5rem;}
	.img-01						{background-image: url(../img/slide01.jpg); animation: slide-animation-01 20s infinite;}
	.img-02						{background-image: url(../img/slide02.jpg); animation: slide-animation-02 20s infinite;}
	.img-03						{background-image: url(../img/slide03.jpg); animation: slide-animation-03 20s infinite;}
	@keyframes slide-animation-01 {
		  0% 	{opacity: 0; }
		 30%	{opacity: 1; }
		 40%	{opacity: 0.3; }
		100%	{opacity: 0; }
	}
	@keyframes slide-animation-02 {
		  0% 	{opacity: 0;}
		 30%	{opacity: 0;}
		 40%	{opacity: 0.7;}
		 60%	{opacity: 1;}
		 70% 	{opacity: 0.3;}
		100%	{opacity: 0;}
	}
	@keyframes slide-animation-03 {
		  0% 	{opacity: 0;}
		 60%	{opacity: 0;}
		 70%	{opacity: 0.7;}
		 90%	{opacity: 1;}
		100%	{opacity: 0;}
	}

	/* Main Article 2nd 		画像は300pxの正方形を使用	*/
	section#galary				{display: flex;align-items: center; justify-content: space-between;	padding-top: 3rem;}
	section#galary article 		{padding: 0 5rem 0 5rem; width: 50%; font-size: 0.9rem; box-sizing: border-box;}
	section#galary article h2 	{font-size: min(3.2vw,3.2rem); padding-bottom: 1rem;}
	section#galary .img-frame 	{width:700px; height: 400px; overflow: hidden; margin: 0; padding: 0 ; position: relative;}
	.backboard					{display: block; width: 300px; height: 300px; background-color: #f7e2bc; position: absolute; top:0px; left:12rem;}
	section#galary img			{width:300px; height:300px; background-size: cover; background-repeat: no-repeat; position: absolute; top:2rem; left:10rem;}
	section#galary a 			{display: inline-block; margin-top: 3rem;}

	/* Main Article 3rd */
	section#prof				{padding: 3rem 0 3rem 0;}
	section#prof article 		{display: flex;align-items: center; justify-content: space-between;	padding: 0 5rem 0 10rem; width: 100%; font-size: 0.9rem; box-sizing: border-box;}
	section#prof h2 			{display: block; font-size: min(3.2vw,3.2rem); padding: 0 0 1rem 10rem;}
	section#prof .prof_left		{display: block; width: 50%; }
	section#prof .prof_right 	{display: block; width: 35%; }
	section#prof .prof_right img {margin-bottom: 1rem; width: 150px;}	
	section#prof .prof_right address {display: inline;}
	section#prof ul 	{padding-top: 1rem;}

	/* Main Article 4th */
	section#schedule				{display: flex;align-items: center; justify-content: space-between;	padding-top: 3rem;}
	section#schedule article 		{padding: 0 5rem 0 5rem; width: 50%; font-size: 0.9rem; box-sizing: border-box;}
	section#schedule article h2 	{font-size: min(3.2vw,3.2rem); padding-bottom: 1rem;}
	section#schedule .img-frame 	{width:700px; height: 400px; overflow: hidden; margin: 0; padding: 0 ; position: relative;}
	.backboard					{display: block; width: 300px; height: 300px; background-color: #f7e2bc; position: absolute; top:0px; left:12rem;}
	section#schedule img			{width:300px; height:300px; background-size: cover; background-repeat: no-repeat; position: absolute; top:2rem; left:10rem;}


}
/* ======================================== モバイル向けスタイル 		======================================== */
@media only screen and (max-width:479px) {


	/* Main Article 1st */
	section#service				{padding-top: 3rem;}
	section#service article 	{padding: 1vw; width: 100%; font-size: 0.9rem; box-sizing: border-box;}
	section#service article h2 	{font-size:5vw; padding-bottom: 1rem; text-align: center;}
	section#service .img-frame 	{width:100%; height: 330px; overflow: hidden; margin: 0; padding: 0 ; position: relative;}
	section#service .backboard	{display: block; width: 200px; height: 200px; background-color: #f7e2bc; position: absolute; top:1rem; left:30vw;}
	.img-01, .img-02, .img-03	{width:200px; height:200px; background-size: cover; background-repeat: no-repeat; position: absolute; top:3rem; left:20vw;}
	.img-01						{background-image: url(../img/slide01.jpg); animation: slide-animation-01 20s infinite;}
	.img-02						{background-image: url(../img/slide02.jpg); animation: slide-animation-02 20s infinite;}
	.img-03						{background-image: url(../img/slide03.jpg); animation: slide-animation-03 20s infinite;}
	@keyframes slide-animation-01 {
		  0% 	{opacity: 0; }
		 30%	{opacity: 1; }
		 40%	{opacity: 0.3; }
		100%	{opacity: 0; }
	}
	@keyframes slide-animation-02 {
		  0% 	{opacity: 0;}
		 30%	{opacity: 0;}
		 40%	{opacity: 0.7;}
		 60%	{opacity: 1;}
		 70% 	{opacity: 0.3;}
		100%	{opacity: 0;}
	}
	@keyframes slide-animation-03 {
		  0% 	{opacity: 0;}
		 60%	{opacity: 0;}
		 70%	{opacity: 0.7;}
		 90%	{opacity: 1;}
		100%	{opacity: 0;}
	}

	/* Main Article 2nd 		画像は300pxの正方形を使用	*/
	section#galary				{display: flex; flex-direction: column-reverse; align-items: flex-start; padding-top: 0;}
	section#galary article 		{padding: 1vw; width: 100%; font-size: 0.9rem; box-sizing: border-box;}
	section#galary article h2 	{font-size: 5vw; padding-bottom: 1rem; text-align: center;}
	section#galary .img-frame 	{width:100%; height: 330px; overflow: hidden; margin: 0; padding: 0 ; position: relative;}
	section#galary .backboard	{display: block; width: 200px; height: 200px; background-color: #f7e2bc; position: absolute; top:1rem; left:30vw;}
	section#galary img			{width:200px; height:200px; background-size: cover; background-repeat: no-repeat; position: absolute; top:3rem; left:20vw;}
	section#galary a 			{display: inline-block; margin-top: 1rem;}

	/* Main Article 3rd */
	section#prof				{padding-bottom: 3rem;}
	section#prof article 		{padding: 1vw; width: 100%; font-size: 0.9rem; box-sizing: border-box; }
	section#prof h2 			{display: block; font-size: 5vw; padding: 0 0 4vw 0; text-align: center;}
	section#prof .prof_left		{display: block; width: 100%; padding-bottom: 4vw;}
	section#prof .prof_left h3	{margin-bottom: 4vw;}		
	section#prof .prof_right	{display: block; width: 100%; }
	section#prof .prof_right img {display: none; visibility: hidden;}	
	section#prof .prof_right address {display: inline;}
	section#prof .ul 	{padding-top: 1rem;}

	/* Main Article 4th */
	section#schedule				{padding: 0 0 5vw 0;}
	section#schedule article 		{padding: 1vw; width: 100%; font-size: 0.9rem; box-sizing: border-box;}
	section#schedule article h2 	{font-size: 5vw; padding-bottom: 1rem; text-align: center;}
	section#schedule .img-frame 	{display: none; visibility: hidden;}


}