@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
	}



body 	{
    /*font-family: sans-serif; */
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
	}


img {
	max-width : 100%;
	}
	





/* ****************************************** */


footer	{
	position : relative;
	z-index : 30;
	font-size : 0.75em;

	/* height : 4vh; */
	color : rgba(248,248,228,1);
	background-color : rgba(42,55,71,1) ;
	text-align : center ;

	box-shadow : 0px  -10px  40px 20px rgba(42,55,71,1);

	}
	
footer p {
	line-height : 4vh;
	}


/* ****************************************** */


.button-area	{
	position : fixed;
	
	display: flex;
	flex-wrap : wrap;
	align-content : center;
	width : 35px;
	height : 100vh;
	right : 2%;
	z-index : 30;
	}

	
	
.button-mark	{
	display : none;
}

.button-mark a	{
	width 	: 50px ;
	height : 50px;
	margin-top : 30px;
	border-radius : 10px;
	text-align : center ;
	box-shadow : 0 0 20px 5px rgba(248,248,228,0.8);
	
	display : block;
	color : rgba(0,32,96,1);
	background-color : rgba(248,248,228,0.8);
	text-decoration: none;
	font-size : 1.5em;
	line-height : 50px;
	vertical-align: middle;
	}


.button-mark a:hover	{
	background-color :  rgba(32,190,223,1);
	box-shadow: 0px 0px 10px 10px    rgba(32,190,223,0.4);
	color : rgba(248,248,228,1);
	}

#btn-t a:hover	{
	background-color :  rgba(0,32,96,1);
	box-shadow: 0px 0px 10px 15px    rgba(0,32,96,0.8);
	}

#btn-1 a:hover	{
	background-color :  rgba(200,0,30,1);
	box-shadow: 0px 0px 10px 15px    rgba(200,0,30,0.8);
	}

#btn-2 a:hover	{
	background-color :  rgba(225,75,0,1);
	box-shadow: 0px 0px 10px 15px    rgba(225,75,0,0.8);
	}

#btn-3 a:hover	{
	color :  rgba(0,32,96,1);
	background-color :  rgba(248,248,0,1);
	box-shadow: 0px 0px 10px 10px    rgba(248,248,0,0.8);
	}

#btn-4 a:hover	{
	background-color :  rgba(0,128,75,1);
	box-shadow: 0px 0px 10px 10px    rgba(0,128,75,0.8);
	}

#btn-5 a:hover	{
	background-color :  rgba(0,128,255,1);
	box-shadow: 0px 0px 10px 15px    rgba(0,128,255,0.8);
	}

#btn-6 a:hover	{
	background-color :  rgba(0,32,96,1);
	box-shadow: 0px 0px 10px 15px    rgba(0,32,96,0.8);
	color : rgba(248,248,228,1);
	}

#btn-7 a:hover	{
	background-color :  rgba(128,0,128,1);
	box-shadow: 0px 0px 10px 15px    rgba(128,0,128,0.8);
	}

#btn-8 a:hover	{
	color :  rgba(0,32,96,1);
	background-color :  rgba(255,255,255,1);
	box-shadow: 0px 0px 10px 15px    rgba(255,255,255,0.8);
	}

/* ************************************************ */


.tennai-page {
	position : relative;
	color : rgba(0,32,96,1);
	background-color :  rgba(42,55,71,1); 
	/*  background-color :  red;  */
	/*min-height : 1500vh;*/
	}

.tennai-floor {
	}


#tennai-f1  .tennai-floor {
	/*height : 96vh;*/
	}



			.index {
				text-align : center ;
				width : 50px;
				padding : 2px 5px 2px 5px ;
				color : rgba(255,255,255,1);
				background-color : rgba(0,111,188,0.8);
				/*box-shadow: 0px 0px 10px 10px rgba(0,111,188,0.8);*/
				}
			
				
				
			.indexlist li {
				margin : 5px;
				}
				
			.indexlist a {
				text-decoration: none; 
				display : inline;
				color : rgba(42,36,160,1) ;
				line-height: 1.6;
					
				}

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


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;
}


.tennai-floor-main-f6	{
	display : flex;
	width :100%;
	height : 100vh ;
	margin : auto ;

	flex-direction : column;
	flex-wrap : wrap ;
	justify-content : center ;
	align-items : center ;
	}
	
	
	
#tennai-f6 img {
	width : 90px;
	min-width : 8%;
	object-fit:cover;
	/* object-position:50% 50%; */
	/*mix-blend-mode: multiply; overlay;*/
	}
	

