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

/*================================================
 *  基本設定
 ================================================*/

	body {
		margin: 0px;
		padding: 0px;
		background-color: #e3f2fd;
	}

	#header {
		position:fixed;
	}

	.index-back {
		background-color: white;
		z-index: -80000;
	}

/********* レスポンシブ設定 ********************************************************************************************/
/********* スマートフォンA -600px、スマートフォンB 601px-850、タブレット 851-1200px、パソコン 1200-                         **************/
/********************************************************************************************************************/


/*========================================================================================================
 *  パソコンメニュー用　基本 すべての画面サイズ これをベースに画面サイズごとに設定を変える
 ========================================================================================================*/

				/*TOPイメージ画像 スライドショー*/

							.top-img img{
								width:100%;
							}


				/*********** 内容　[パソコン] ***************************************************/

							.top1 {
								text-align: center;
								margin: 0 auto;
								margin-top: 350px;
								height: 800px;
							}
							.top1 img{
								max-width: 1000px;
								margin: 0 auto;
								text-align: center;
							}


					/*********** ボタンデザイン　[パソコン] ***************************************************/

							a.btn_06 {
								display: block;
								vertical-align: middle;
								text-decoration: none;
								width: 250px;
								padding: 1rem 4rem;
								font-weight: bold;
								border-radius: 100vh;
								border-bottom: 7px solid #0686b2;
								background: #27acd9;
								color: #fff;
							}
							a.btn_06:hover {
								margin-top: 6px;
								border-bottom: 1px solid #0686b2;
								color: #fff;
							}
							.top1-btn {
								margin: 0 auto;
								text-align: center;
								margin-top: -150px;
								margin-left: 25%;
							}
							.top2-btn {
								margin: 0 auto;
								text-align: center;
								margin-top: -200px;
								margin-left: 25%;
							}


						
					/*********** お問い合わせ　Contact Us 設定　[パソコン] ******************************************/
					
							.contact {
								display: flex;
								flex-direction: row; 	/* 右方向に横並び */
								justify-content: center;
								margin-top: 30px;
								margin-bottom: 50px;
							}
							
							.contact-tel {
							    width: 350px;
							}
					
							.contact-web {
							    width: 350px;
								margin-top: 5px;
								margin-left: 40px;
							}


.blue{
	display:block;
	position: relative;
	background-color: #e3f2fd;
	height: 150px;
	width: 100%;
	margin-top: -200px;
	z-index: 99999999;
}



/*========================================================================================================
 *  タブレット向けデザイン  画面幅851px以上1200以下
 ========================================================================================================*/

				@media screen and (min-width: 851px) and (max-width:1200px) {
					
	
					.slider {
								z-index: -30000;
							}

							.caption {
								display: flex;
								justify-content: center;
								margin-left: auto; 
								margin-right: auto;
								width: 100px;
								margin-top: -600px;
								z-index: 100000;
							}
							.caption img {

							}	
					
					
					
					#contents {
								margin-top: 0px;
								padding-top: 0px;
								margin: 0 auto;
								z-index: -500005;
								max-width: 1024px;
							}
					
					.news-box{
								margin: 0 auto;
								text-align: center;
								width: 850px;
								height: 520px;
								position: relative;
							}
							.box {
								margin-top:50px; 
								margin:0 auto; 
								position: relative;
								margin: 0 auto;
								width: 850px;
								height: 520px;
							}
							.linkbox {
								width: 850px;
								height: 520px;
								position: absolute;
							}
							.box iframe {
								width: 850px;
								height: 520px;
							}
					

					
					/*********** お問い合わせ　Contact Us 設定　[タブレット 851-1200] ******************************************/
					
							.contact {
								display: flex;
								flex-direction: row; 	/* 右方向に横並び */
								justify-content: center;
								margin-top: 30px;
								margin-bottom: 50px;
							}
							
							.contact-tel {
							    width: 350px;
							}
					
							.contact-web {
							    width: 350px;
								margin-top: 5px;
								margin-left: 40px;
							}

					}



