@charset "UTF-8";

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


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


    /*background: linear-gradient(to bottom right,rgba(255,213,213,1) , rgba(125,233,236,1)); */
    /*background: linear-gradient( 135deg , orange 70% , green );*/
    background: linear-gradient( 155deg   , rgba(221,255,255,1) 60%  , rgba(32,190,223,1)  );
    
    }


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


h1 {
	font-size : 1.5em;
	/*font-family: 'Zen Antique Soft' , sans-serif;	*/
	font-family: "LXGW Marker Gothic", sans-serif;
	}


h3 {
	font-size : 1.2em;
	/*font-family: 'Zen Antique Soft' , sans-serif;	*/
	font-family: "LXGW Marker Gothic", sans-serif;
	}	
	
/* ----------------------------------------------------- */
/*       ヘッダーとメイン                                */
/* ----------------------------------------------------- */

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





.top-sec1-slideshow-first img {

	position : absolute ;
	display : block;
	box-shadow: 0px 0px -25px -25px rgba(32,190,223,0.1) ; 

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

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

	}
	
	

.top-sec1-slideshow-pc::after {
	content: '';
	box-shadow:  inset 0px -30px 20px -10px rgba(221,255,255,1);
	z-index :13;
	position: absolute;
	top: 0;
	bottom: -1px; 	/* 20240724 0だとブラウザによっては線が入る */
	left: 0;
	right: 0;
 }


.top-sec1-slideshow-pc img {

	position : absolute ;
	
	display : block;
	
	top : 0 ;

	/* border-radius : 0px 0px 1000px 1000px / 0px 0px 40px 40px;	*/  /* 角丸め */

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

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

	}

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

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

.top-sec1-slideshow-sp img {	display : none;	}










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

.top-sec1-header  {
	position : absolute ;
    display: flex;   /* SPだとinline でないとハンバーガーがセンタリングされる */
    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 ;
	}


.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) ;  */
    background: linear-gradient( 155deg   , rgba(221,255,255,0.5) 50%  , rgba(32,190,223,0.5)  );

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

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

.menu_second-level-pc  li {

	margin-bottom : 7px ;

	}



#main-logo img {
	position : absolute ;
	top : 10%;
	left : 5%;
	height : 15vh;	/* トップのロゴ画像のサイズ調整 */
	background-color :  rgba(255,255,255,1);
    opacity: 0.9;
	z-index : 15 ;
	mix-blend-mode : multiply;
	}








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

#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; */
  background-color :  rgba(255,255,255,1);
  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: 14;
  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: 0px;			/* 20241026 10px→0px */;
  z-index: 16;/*最前面に*/
  width: 60%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 70%;			/* 20241026 100%→70%; */;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/

	border-radius : 0px 30px 30px 0px ;	/* 角丸め */

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

}



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



.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(125,233,236,0.8) ; */ 
    background: linear-gradient( 155deg   , rgba(221,255,255,1) 50%  , rgba(32,190,223,1)  );
   -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-content-menu a	{
	display : block;
	}



.nav-menu-decoration1	{
    position: absolute;
    bottom: 0px;
    left : 0px ;
    width: 65%;
    height : 30%;
	border-radius : 0px 80% 0px 0px ;	/* 角丸め */
    background-color : rgba(159,221,236,1)
	}

.nav-menu-decoration2	{
    position: absolute;
    bottom: 0px;
    right : 0px ;
    width: 80%;
    height : 25%;
	border-radius :  90% 0px 0px 0px ;	/* 角丸め */
    background-color : rgba(159,221,236,1)
	}


.nav-menu-decoration3	{
    position: absolute;
    bottom: 10%;
    right : 30% ;
    width: 15px;
    height : 15px;
	border-radius : 50px;	/* 角丸め */
    background-color : rgba(85,170,255,0.5)
	}


.nav-menu-decoration4	{
    position: absolute;
    bottom: 20%;
    right : 40% ;
    width: 20px;
    height : 20px;
	border-radius : 50px;	/* 角丸め */
    background-color : rgba(85,170,255,0.5)
	}


.nav-menu-decoration5	{
    position: absolute;
    bottom: 25%;
    right : 30% ;
    width: 25px;
    height : 25px;
	border-radius : 50px;	/* 角丸め */
    background-color : rgba(85,170,255,0.5)
	}