#tennai-f6 h2{	/* トップは少し変える */
	background-color : rgb(255,255,255,0);
	box-shadow : 0 0  50px 50px rgba(255,255,255,0);
	text-shadow: 1px 1px 2px rgba(0,32,96,1);
	color : rgba(248,248,228,1);
	padding  : 0 40px;
	font-size : 1.5em;
	}
	
	
#tennai-f6 h3{	/* トップは少し変える */
	background-color : rgb(255,255,255,0);
	text-shadow: 1px 1px 2px rgba(0,32,96,1);
	box-shadow : 0 0  50px 50px rgba(255,255,255,0);
	color : rgba(248,248,228,1);
	padding  : 0 40px;
	font-size : 1.3em;

	}
	

.tennai-floor-main-f6-ko p {
	text-align : left ;
	color : rgba(248,248,228,1);
	/*color : rgba(0,32,96,1);*/
	text-shadow: 1px 1px 2px rgba(0,32,96,1);
	font-size : 1.0em;
	}


	
	
	
	

.tennai-floor h2{
	font-size : 1.8em;
	height : 1.8em;
	background-color : rgb(255,255,255,0.87);
	text-align : center ;
	line-height: 1.8em;
	box-shadow : 0px  0px  50px 50px rgba(255,255,255,0.9);
	/* box-shadow : 0px  -10px  150px 150px rgba(255,255,255,0.9),
				 0 1px 0 0 rgba(255,255,255,0),
				 0 -1px 0 0 rgba(255,255,255,0);  */
	
	}




	

.tennai-floor-main {
	display : flex ;
	flex-direction : column;
	align-content : center ;
	align-items : center;
	/*width : 78%;*/
	max-width : 850px;
	margin : auto auto 400px auto ;
	padding : 2% 3% 4% 3%;
	background-color : rgba(0,32,96,0.4);
	box-shadow : 0 0  50px 10px  rgba(250,250,250,0.5);
	/*box-shadow : 20px 20px     rgba(250,250,250,0.5);*/
	/*border-radius : 1%;*/

	/*color : rgba(248,248,228,1);*/
	color : rgba(0,32,96,1);

	}



.floor-body {
	background-color :  rgba(255,255,205,0.8); 
	/*width : 75%;*/
	max-width : 750px;
	padding : 20px;
	}





.tennai-floor-main h3 {
	text-align : center ;
	}


.tennai-floor-main p {
	text-align : left ;
	padding : 20px;
	line-height: 1.6;
	}



.image-grid {
	display : flex ;
	flex-wrap : wrap;
	justify-content : space-around ;
	box-sizing: border-box;
	padding : 1% ;
	}
	
.image-item200 {
	/*max-width : 30%;*/
	/*min-width : 88px;*/	/* minを%指定することで極端に小さくせず折り返しさせる。 */
	max-width : 200px;
	padding : 5px;
	}

.image-item400 {
	/*max-width : 30%;*/
	/*min-width : 88px;*/	/* minを%指定することで極端に小さくせず折り返しさせる。 */
	max-width : 340px;
	padding : 5px;
	}

.image-grid img {
	max-width : 100%;
	object-fit:cover;
	/*aspect-ratio: 1 / 1;*/	/* height:0; padding-botom : 100%で解決せず */
	/* object-position:50% 50%; */
	/*box-shadow : 0 0  50px 20px rgba(250,250,250,0.8);*/
	/*box-shadow : 10px 10px  10px 10px rgba(190,190,190,1);*/
	border-radius : 1%;
	vertical-align : bottom ;
	}

.image-grid a {
	display : block;
	}
	
.image-grid a:hover {
	box-shadow : 0 0  10px 10px rgba(255,127,39,0.5);
	
	}

.image-grid p {
	padding : 2px;
	text-align : center;
	font-size : 0.85rem;
	color : navy;
	}



.dr_youtube {
	text-align : center;
    margin: 20px auto 20px auto;
	}

.dr_youtube iframe {
	max-width : 100%;
	max-height : 100%;
	}
	

#tennai-page-L1 {
	position : relative;
	z-index : 10;
	height : 100%;
	/* background-color : green; */
	}





#tennai-data {
	line-height : 1.2;
	font-family: monospace;	
	}





	


			.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: 5px;
				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);				/* アンカーのマウスオーバー時の色指定を上書き */
				}





.dr_syusei_rireki {
	max-width : 750px ;
	margin : auto ;
	padding : 10px 10px 10px 10px;			
	font-size : 0.75rem;
/*	background-color : rgba(255,255,255,1) ;  /*
/* 2020.08.16 白→薄いベージュへ */
	background-color : rgba(254,248,244,1) ;  
	/*box-shadow: 0px 0px 25px 25px rgba(254,248,244,1);*/
	}


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