/*=======================================================================================================
 *  スマートフォンB向けデザイン　画面幅600px以上850以下
  ========================================================================================================*/

			/*** メニュー部分はスマートフォン用、内容はunder900、スマートフォン用。共用部分に注意 *********/
				@media screen and (min-width:601px) and (max-width:850px) {
					
							body {
								max-width: 850px;
							}
					
					
							.slider {
								z-index: -30000;
								width:100vw;
 								height:100vh;
								margin-bottom: -120px;
							}

							.caption {
								position: absolute;
								left: 50%;
								transform: translateX(-50%);
								bottom:200px;
								z-index: 100000;
							}
							.caption img {
								width: 250px;
								height: 100%;
							}
							.circle {
								position: absolute;
								bottom:50px;
							}
							.circle img {
								width: 100%;
							}

					
							#contents {
								margin: 0;
								z-index: -500005;
								max-width: 850px;
							}
					
							.news-box{
								margin: 0 auto;
								text-align: center;
								width: 90%;
								height: 520px;
								position: relative;
							}
							.box {
								margin-top:50px; 
								margin:0 auto; 
								position: relative;
								margin: 0 auto;
								width: 90%;
								height: 520px;
							}
							.linkbox {
								width: 90%;
								height: 520px;
								position: absolute;
							}
							.box iframe {
								width: 90%;
								height: 520px;
							}
					
					
					/*********** キャッチコピー設定　[スマホB 600-850]***************************************************/
									
				
							.catch-copy {
								max-width: 850px;
								margin: 0 auto;
								margin-top:10px;
							}
					
							.catch-copy-text {
								width: 500px;
								margin-top: 10px;
							}
					
					
					/*********** 内容　[スマホB 600-850]***************************************************/
										
					.top1 img {
						width: 100%;
						margin-top: 80px;
					}
					.top2 img {
						width: 100%;
					}
					
					
					/*********** ボタンデザイン　[パソコン] ***************************************************/

							a.btn_06 {
								display: block;
								text-align: center;
								vertical-align: middle;
								text-decoration: none;
								width: 200px;
								margin: auto;
								padding: 1rem 3rem;
								font-weight: bold;
								border-radius: 100vh;
								border-bottom: 5px solid #0686b2;
								background: #27acd9;
								color: #fff;
							}
							a.btn_06:hover {
								margin-top: 6px;
								border-bottom: 1px solid #0686b2;
								color: #fff;
							}
					
					/*********** お問い合わせ　Contact Us 設定　[スマホB 600-850] ******************************************/
					
							.contact {
								display: flex;
								flex-direction:column;/* 右方向に横並び */
								justify-content: center;
							
							}
							
							.contact-tel {
							    width: 100px;
								margin: 0 auto;
							}
							.contact-tel img {
								flex-shrink: 0;
								max-width: none;
								margin-left: -100px;
							}
					
							.contact-web {
							    width: 300px;
								margin-left: 0px;
								margin: 0 auto;
							}
							.contact-web img {
								width: 360px;
								flex-shrink: 0;
								max-width: none;
							}
							.contact-button img{
								max-width: none;
								flex-shrink: 0;
							}

					


					}




/*========================================================================================================
 *  スマートフォンA向けデザイン  画面幅600以下
 ========================================================================================================*/

				@media screen and (max-width:600px) {
			
					body *{
						max-width: 600px;
						margin: 0px;
						padding: 0px;
					}

					.wrapper {
						overflow: hidden;
					}
					
					.slider {
								z-index: -30000;
							}

							.caption {
								display: flex;
								justify-content: center;
								margin-left: auto; 
								margin-right: auto;
								width: 100px;
								margin-top: -600px;
								z-index: 100000;
							}
							.caption img {

							}
					
					
					#contents {
						margin-top: 0px;
						padding-top: 0px;
						margin: 0;
						z-index: -500005;
						max-width: 600px;
					}
					
					.news-box{
								margin: 0 auto;
								text-align: center;
								width: 90%;
								height: 520px;
								position: relative;
							}
							.box {
								margin-top:50px; 
								margin:0 auto; 
								position: relative;
								margin: 0 auto;
								width: 90%;
								height: 300px;
							}
							.linkbox {
								width: 90%;
								height: 520px;
								position: absolute;
							}
							.box iframe {
								width: 180%;
								height: 520px;
								transform:scale(0.55);
								margin-left: -130px;
								margin-top: -100px;
							}
					

					/*********** キャッチコピー設定　[スマホ-600] ***************************************************/

					
							.catch-copy {
								max-width: 600px;
								margin-top:10px;
							}
					
							.catch-copy-text {
								width: 100%;
								margin-left: 0px;
								margin-top: -40px;
								margin-bottom: 30px;
							}
					
							h1 {
								font-size: 23px;
							}
					
					
					
					/*********** 内容　[スマホ-600] ***************************************************/

							.top1 img {
								width: 100%;
							}
							.top2 img {
								width: 100%;
							}
					
					
					/*********** ボタンデザイン　[スマホ600] ***************************************************/

							a.btn_06 {
								display: block;
								text-align: center;
								vertical-align: middle;
								text-decoration: none;
								width: 150px;
								height: 10px;
								font-weight: bold;
								font-size: 11pt;
								border-radius: 50px;
								border-bottom: 4px solid #0686b2;
								background: #27acd9;
								color: #fff;
							}
							a.btn_06:hover {
								margin-top: 4px;
								border-bottom: 1px solid #0686b2;
								color: #fff;
							}
					
							.top1-btn{
								margin: 0 auto;
								text-align: center;
								margin-left: 25%;
								margin-right: 25%;
								margin-top: -20px;
							}
					.top2-btn{
						margin-left: 25%;
					}

					
					/*********** お問い合わせ　Contact Us 設定　[スマホ-600] ******************************************/
					
							.contact {
								display: flex;
								flex-direction: column;/* 右方向に横並び */
								justify-content: center;
								margin-top: 30px;
								margin-bottom: 50px;
							}
							
							.contact-tel {
							    width: 300px;
								margin: 0 auto;
							}
					
							.contact-web {
							    width: 300px;
								margin: 0 auto;
								margin-top: 5px;
								
							}
					
					}