@charset "UTF-8";

/* 画面の横幅が1000px以下　スマホ */
@media screen and (max-width:1000px){

	#box {
			width: 800px;
			margin: auto;
			border-style: solid;
			border-width: 1px;
			border-color: black;
			background-image: url(./small/heart-pink.jpg); 
	}

	#boxA {
			width: 800px;
			margin: auto;
			border-style: solid;	
			border-width: 1px;		
			border-color: black;	
			background-image: url(./small/heart-pink.jpg); 

	}

	#boxB {
			width: 800px;
			margin: auto;
	}

	#boxC {	/*メイン部分	*/
			width: 800px;
			margin: auto;
			border-style: solid;	
			border-width: 1px;		
			border-color: black;	

	}

	#boxD {
			width: 800x;
			margin: auto;
		/*	border-style: solid;	*/
		/*	border-width: 2px;		*/
		/*	border-color: black;	*/
	}

	#boxE{
			width: 800x;
			margin: auto;
		/*	border-style: solid;	*/
		/*	border-width: 2px;		*/
		/*	border-color: black;	*/
	}


	#container1 { width: 760px;
				margin: auto;
				background-image: url(small/toumei.gif);
				font-size: 24pt; 
	}

	#container2 { width: 760px;
				text-align: center;
				margin: auto;
				background-image: url(small/heart-pink.jpg); 
				font-size: 24pt; 

	}
	
	#container3 { width: 760px;
				margin: auto;
				background-image: url(small/heart-pink.jpg); 
				font-size: 24pt; 

	}


	#container4 { width: 760px;
				margin: auto;
				margin-top: 20px;
				background-image: url(small/heart-pink.jpg);
				font-size: 20pt 
	}


	#button {
		font-size: 24pt;
		width: 600px; 
		height: 80px; 
		background-image: url(./small/toumei.gif); 	
	}

	span.midle {
		font-size: 24pt;
	
	}

	p.midle {
		font-size: 24pt;
	
	}







	h1 { /*ページのタイトル*/
			font-size: 40pt; 
			color: #000088;
			margin-top: 10px;
			margin-bottom: 10px;
			background-color: #ffffff; 
	}

	h2 { /*テーブルの地域のタイトル*/
			font-size: 30pt; 
			color: #000088;
			margin-top: 10px;
			margin-bottom: 10px;
	}
	
	h2.leftbox { /*リストのタイトル*/
			font-size: 40pt; 
			color: #000088;
			margin-top: 10px;
			margin-bottom: 10px;
	}
	
	
	

	h3 { /*テーブル中のスポットのタイトル*/
			font-size: 24pt; 
	}


	ul { /*リスト*/
			margin-top: 40px;
	}


	li { /*リスト*/
			font-size: 32pt;
			margin-bottom: 40px;
			margin-left: 100px;
	}


	#box1 { width: 760px;
	
				margin: auto;
				text-align: center;
				border-style: solid;
				border-width: 2px;
				border-color: black;
				background-image: url(small/toumei.gif); 
	}


	#hajimeni1 {		width: 760px;
				margin-top: 10px; 
				margin-left: 20px; 
				margin-bottom: 10px; 
	}
	
	#hajimeni2 {		width: 760px;
				margin-top: 10px; 
				margin-left: 20px; 
				margin-bottom: 10px; 
	}


	#point_map { margin-top: 20pt;
					margin-left: 130px; 
	}

	#japaneseMap { width: 500px;
					height: 540px;
					border-style: solid;
					border-width: 3px;
					border-color: black;
					background-color: #eef0ff; 
	}





	.TbLink {
			 width: 760px;
			margin-top: 20pt; 
			
			
	}
			

	th { text-align: center;
			font-size: 24pt;
	
	}

	td.photo {
				 width: 250px;
	}

	.spot {
			 margin-top: 10px;
			 margin-left: 5pt;
	}

		
	.setumei {
			font-size: 24pt; 
			margin-top: 10px;
			margin-left: 10px;
	}
	
	.juusyo {
			font-size: 24pt; 
			width: 120px;
			margin-top: 10px;
			margin-left: 10px;
	}





	.photo_yoko {
					width: 240px;
					border-style: solid;
					border-width: 2px;
					border-color: black;
					margin-left: 3px;
	}


	.photo_tate {
					height: 240px;
					border-style: solid;
					border-width: 2px;
					border-color: black;
					margin-left: 35px;
	}


	address {
					margin-left: 50px;
					
	
	}



/***********************************************************/
/*    スライドショー関係 */



	#slideshow {
	   position: relative; 
	   width:  100%; /* ボックスの横幅　画面に合わせる */
	   height: 270px; /* ボックスの高さ 写真の高さより大きく*/
	   background-color: white; /* ボックスの背景色(必須) */
	   margin: auto;
	}
	
	#slideshow p {
	   position: absolute; 
	   top:  20px; /* 写真の位置 */
	   left: 0;
	   color: #0000ff;
	   text-align: center;
	   z-index: 8;
	   opacity: 0.0;
	   margin: 0; 
	   background-color: white; /* ボックスの背景色(必須) */
	   height: 90%; /* div slideshowの高さに合わせる */
	   width: 100%; /* div slideshowの幅に合わせる */
	}
	
	#slideshow p.active {
	   z-index: 10; 
	   opacity: 1.0;
	}
	
	#slideshow p.last-active {
	   z-index: 9;
	}
	
	#slideshow p img {
		margin-top: 10px; 
		margin: auto; */autoで画像を真ん中に表示 */
	   width:  700px; /* 縦基準にするのでauto 画像の横幅 */
	   height: 210px; /* 画像の高さ */
	   display: block;
	   border: 0;
	   margin-bottom: 0px; /* 画像下部の余白 */
	}




}