.nav-menu-decoration6	{
    position: absolute;
    bottom: 35%;
    right : 40% ;
    width: 30px;
    height : 30px;
	border-radius : 50px;	/* 角丸め */
    background-color : rgba(85,170,255,0.5)
	}


.nav-menu-decoration7	{
    position: absolute;
    bottom: 45%;
    right : 15% ;
    width: 35px;
    height : 35px;
	border-radius : 50px;	/* 角丸め */
    background-color : rgba(85,170,255,0.5)
	}



/*チェックが入ったらもろもろ表示*/
#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 : 38% ;

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

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

	z-index : 13 ;
	text-align : center ;
	
	text-shadow:  5px  5px  6px    rgba(32,190,223,0.5),
				 -5px -5px  6px    rgba(32,190,223,0.5),
				 -5px  5px  6px    rgba(32,190,223,0.5),
				  5px -5px  6px    rgba(32,190,223,0.5);
	}




			#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(32,190,223,0.3);*/
    			background: rgba(0,64,128,0.3);
				color: white;
				text-align: center;
				border-radius: 0px;
				z-index: 20;

				}
			
			#to-top a {
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
				vertical-align: middle;
			    text-decoration: none; 
				line-height : 40px ;
				border-radius: 0px;
				font-size : 1.3em;

				}

			#to-top a:hover {								/* 別のcssで指定されているもののここだけ修正 */
				color : rgba(255,255,255,1) ;				/* アンカーのマウスオーバー時の色指定を上書き */
				background-color : rgba(255,255,255,0) ;  /* 透明で上書き */ 
				
				box-shadow: 0px 0px 15px 15px rgba(0,189,95,0.5);
				}



			#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(255,255,102,0.7);  /* rgba(143,188,143,0.5); */
    			background: rgba(0,64,128,0.3);
				color: white;
				text-align: center;
				z-index: 20;
				border-radius: 0px;

				}
			
			
			#to-last a {
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
				vertical-align: middle;
				
			    text-decoration: none; 
				border-radius: 0px;
				line-height : 60px ;
				font-size : 1.3em;



				}

			#to-last a:hover {								/* 別のcssで指定されているもののここだけ修正 */
				color : rgba(255,255,255,1) ;				/* アンカーのマウスオーバー時の色指定を上書き */
				background-color : rgba(255,255,255,0) ;  /* 透明で上書き */ 
				
				/* box-shadow: 0px 0px 15px 15px rgb(206,206,255); */
				box-shadow: 0px 0px 15px 15px rgba(0,189,95,0.5);
				}






	
/* --- 名前変えて無効化　コメントアウトの代わり --*/
#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 ;
	}



/* 2024 スライドショー選択ボタン */
.toppage-slide-btns {
	display : flex ;
	position : absolute ;
	/*基準を画面の左上に*/
	bottom:  30px;
	left: 3%;
	background-color : rgba(255,255,255,0.0);
 	z-index : 14 ;
	width  : 140px;
	border-radius : 3px ;		/* 角丸め */
	
	align-items : center ;	
	
	}

.toppage-slide-btns input[type="radio"]{
	display : none;
	}

.toppage-slide-btns input[type="radio"]:checked + label {
	background-color : rgba(225,225,255,0.7);
	}
	
.toppage-slide-btn {
	width  : 25px;
	height : 25px;
 	padding : 4px;
 	margin  : 1px 4px 1px 5px;
	background-color : rgba(255,25,55,0.4);
	}




/* 2020.09.21 SNSアイコン　*/
.toppage-sns {
	display : flex ;
	position : absolute ;
	/*基準を画面の左上に*/
	bottom:  30px;
	right: 3%;
	background-color : rgba(255,255,255,0.6);
 	z-index : 14 ;
	width  : 180px;
	border-radius : 3px ;		/* 角丸め */
	
	align-items : center ;	
	
	}

.toppage-sns-insta {

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

	}

.toppage-sns-twitter {

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

	}

.toppage-sns-facebook {

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

	}


.toppage-sns-tweet {

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

	}





/* PCの水位 */
.top-sec1-suii {

	position : absolute ;
	/*基準を画面の左上に*/
	bottom:  80px;
	
	/* 左右1%にすることでabsoluteで中央寄せ */
	/* left: 1%; */
	right: 3%; 
	margin : auto ;
	max-width : 200px ;
	
	
	
	border-radius : 3px ;		/* 角丸め */
	
	background-color : rgba(255,255,255,1);
 	z-index : 13 ;
	opacity:  0.5;
	

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









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

#top-sec21 {
	}


