@charset "UTF-8";

/* 共通部分 ------------------------------------- */

html {
	font-size : 100% ;
	}



body {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 
	line-height : 1.3;
	/* color : #022561;	*/ /* フォントの色 */
	color : rgba(55,78,103,1) ;
	/* background-color : rgba(221,255,255,1) ;  */ /* ★デバッグ用 */
	 background-color : rgba(211,237,251,1) ; 

	/* 20220606 ためしに */
	margin : 0px;
	
	/*background: linear-gradient(to bottom right,rgba(211,237,251,1) , rgba(0,140,214,1)); */
	/*background: linear-gradient(to bottom right,rgba(211,237,251,1) , rgba(0,111,188,1)); */
	
	}





img {
	max-width : 100%;	/* 親要素より大きくならないようにする */
	}





a {
	text-decoration : underline;	/* アンカーに下線を引く */
	color : rgba(42,36,160,1) ;
	}

a:hover {
	color : rgba(255,255,255,1);				/* アンカーのマウスオーバー時の色を指定 */
	background-color : rgba(21,160,221,0.4) ;  /* rgba(255,150,255,0.8) ;  */
	}



h1 {
    display: block;
    font-size: 3em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;

	font-family: sun-serif; 
}


h3 {
	color : rgba(42,36,160,1);
	border-bottom : groove 7px rgba(23,65,242,0.5) ;
	margin-top : 30px;
	}


#report-sec2 {
	/* border-bottom : groove 7px rgba(255,128,0,1) ;*/
	}

#report-sec3 {
	border-bottom : groove 7px rgba(228,0,127,1) ;
	}
	
#report-sec4 {
	border-bottom : groove 7px rgba(0,165,105,1) ;
	}

#report-sec5 {
	border-bottom : groove 7px rgba(255,128,0,1) ;
	}

#report-sec6 {
	border-bottom : groove 7px rgba(255,128,0,1) ;
	}



h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}


*, :after, :before {
    background-repeat: no-repeat;
    box-sizing: content-box;
}



p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}



.dr_h2 {
	color : white ;
	padding : 3px;
	text-align : center ; 
	/* background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(128,0,128,0.7)); */
	background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,140,214,0.7));
	}

#report-sec {
	color : white ;
	/*background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(255,128,0,1) 50% );*/
	background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,140,214,0.7) 50%);
	}
	
#danger-sec {
	color : white ;
	background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(255,0,0,1) 50% );
	}

#dinner-sec {
	color : white ;
	/*background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,153,68,1) 50% );*/
	background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,140,214,0.7) 50%);
	}

#data-sec {
	color : white ;
	/*background : linear-gradient(to left , rgba(255,255,255,0.1), #E4007F 50% );*/
	background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,140,214,0.7) 50%);
	}


ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 30px;
}


ol ul {
    list-style-type: circle;
    margin-block-start: 0px;
    margin-block-end: 0px;
}


ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 25px;
}






.dr_body {
/*	background-color : rgba(255,255,255,1) ;  /*
/* 2020.08.16 白→薄いベージュへ */
	background-color : rgba(254,248,244,1) ;  
/* ウィンドウを小さくしていく中で、初めは余白が減っていくようにしたいので、margin-left 使わない。 */
	max-width : 850px ;
	margin : auto ;
	padding : 10px 10px 10px 10px;
	box-shadow: 0px 0px 25px 25px rgb(254 248 244);
	}
			




.dr_header {
    position:  relative;
	max-width : 800px;			/* 2020.08.13 850px → 800px */
	margin : auto ;

}


/* 20220813 */
.headimg-sp	{
	display : none ;
	height : 98vh ;
	}

.headimg-sp	img{
	position: absolute;  /* <-- 20230709 */
	height : 100%;
	width : 100%;
	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 50%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */
	z-index : 8 ;
	}


.headimg-pc	{
	display : block ;
	height : 70vh;
	position: relative;  /* <-- 20230709 */
	/*background-color : rgba(255,25,25,1) ; */
	}

.headimg-pc	img{
	position: absolute;  /* <-- 20230709 */
	height : 100%;
	width : 100%;
	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 50%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */
	z-index : 8 ;
	}





.headimg-pc img.active {	z-index: 10;	opacity: 1.0;	}

.headimg-pc img.last-active {	z-index: 9;	}


.headimg-sp img.active {	z-index: 10;	opacity: 1.0;	}

.headimg-sp img.last-active {	z-index: 9;	}




	.page-tittle1 {
		position:  absolute;
		left : 10px ;
		 bottom  : 5% ; 
		/*top  : 5% ; */ /* 20230619 調整 */
		color : rgba(255,255,255,1) ;
		background-color : rgba(171, 178, 185 ,0.3) ;
		z-index : 11;
		}


			.page-tittle2 {
				display : none;
				position:  absolute;
				right : 10px ;
				bottom : 10px ;
				color : rgba(255,255,255,1) ;
				background-color : rgba(255,255,55,0.3) ;
				}
							


.dr_header2 {
	max-width : 800px;			
	margin : auto ;

}