.twitter-b1 {
	margin    :5px ;
}

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

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





#tennai-page-L2 {
	position : fixed;
	/*position : absolute;*/  /* <== こっちは駄目 一緒に動いてしまう*/
	z-index : 5;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%; /*  %を使う時は、一番下にスクロールさせて、ギリギリ隠れるところを探す。レスポンシブ的確認も */
	height : 140vh; /* vhを使う時は、一番下にスクロールさせて、ギリギリ隠れるところを探す。レスポンシブ的確認も */
	/*height : 550%;*/ /* 枠としては100%でいいが、写真が1画面にすべて収まってしまうため、写真を拡げるために大きくした。 550%*/
	background-color : orange;  
	background-color : rgba(42,55,71,1) ;
	background-image: url(../20250708/20250708_111951-rs.jpg);
	background-repeat : no-repeat ;
	background-size : cover;
	/*background-size : 100% 100%;*/
	/*background-attachment: fixed;*/
	}



#tennai-page-L2-c1 {
	position : fixed;
	z-index : 6;
	top : 0;
	left : 0;
	width : 100%;
	height : 100vh;
	object-fit:cover;
	}
	
#tennai-page-L2-c2 {
	position : fixed;
	z-index : 6;
	top : 150%;
	left :0%;
	}
	
	
#tennai-page-L2-c3 {
	position : fixed;
	z-index : 6;
	top : 200%;
	right :0%;
	}
	
	
.dr_photo-setsumei p {
    background-color: rgba(254, 248, 244, 0);
    /* box-shadow: 0px 0px 25px 25px rgba(254, 248, 24, 0); */
    padding: initial;
    margin-top: 0px;
    margin-bottom: 20px;
    text-align: center;
    color: navy;
    font-size: 0.85rem;
}


	
/* モバイル版
------------------------------- */
@media (max-width: 600px) {

	html	{
			1.1rem;
		}
		

	.tennai-floor h2 	{
		font-size : 1.1em ;
		}


	#tennai-f6 h3 	{
		font-size : 1.0em ;
		}

	
	.tennai-floor h3 	{
		font-size : 1.2em ;
		}
		
		
	.top-page-main	{

		border-left  : none;
		border-right : none;
		}

	.image-item400 {
		margin : 1% 3% 1% 3% ;
		}

	.button-area	{
		position : fixed;
		
		display: flex;
		flex-wrap : wrap;
		align-content : center;
		width : 35px;
		height : 100vh;
		right : 4%;
		z-index : 30;
		}
		
.button-mark	{
	display : none;
	}
	
.button-mark a	{
	width 	: 40px ;
	height : 40px;
	margin-top : 35px;
	background-color : rgba(248,248,228,0.8);
	border-radius : 10px;
	text-align : center ;
	box-shadow : 0 0 20px 5px rgba(248,248,228,0.8);
	
	color : rgba(0,32,96,1);
	text-decoration: none;
	font-size : 1.2em;
	line-height : 40px;
	vertical-align: middle;
	}
	
	
	#tennai-page-L2 {
		background-image: url(../20250708/20250708_112000-rs.jpg);
		height : 150vh; /* vhを使う時は、一番下にスクロールさせて、ギリギリ隠れるところを探す。レスポンシブ的確認も */
		}


}




@media (max-height: 400px) {

.button-area	{
	position : fixed;
	
	display: flex;
	flex-wrap : wrap;
	align-content : center;
	width : 35px;
	height : 100vh;
	right : 2%;
	z-index : 30;
	}

	
	
.button-mark	{
	display : none;
	}

.button-mark a	{
	width 	: 40px ;
	height : 40px;
	margin-top : 35px;
	background-color : rgba(248,248,228,0.8);
	border-radius : 10px;
	text-align : center ;
	box-shadow : 0 0 20px 5px rgba(248,248,228,0.8);
	
	color : rgba(0,32,96,1);
	text-decoration: none;
	font-size : 1.2em;
	line-height : 40px;
	vertical-align: middle;
	}


.button-mark a:hover	{
	background-color :  rgba(32,190,223,1);
	box-shadow: 0px 0px 10px 10px    rgba(32,190,223,0.4);
	color : rgba(248,248,228,1);
	}
	
#tennai-page-L2 {
	background-image: url(../20250708/20250708_111951-rs.jpg);
	height : 165vh; /* vhを使う時は、一番下にスクロールさせて、ギリギリ隠れるところを探す。レスポンシブ的確認も */
	}
}