#top-sec21 .subtitle {
	font-weight : bold;
	}



.top-sec21-con {
	display : flex ;
	flex-direction : column ;
	max-width : 1280px ;
	margin : auto ;
	padding : 1%;
	}



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





/* PCでも水位計は画像の外にするが、余白は調整する。 */
.top-sec1-suii {
	display : none;
	}


.top-sec21-1 {
	display : block ;
	}



/* SPはメディアクエリの下で調整する。 */
.top-suii  {
	font-size : 0.75rem;	
	width : 96%  ;
	border-radius : 0px ;		/* 角丸め */
	/* background-color : rgba(255,250,234,1) ; */
	background-color : rgba(255,255,255,1) ;
	/* box-shadow: 10px 10px 10px 3px  rgba(128,221,245,0.7) ;  */
	margin : 15px  auto  15px auto ;
	padding : 10px ;
	}







/* 2014.12.14  水位計の　scaleの外だし*/
.suii08 {
	transform:scale(0.8,0.8);
	-moz-transform:scale(0.8,0.8);
	-webkit-transform:scale(0.8,0.8);
	-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) ; /* デバッグ用 */
	margin-top : 15px ;
	}



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


/* Infomation */
/* Infomation */
.info-list {
	font-size : 0.85rem;	
    line-height: 1.7;
	height : 110px;
	max-width  : 440px;
	margin : 2px  10px  30px 10px ;
	padding : 5px; 
	border-radius : 5px ;		/* 角丸め */
	/* background-color : rgba(255,250,234,1) ; */
	background-color : rgba(255,255,255,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: 190px;
	list-style: none;			/* 中黒を取る */
	margin : 2px  10px  10px 10px ;
	padding : 5px; 
    line-height: 1.7;
	/* background-color : rgba(255,250,234,1) ; */
	background-color : rgba(255,255,255,1) ;
	font-size : 0.85rem;	
	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-soto {
	/*display : none;  */ /* 20230730 復活したっぽい */
	margin : 0px  10px  30px 10px ;
}



/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
.youtube-and-aff {
	margin : 2px  10px  10px 10px ;
	max-width : 90%; /* 20240207 amazonバナー廃止対応 */
	width : 370px; /* 20240207 amazonバナー廃止対応 */
	}


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

	}


.youtube-iframe {
	position : relative ;
    width:100%;
    height:0;
    padding-top:75%;

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

	}




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



/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */
/* ----- Youtube & affi ----- */

.youtube-2-group {
	margin : 10px  8px  10px 8px ;
	max-width : 560px;
	}

.youtube-2-group .subtitle {
	}


.youtube-2-waku {
	display : flex ;
	flex-wrap : wrap ;
	justify-content : space-around ;
	margin : 0px  0px  1px 0px ;
	}




.youtube-2-1 {
	margin : 0px  4px 20px 4px;
	}
	
.youtube-2-1 p {
	margin : 0px;
	font-size : 0.9rem ;
	}
	

.youtube-2 iframe {
	border-radius : 7px ;		/* 角丸め */
	}


.youtube-2-1-1 {
	}


.youtube-2-1-1 a {
	display : block;
	}
	

.youtube-2-1-1 img {
	vertical-align: top;  /* 画像の下の隙間をなくす */
	/*border-radius : 10px;*/	/* 20241029 ほんの少し角を取る 20250613 thumbnailで設定*/
	}


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

	border-radius : 10px;	/* 20250613 */
	}

.thumbnail:hover {
	box-shadow: 0px 0px 20px 20px    rgba(32,190,223,0.5);
	}

/* ----- wappen ----- */
/* ----- wappen ----- */
/* ----- wappen ----- */



.wappen-soto {
	margin : 10px  8px  10px 8px ;
	max-width : 570px;
	}
	
.wappen {
	display : flex ;
	flex-wrap : wrap ;
	justify-content : space-around ;
	margin : 15px  8px  10px 8px ;
	}

.wappen div, .wappen img {
	border-radius : 10px;	/* 20241029 ほんの少し角を取る */
	}

