@charset "UTF-8";

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


body {
/*    font-family: "明朝体","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; */
    font-family: cursive,sans-serif; 
    line-height: 1.7;
    color: rgba(31,78,121,1);
    background-color :  rgba(32,190,223,0.1);
	padding : 0;
	margin : 0 auto;

	}


a {
    text-decoration: none; 
	color :   rgba(31,78,121,1);
    
    }


img {
    max-width: 100%;
    max-height : 100% ;
	}


p { 
    max-width: 100%;
	margin : 1px 1px 1px 5px;
	padding : 1px;
	color :   rgba(31,78,121,1);
	}




/* ----------------------------------------------------- */
/*       ヘッダーとメイン                                */
/* ----------------------------------------------------- */

.top-sec1 {
	position : relative ;
	height: 50vh;  
	}



#top-sec1-slideshow img {

	position : absolute ;
	
	top : 20% ;

	/* border-radius : 0px 0px 1000px 1000px / 0px 0px 50px 50px;	*/	/* 角丸め */
	box-shadow: 0px 0px -25px -25px rgba(32,190,223,0.1) ; 

	object-fit : cover ;      /* absoluteでこれを入れないと潰れた感じになる  */
	object-position: 50% 50%;  /* ここを0%とかにすると、縮めていった時に左隅が中心になってしまう。 */
	
	width  : 100%;
	height :  80%;

	z-index : 8 ;
	
	opacity : 1.0 ;   /* 透明 */

	}



#top-sec1-slideshow img.active {	z-index: 10;	opacity: 1.0;	}

#top-sec1-slideshow img.last-active {	z-index: 9;	}




/* HEADER
------------------------------- */

.top-sec1-header  {
	position : absolute ;
    display: flex;
    justify-content: center;

	top : 5%;
	left: 1%;
	right: 1%;

	/* 20210419追加 */
	height : 20% ;

	z-index : 14 ;
    background-color :  rgba(25,255,255,0);    /* デバッグ用 */

	}


.top-sec1-header-nav {
    display: flex;
    flex-wrap : wrap ;
    list-style: none;
    justify-content: space-around ;
    
    padding : auto ;
    
	}


.top-sec1-header-nav a {
	background-color :  rgba(255,255,255,0.7);
	color: #432;
	margin : auto 10px auto 10px;
	padding : 3px 12px 3px 12px ;

	border-radius : 10px;		/* 角丸め */
	}


.top-sec1-header-nav a:hover {

	color :  rgba(255,255,255,1); 	
	background-color :  rgba(32,190,223,1);
	box-shadow: 0px 0px 10px 10px    rgba(32,190,223,0.3);
	}


.old-enter {
    position: relative;
}



.old-enter:hover .menu_second-level {
    visibility: visible;
    opacity: 1;
    
}




.menu_second-level-pc {
    list-style: none;			/* 中黒を取る */
    position: absolute;
    top: 30px;
    left : 20px ;
    width: 140px;
	background-color : rgba(32,190,223,0.4) ;  
    -webkit-transition: all .2s ease;
    transition: all .2s ease;

    visibility: hidden;
    opacity: 0;
    z-index: 1;
    
    margin :1px ;
    padding : 10px ;
	border-radius : 8px;		/* 角丸め */
    
}

.menu_second-level-pc  li {

	margin-bottom : 7px ;

	}











.main-logo {
	height : 50px;	/* トップのロゴ画像のサイズ調整 */
	margin-top : 3px ;
	margin-left : 3px ;
	margin-right : 3px ;
	margin-bottom : 3px ;
	background-color :  rgba(255,255,255,0.5);
	}





/* ハンバーガーメニュー */

#nav-drawer {
  position: relative;
  display:none;
}


/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}


/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}


/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 50px;			/* 2020.12.11 アンカー広告を避ける */
  left: 10px;
  z-index: 9999;/*最前面に*/
  width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/

	list-style : none ;
	padding    : 30px 10px 10px 10px ;

}



/* idだと、classより強いみたいで、old-menuのcss(下の〇〇〇-mobile)が聞かないので、class作ってclassの指定に変えた */
.nav-content-menu {

	}



.nav-content-menu li {
	margin-bottom : 20px ;
	border-bottom : 3px #ddd solid
	}