.dr_honbun {
/* ウィンドウを小さくしていく中で、初めは余白が減っていくようにしたいので、margin-left 使わない。 */
	max-width : 750px ;
	margin : auto ;
	padding : 10px 10px 10px 10px;
/*	background-color : rgba(255,255,255,1) ;  /*
/* 2020.08.16 白→薄いベージュへ */
	background-color : rgba(254,248,244,1) ;  

}




			#to-top {
				position: fixed;
				display : none ;
				top: 64%;
				right: 1%;
				margin: 0;
				width: 50px;
				height: 50px;
    			/* background: rgba(136,206,255,0.5); */
    			/* background: rgba(255,255,10,0.5); */
    			/* background: rgba(21,160,221,0.3);*/
    			/*background: rgba(243,152,0,0.3);*/
				text-align: center;
				z-index: 2;
				border-radius: 50px 50px 0px 0px;
    			background: rgba(21,160,221,0.7);
				}
			
			#to-top a {
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
				vertical-align: middle;
			    text-decoration: none; 
				line-height : 40px ;
				border-radius: 50px 50px 0px 0px;
				font-size : 1.3em;
				color: white;

				}

			#to-top a:hover {								/* 別のcssで指定されているもののここだけ修正 */
				background-color : rgba(211,237,251,0.8);  
				/* box-shadow: 0px 0px 15px 15px rgb(136,206,255); */
				box-shadow: 0px 0px 15px 15px rgba(21,160,221,0.7);
				color : rgba(2,37,98,0.9);				/* アンカーのマウスオーバー時の色指定を上書き */
				}



			#to-last {
				position: fixed;
				display : none ;
				top: 76%;
				right: 1%;
				margin: 0;
				width: 50px;
				height: 50px;
    			/* background: rgba(206,206,255,0.5); */
    			background: rgba(21,160,221,0.7);
				text-align: center;
				z-index: 2;
				border-radius: 0px 0px 50px 50px;
				}
			
			
			#to-last a {
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
				vertical-align: middle;
				color: white;
				
			    text-decoration: none; 
				border-radius: 0px 0px 50px 50px;
				line-height : 60px ;
				font-size : 1.3em;



				}

			#to-last a:hover {								/* 別のcssで指定されているもののここだけ修正 */
				background-color : rgba(211,237,251,0.8);  
				/* box-shadow: 0px 0px 15px 15px rgb(136,206,255); */
				box-shadow: 0px 0px 15px 15px rgba(21,160,221,0.7);
				color : rgba(2,37,98,0.9);				/* アンカーのマウスオーバー時の色指定を上書き */
				}




			.index {
				text-align : center ;
				width : 50px;
				padding : 2px 5px 2px 5px ;
				color : rgba(255,255,255,1);
				background-color : rgba(0,111,188,1);
				}
			
				
				
			.indexlist a {
				text-decoration: none; 
				}

			.indexlist li {
				margin : 5px;
				}
				



	


			.dr-nav {
				display: flex;
				max-width : 300px;
				margin : 30px auto 30px auto ;
				list-style: none;
    			padding : 0px;
				}


			.dr-nav li {
				margin : 15px ;
				width : 120px;
				}

			.dr-nav a {
				display: block;
				text-align: center;
				vertical-align: middle;
			    text-decoration: none; 
				border-radius: 10px;
				color : rgba(255,255,255,1)  ;				/* アンカーのマウスオーバー時の色指定を上書き */
				/*border : solid 1px navy ;*/
				padding : 3px ;
    			/* background: rgba(136,206,255,0.5); */
    			background: rgba(21,160,221,0.7)
				}


			.dr-nav a:hover {								/* 別のcssで指定されているもののここだけ修正 */
				background-color : rgba(211,237,251,0.8);  
				/* box-shadow: 0px 0px 15px 15px rgb(136,206,255); */
				box-shadow: 0px 0px 15px 15px rgba(21,160,221,0.7);
				color : rgba(2,37,98,0.9);				/* アンカーのマウスオーバー時の色指定を上書き */
				}


	




			
				
.column {
	background-color: rgba(124,212,178,0.3);
	padding : 5px;
	border-radius : 10px ;
	margin-bottom : 40px;
	}

.column p {
	padding : 10px 20px 10px 20px;
	} 

/* ------------------------------------- */









.dr_chofubashi-coution-2019 {

	font-style : italic ;
	font-size : 0.8rem ;
	color : rgba(25,25,255,1) ;
	
	}




.dr_cyusyaku {

	font-style : italic ;
	font-size : 0.8rem ;
	color : rgba(25,25,255,1) ;
	
	}



.dr_photo-grid {

	display : flex ;
	flex-wrap : wrap ;
	justify-content : space-around ;
	
	}


.dr_photo-grid p {

	margin-top : 0px ;
	text-align : center ;

	}




.dr_photo-item {

	max-width : 350px;
	margin : 10px 10px 0px 10px;

}


.dr_photo-item-512 {

	max-width : 512px;
	margin : 10px 10px 0px 10px;

}


/* 20220105追加 */
.dr_photo-item-640 {

	max-width : 640px;
	margin : 10px 10px 0px 10px;

}