.wappen p {
	max-width : 130px ;
	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 : 10px 4px 10px 4px ;
	padding : 0px;

	/* 
	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  : 130px;
	}

.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 : 10px 4px 10px 4px ;
	padding : 0px;
	}

.console-logo {
	width  : 130px;
	}

.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 : 10px 4px 10px 4px ;
	padding : 0px;
	}


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

.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 : 10px 4px 10px 4px ;
	padding : 0px;
	}


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

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


/* yahoo-shopping */
.y-shopping {
	display : flex ;
	justify-content : center ;
	margin : 10px 4px 10px 4px ;
	padding : 0px;
	width : 266px ;
	}




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

.tamagawa-dr  {
	margin : 10px 4px 10px 4px ;
	padding : 0px;
	}


.tamagawa-dr p {
	max-width : 245px ;
	font-size : 0.875rem ;
	}


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

}

.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,0);
    text-align: center;
    margin : 100px 0 0 0 ;
    padding: 20px 0;

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

    
}

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


.copy-light {
    color: #fff;
	font-family : Verdana , “Droid Sans”, sans-serif; /* この行、そしてverdana,“Droid Sans”がないとandroidだけ色がおかしくなる */
	}




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

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



.top-sec1-bottom-nav {
    display: flex;
    flex-wrap : wrap ;
    list-style: none;
    justify-content: center ;
    
    padding : auto ;
    margin-bottom : 30px;
    
	}


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

	border-radius : 10px;		/* 角丸め */
    font-size: 0.775rem;
	}


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

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





.old-enter2 {
    position: relative;
}



.old-enter2:hover .bottom_second-level {
    visibility: visible;
    opacity: 1;
    
}




.bottom_second-level-pc {
    list-style: none;			/* 中黒を取る */
    position: absolute;
    bottom : 20px;
    right : 0px ;
    
    width: 120px;
    /*background-color : rgba(125,233,236,1);*/
	/*background-color : rgba(32,190,223,0.9) ;  */
    background: linear-gradient( 155deg   , rgba(221,255,255,1) 50%  , rgba(32,190,223,1)  );

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

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

.bottom_second-level-pc  li {

	margin-bottom : 7px ;

	}



.bottom_second-level-pc  a {

	margin :auto 2px auto 2px ;
	padding :auto 2px auto 2px ;

	}









/* モバイル版
------------------------------- */

@media (max-width: 1180px) {

.wappen-soto {
    max-width : 100%;
	}
}


@media (max-width: 1050px) {
.youtube-2-group {
	max-width : 100%;
	}
}



@media (max-width: 800px) {

html {
    font-size: 90%;
}


/* spのz-indexはpcより小さくして置いて、メディアクエリで大きくする */




/* 20241024 PCにしかなかったのでSPにも記述 */
.top-sec1-slideshow-pc {
	display : none;
}
.top-sec1-slideshow-sp::after {
	content: '';
	box-shadow:  inset 0px -40px 20px -20px rgba(221,255,255,1);
	/*box-shadow:  inset 0px -30px 20px -10px rgba(221,255,255,1);*/
	z-index :13;
	position: absolute;
	top: 0;
	bottom: -1px; 	/* 20240724 0だとブラウザによっては線が入る */
	left: 0;
	right: 0;
 }


.top-sec1-slideshow-sp img {

	position : absolute ;
	
	display : block;
	
	top : 0 ;

	/* border-radius : 0px 0px 1000px 1000px / 0px 0px 40px 40px; */	 /* 角丸め */

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

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

	}
	


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

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

.top-sec1-slideshow-pc img {	display : none;	}


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


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

	}




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

	}


#main-logo img{
	margin : auto;
	top : 20%;
	left  : 0;
	right : 0;
	z-index : 13;
	}



#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 : 15 ;
	}

.toppage-slide-btns {
	bottom:  10%;
	z-index : 14 ; /* 20230718 押せてなかった。いつから? はじめから? 13→14 */
	}
	
.toppage-sns {
	bottom:  10%;
	z-index : 14 ; /* 20230718 押せてなかった。いつから? はじめから? 13→14 */
	}


.top-sec1-suii {
	display : none;
	}


.top-sec21-1 {
	display : block ;
	}



.top-suii  {
	margin : 5px  10px  5px 10px ;
	padding-left : 3px ;
	padding-right  : 3px ;
	}


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


#top-sec21 {
	height : auto ;
}

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

.top-sec21-2 {
	justify-content : space-around ; /* 先頭とラストを両端であとは均等 */
	}




}