.menu_second-level-mobile {
    position: absolute;
    top: 30px;
    left : 20px ;
    width: 140px;
	background-color : rgba(255,255,128,1.0) ;  
    -webkit-transition: all .2s ease;
    transition: all .2s ease;

    visibility: hidden;
    opacity: 0;
    z-index: 1;
    
    margin :1px ;
    padding : 15px ;
    
}

.menu_second-level-mobile  li {

    list-style: none;			/* 中黒を取る */
	margin-bottom : 5px ;
	border-bottom : none ;

	}










/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}













.top-sec1-main {
	position : absolute ;
	top : 30% ;

	/* これによってabsoluteで中央寄せ */
	left: 0;
	right: 0;

	color : rgba(255,255,255,1);

	z-index : 12 ;
	text-align : center ;
	
	text-shadow:  5px  5px  7px    rgba(32,190,223,1),
				 -5px -5px  7px    rgba(32,190,223,1),
				 -5px  5px  7px    rgba(32,190,223,1),
				  5px -5px  7px    rgba(32,190,223,1);
	}




#back-btn {

	position: fixed;	/*基準を画面の左上に*/
	top: 40%;
	right: 1%;			/*余白が入らないように*/
	margin: 0;			/*以下装飾*/
	width :  60px;
	height : 60px ;
	 background: rgba(32,190,223,0.6); 
	 color	:	rgba(255,255,255,1); 
	 text-align : center ; 
	 border-radius : 50px ; 		/* 角丸め */

	z-index : 3 ;

	}




	
/* --- 名前変えて無効化　コメントアウトの代わり --*/
#kokuchi {
	position : absolute ;
	/*基準を画面の左上に*/
	top:  40%;
	left: 25%;
	width: 10%;
	background-color : pink;
	padding : 10px;
	text-align : center ;
	z-index : 15 ;
	}

#kokuchi p {
	color : white ;
	font-size : 0.8rem ;
	}





/* 2020.09.21 SNSアイコン　*/
.toppage-sns {
	display : flex ;
	position : absolute ;
	/*基準を画面の左上に*/
	top:  80%;
	right: 8%;
	background-color : rgba(255,255,255,0.7);
 	z-index : 13 ;
	width  : 200px;
	
	align-items : center ;	
	
	}

.toppage-sns-insta {

	width  : 30px;
	height : 30px;
 	padding : 4px;
 	margin  : 1px 4px 1px 10px;
	abackground-color : rgba(255,255,255,1);

	}

.toppage-sns-twitter {

	width  : 30px;
	height : 30px;
 	padding : 4px;
 	margin  : 1px 4px 1px 10px;
	abackground-color : rgba(29,161,242,1);

	}

.toppage-sns-facebook {

	width  : 30px;
	height : 30px;
 	padding : 4px;
 	margin  : 1px 4px 1px 10px;
	abackground-color : rgba(29,161,242,1);

	}

.toppage-sns-tweet {

	width  : 50px;
	height : 30px;
 	padding : 4px;
 	margin  : 5px 4px 1px 10px;
	abackground-color : rgba(29,161,242,1);

	}



#back-btn a	{
    display : block ;
    width: 100%;
    height: 100%;
    text-align : center ;
    vertical-align: middle;
    padding-top : 5px;
	color	:	rgba(255,255,255,1);
	}



/* 2-1 段目
------------------------------- */

#top-sec21 {
	}


.top-sec21-con {
	display : flex ;
	flex-direction : column ;
	max-width : 1280px ;
	margin : auto ;
	padding : 1%;
	background-color : rgba(210,210,180,0) ; /* デバッグ用 */
	}



.top-sec21-1 {
	display : flex ;
	flex-wrap : wrap ;
	justify-content : center ; /* 先頭とラストを両端であとは均等 */
	background-color : rgba(210,210,10,0) ; /* デバッグ用 */
	}



.top-suii  {
	font-size : 0.75rem;	
	width : 96%  ;
	border-radius : 0px ;		/* 角丸め */
	background-color : rgba(255,250,234,1) ;	
	/* box-shadow: 10px 10px 10px 3px  rgba(128,221,245,0.7) ;  */
	margin : 10px  10px  10px 10px ;
	padding-left : 3px ;
	padding-right  : 3px ;
	}