/* 2020.09.07追加 */
.dr_photo-item240 {

	margin : 5px 5px 0px 5px;

}


/* 2020.09.07追加 */
.dr_photo-item240 img {
	width : 240px;
	height : 180px;
	object-fit:cover;
	/* object-position:50% 50%; */

}




/* 2022.09.02追加 */
.dr_photo-item180tate {

	margin : 5px 5px 0px 5px;

}


/* 2022.09.02追加 */
.dr_photo-item180tate img {
	width : 180px;
	object-fit:cover;
	/* object-position:50% 50%; */

}





/* 2023.07.08追加 */
.dr_photo-item180 {

	margin : 5px 5px 0px 5px;

}


/* 2023.07.08追加 */
.dr_photo-item180 img {
	width : 220px;
	object-fit:cover;
	/* object-position:50% 50%; */

}


.dr_photo-setsumei  {
	
	margin-top : 0px ; 
	padding-top : 0px;
	
	}





.dr_photo-setsumei p {
	
	margin-top : -15px ; 	/* 20210425 0px → -15px */
	margin-bottom : 20px ; 
	text-align : center ;
	
	}



.dr_youtube  {

	text-align : center ;
	
	margin : 20px auto 20px auto ; /* 2020.08.13 追加*/

}


.dr_youtube iframe  {

	max-width : 100% ;
	max-height : 100% ;

}




/* トップディレクトリ直下のcssからコピーして調整　2021.10.11*/
.youtube-iframe {
	position : relative ;
    width:80%;
    height:0;
    padding-top:45%;
	margin : auto;
	}
	


.youtube-iframe iframe {
	position : absolute ;
    top:0;
    left:0;
    width:100%;
    height:100%;

	}






.dr_data {

	font-family: monospace ; 

	max-width : 750px ;
	margin : auto ;
	padding : 10px 10px 10px 10px;			
/*	background-color : rgba(255,255,255,1) ;  /*
/* 2020.08.16 白→薄いベージュへ */
	background-color : rgba(254,248,244,1) ;  
}

.dr_ads {
	max-width : 750px ;
	margin : auto ;
	padding : 10px 10px 10px 10px;
	background-color : rgba(255,255,255,1) ;  
}


.dr_syusei_rireki {
	max-width : 750px ;
	font-size : 0.8rem;
/*	background-color : rgba(255,255,255,1) ;  /*
/* 2020.08.16 白→薄いベージュへ */
	background-color : rgba(254,248,244,1) ;  
}


.dr-tw-fb {
	max-width : 850px ;
	margin : 30px auto 10px auto ; /* 20220813 */
	/*max-height : 40px ;*/			/* 2020.03.10 20→40 */ /*20230914 commentout*/
	display : flex;
	flex-wrap : wrap ;		/* 2020.3.10　追加 */
	padding-bottom : 5px ;
}




.twitter-b1 {
	margin    :5px ;
}

.twitter-b2 {
	margin   : 5px ; /* ボタン間の余白 */
}

.facebook {
	margin    : 6px ; /* ボタン間の余白 */
}





		

/* footer --------------------------------- */
footer {
	/* background-color : rgba(2,37,98,0.9) ;	*/ /* デバッグ用 */
	/* background-color : rgba(139,0,139,0.9) ;  */	
	background-color : rgba(255,255,102,0) ;
	text-align : center ;
	margin-top : 30px ;
	padding-top    : 1px ;
	padding-bottom : 1px ;
	/* box-shadow: 0px 0px 15px 15px rgba(2,37,98,0.9); */
	/* box-shadow: 0px 0px 15px 15px rgba(139,0,139,0.9); */
	box-shadow: 0px 0px 15px 15px rgba(255,255,102,0); 
	}


footer p {
	color : rgba(55,78,103,1) ;
	font-size : 0.875rem;
	}






/* モバイル ----------------- */
@media (max-width: 900px ) {
/* ボタンが文字にかぶるようになるので透過する */
#to-top  {								/* 別のcssで指定されているもののここだけ修正 */
	background-color : rgba(21,160,221,0.3);  
	}


#to-last {								/* 別のcssで指定されているもののここだけ修正 */
	background-color : rgba(21,160,221,0.3);  
	}


}


@media (max-width: 600px ) {

/* 2020.09.07追加 */
.dr_photo-item240 img {
	width : 120px;
	height : 90px;
	object-fit:cover;
	/* object-position:50% 50%; */
	}



}





@media (max-width: 450px ) {
		
	/* 20220813 */
	.headimg-pc	{
		display : none ;
		}
	
	.headimg-sp	{
		display : block ;
		}


h1 {
    display: block;
    font-size: 2em;
    }		
		
	
	.page-tittle1 {
		position:  absolute;
		left : 10px ;
		/*bottom  : 10% ; */
		/*top  : initial;*/
		top  : 2% ; /* 20230619 調整 */
		bottom : initial;
		color : rgba(255,255,255,1) ;
		}
	
	.page-tittle2 {
		display : block;
		z-index : 11;
		}
	


/* 2023.07.08追加 */
.dr_photo-item180 img {
	width : 150px;
	object-fit:cover;
	/* object-position:50% 50%; */

}



	}