/* 2014.12.14  水位計の　scaleの外だし*/
.suii08 {
	transform:scale(0.8,0.8);
	-moz-transform:scale(0.8,0.8);
	-webkit-transform:scale(0.7,0.7);
	-o-transform:scale(0.8,0.8); 
	-ms-transform:scale(0.8,0.8); 
}


.suii-list  {
	display : flex;				/* 横に並べる */
	flex-wrap : wrap ;
	justify-content : space-between ; /* 先頭とラストを両端であとは均等 */
	list-style: none;			/* 中黒を取る */
}

.suii-list a {
	text-decoration : none ; 
}



/* 2-2 段目
------------------------------- */

.top-sec21-2 {
	display : flex ;
	flex-wrap : wrap ;
	justify-content : space-around ; /* 先頭とラストを両端であとは均等 */
	background-color : rgba(210,210,10,0) ; /* デバッグ用 */
	}



/* ----- Info & New ----- */
/* ----- Info & New ----- */
/* ----- Info & New ----- */
.info-and-new {
	background-color : rgba(211,110,110,0) ; /* デバッグ用 */
	}


/* Infomation */
/* Infomation */
.info-list {
	font-size : 0.80rem;	
	height : 100px;
	max-width  : 440px;
	margin : 2px  10px  10px 10px ;
	border-radius : 5px ;		/* 角丸め */
	background-color : rgba(255,250,234,1) ;	
	overflow : auto ;
	/* box-shadow: 10px 10px 10px 3px  rgba(128,221,245,0.7) ; */
	}




.info-list  a:hover {
	color : #0bd;				/* アンカーのマウスオーバー時の色を指定 */
	background-color : rgba(255,255,128,1.0) ; 
}


/* Whats new */
/* Whats new */
.whatsnew-list  {
	border-radius : 0px ;		/* 角丸め */
	overflow : auto ;
	height: 175px;
	list-style: none;			/* 中黒を取る */
	margin : 2px  10px  10px 10px ;
	background-color : rgba(255,250,234,1.0) ;	
	font-size : 0.8rem;	
	max-width :   440px ;
	border-radius : 3px ;		/* 角丸め */
	/* box-shadow: 10px 10px 10px 3px  rgba(128,221,245,0.7) ; */
	}

.whatsnew-list a:hover {
	color : #0bd;				/* アンカーのマウスオーバー時の色を指定 */
	background-color : rgba(255,255,128,1.0) ; 
	
}


/* ----- twitter-timeline ----- */
/* ----- twitter-timeline ----- */
/* ----- twitter-timeline ----- */
.twitter-timeline {
	margin : 10px  10px  10px 10px ;
}



/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
.youtube-and-aff {
	margin : 10px  10px  10px 10px ;
	}


.youtube {
	margin : 10px  10px  10px 10px ;
	}


.affi {
	margin : 10px  10px  10px 10px ;
	}



/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
.youtube-2 {
	margin : 10px  10px  10px 10px ;
	}



/* ----- wappen ----- */
/* ----- wappen ----- */
/* ----- wappen ----- */
.wappen {
	max-width : 400px ;
	margin : 10px  10px  10px 10px ;
	}

.wappen p {
	max-width : 300px ;
	font-size : 0.875rem ;
	}


.wappen  a:hover {
	color : #0bd;				/* アンカーのマウスオーバー時の色を指定 */
	background-color : rgba(255,255,128,1.0) ; 
}



/* my suiikei */
/* my suiikei */
.suiikei {
	display : flex ;
	background-color : rgba(255,250,234,1.0) ;	
	margin : 1% ;
	padding : 1%;

	/* 
	border-top   : 1px rgba(32,190,223,0.8) solid;
	border-bottom: 1px rgba(32,190,223,0.8) solid;
	border-right : 1px rgba(32,190,223,0.8) solid;
	border-left  : 1px rgba(32,190,223,0.8) solid;
	*/
	}


.suiikei-logo {
	width  : 75px;
	}

.suiikei img:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
	}


/* kanto console */
/* kanto console */
.console {
	display : flex ;
	background-color : rgba(255,250,234,1.0) ;	
	margin : 1% ;
	padding : 1%;
	}

.console-logo {
	width  : 75px;
	}

.console img:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


/* T-shirts */
/* T-shirts */
.t-shirt {
	display : flex ;
	background-color : rgba(255,250,234,1.0) ;	
	margin : 1% ;
	padding : 1%;
	}


.t-shirt-logo {
	width : 75px;
}

.t-shirt img:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}


/* LINE Stump */
/* LINE Stump */
.l-stump {
	display : flex ;
	background-color : rgba(255,250,234,1.0) ;	
	margin : 1% ;
	padding : 1%;
	}


.l-stump-logo {
	width : 75px;
}

.l-stump img:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}




/* ----- tama-and-youtube ----- */
/* ----- tama-and-youtube ----- */
/* ----- tama-and-youtube ----- */
.tama-and-youtube {
	}



.tamagawa-dr-logo {
	width : 245px;

}

.tamagawa-dr img:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}






.top-sec21-3 {
	display : flex ;
	flex-wrap : wrap ;
	justify-content : center ; /* 先頭とラストを両端であとは均等 */

	padding : 2% ;
	
	background-color : rgba(210,210,10,0) ; /* デバッグ用 */

	}

.sudachi {
	background-color : rgba(255,255,255,1) ; /* デバッグ用 */
}



.google-ads {
	}


/* ----------------------------------------------------- */
/*       パラメータプール                                */
/* ----------------------------------------------------- */



.mihon {
	width : 100% ;
		position : absolute ;
	z-index : 12 ;
	display : grid ;
	grid-template-columns : 1fr 1fr ;

	align-items: center;
	display: flex;
	flex-wrap : wrap;
	flex-direction : column;
    justify-content: space-between;
	justify-content: center;
	justify-content: space-around;
	background-color : rgba(241,246,227,1) ;

	text-align : left ;
	flex-wrap : wrap;
	border-radius : 10px ;		/* 角丸め */
	border-radius : 0px 30px 30px 0px ;	/* 角丸め */
	background-color : rgba(255,255,255,1) ;
	min-height : 100vh ;
	box-shadow: 0px 0px 15px 15px rgba(255,255,255,1) 
    visibility: visible;
    opacity: 1;

    -webkit-transition: all .2s ease;
    transition: all .2s ease;

    visibility: hidden;
    
    
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/

	object-fit:none;
	object-fit:cover;
	object-position:20% 20%;

	}






/* フッター 
------------------------------- */
footer {
	background: rgba(32,190,223,1);
    text-align: center;
    margin : 100px 0 0 0 ;
    padding: 20px 0;

	box-shadow: 0px 0px 35px 35px rgba(32,190,223,1) ; 

    
}

footer p {
    color: #fff;
    font-size: 0.875rem;
}

.tokusho-kojinjoho {
    display : flex ;
	justify-content : center ;
}

.tokusho-kojinjoho a{
    color: rgba(255,255,255,0.4);
    font-size: 0.775rem;
	margin : 10px ;
}









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

html {
    font-size: 90%;
}



#top-sec1-slideshow img {
	top : 0% ; 
	height :  100%;
	}

.top-sec1-main {
	top : 18% ;
	}


.top-sec1-header  {
	position : absolute ;
    display: inline;
/* flex を初期値に戻す。縦にはするが、順番変えるため、column では駄目 */
	top : 1%;
	left: 1%;
	right: 1%;


	z-index : 14 ;
	
	}


.main-logo {
	height : 35px;	/* トップのロゴ画像のサイズ調整 */
	
}



.top-sec1-header-nav {
	position : absolute ;
   	flex-direction : column;
	left : 0px;
	right : 0;
    list-style: none;
	align-items: center;
	
  display:none;

	}



#nav-drawer {
  display : inline ;

}

#back-btn {

	top: 35%;
	}
	
	

#kokuchi {
	top:  17%;
	left:  3%;
	width: 25%;
	background-color : pink;
	color:white;
	padding : 5px;
	text-align : center ;
	z-index : 13 ;
	}


.toppage-sns {
	top:  80%;
	z-index : 13 ;
	}


/* Main
------------------------------- */


#top-sec21 {
	height : auto ;
}

#top-sec21 p{
	margin-left : 3% ;
}



}