@charset "UTF-8";

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



:root {

  --dark-color      : rgba(32,81,130,1);
  --medium-color    : rgba(166,164,189,1);
  --light-color     : rgba(213,230,228,1);
  --base-color      : rgba(254,248,244,1);
  --to-top-color    : rgba(0,92,170,1.0);
  --to-last-color   : rgba(0,92,170,1.0);
  --to-top-hov-color    : rgba(176,72,50,1);
  --to-last-hov-color   : rgba(176,72,50,1);
  --main-font-color : rgba(2,37,97,1);
  --margin-color	: rgba(219,158,49,1);
  --hover-color     : rgba(219,158,49,1); 
  --cl-chofu-2019   : lightcyan;
  
  --bg_body			: azure;
  --bg_index		: rgba(0,92,170,1.0);
  --bg_dr_body		: rgba(0,92,170,0.85);
  --bg_sec1			: linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,92,170,1.0)  50%);
  --bg_secd			: linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,92,170,1.0)  50%);
  
  }



html {
	font-size : 100% ;
	}


body {
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 
	line-height : 1.3;
	color : rgba(55,78,103,1) ;
	background-color : var(--bg_body);
	/*background-color : deepskyblue;*/
	/*background-color : rgba(201,134,10,1.0);*/
	/*background : linear-gradient(180deg , rgba(201,134,10,1.0), rgba(251,242,182,1)); */
	margin : 0px;	/* 20220606 ためしに */
	}


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


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


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


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


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




/* 金魚　--------------------------------*/
/* 金魚　--------------------------------*/
/* 魚共通 */
.sakana {
	position : absolute ;
	display : flex ;
	}
	
.sakana:hover {
    transform: rotateZ(180deg);
	}
	
.sakana-eye {
	position : absolute ;
	top : 10% ;
	left :  10% ;
	width: 12%;
	height: 16%;
	background : rgba(255,255,255,1);
	border-radius: 50% 50%;
	}
.sakana-tail {	
	width: 0;
	height: 2%;
	}
	
/* 魚個別 */
.sakana-1-1 {	
	top: 14%;
	right : 25% ;
	width: 75px;
	height: 75px;
	}
	
.sakana-body-1-1 {
	width:70%;	height:35%;
	border-radius: 50% / 50%;
	background-color : rgba(253,40,40,0.7) ;  }
	
.sakana-tail-1-1 {
	border-top: 13px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 20px solid rgba(253,40,40,0.7) ;	
	}
	
.sakana-1-2 {	
	top: 24%;
	right : 8% ;
	width: 75px;
	height: 75px;
	}
	
.sakana-body-1-2 {
	width:70%;	height:35%;
	border-radius: 50% / 50%;
	background-color : rgba(253,40,40,0.7) ;  }
	
.sakana-tail-1-2 {
	border-top: 13px solid transparent;
	border-bottom: 14px solid transparent;
	border-right: 20px solid rgba(253,40,40,0.7) ;	
	}





/* 画面トップのメインビジュアル部 */
/* 画面トップのメインビジュアル部 */
.dr_header {	
    position:  relative;
	max-width : 870px;			/* 2020.08.13 850px → 800px➡870px */
	margin : auto ;
	}

#main-logo img {
	position : absolute ;
	top : 30%;
	margin : auto;
	left : 0;
	right : 0;
	height : 15vh;	/* トップのロゴ画像のサイズ調整 */
	background-color :  rgba(255,255,255,1);
    opacity: 0.9;  /*アニメで0.9→0にする*/
	z-index : 99 ;
	mix-blend-mode : multiply;
	}



#headimg-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 ;   /* 透明 */

	}
	

#headimg-sp	{
	display : none ;
	height : 100vh ;   /* 20230824 縁取り失くすのに伴い98→100 */
	}

#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 */
	}

#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 : 20px ;
	top  : 3% ; /* 20230619 調整 */
	color : rgba(255,255,255,1) ;
	z-index : 11;
	}

.page-tittle1-s {
	font-size : 2.0rem;
	}

.page-tittle1-l {
	font-size : 3.5rem;
	}

.page-tittle2 {
	display : block;
	position:  absolute;
	right : 15px ;
	bottom : 40px ;   /* 20230824 SPでフルにする対応 */
	color : rgba(55,78,103,1) ;
	padding : 2px 5px 2px 5px;
	background: linear-gradient(to right, rgba(255,58,44,1.0) , rgba(250,216,197,1));
	 z-index : 11;
	}




/* 画面topビジュアルの下の日付タイトル部 */
/* 画面topビジュアルの下の日付タイトル部 */

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

.dr_header2 h4 {	
	background-color : lightcyan;
	padding : 5px;
	}



/* ↓h2 (目次部のタイトル2h)*/
/* ↓h2 (目次部のタイトル2h)*/
/* ↓h2 (目次部のタイトル2h)*/



/* dr_honbunの上に設置する大見出し h2 */
/* dr_honbunの上に設置する大見出し h2 */
/* dr_honbunの上に設置する大見出し h2 */
.dr_h2 {	
	max-width : 790px;
	margin : auto;
	color : white ;
	padding : 10px 0 10px 0;
	text-align : center ; 
	/* background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(128,0,128,0.7)); */
	}

.sec1 {
	color : white ;
	background : var(--bg_sec1);
	/*background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,0,128,1)  50%);*/
	/*box-shadow: 0px 0px 10px 10px rgba(163,13,53,1);*/
	}

.sec2 {
	color : white ;
	background : linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,0,128,1)  50%);
	/*background-color : rgba(163,13,53,1) ;  */
	/*box-shadow: 0px 0px 10px 10px rgba(163,13,53,1);*/
	}

.sec-d {
	color : white ;
	background : var(--bg_secd);
	/*background : linear-gradient(to left , rgba(255,255,255,1), rgba(0,0,128,1)  50%);*/
	/*box-shadow: 0px 0px 10px 10px rgba(0,140,214,1);*/
	/*background-color : rgba(10,125,250,1.0) ;  */
	}
	
	





/* ↓h3たちの設定  上の方でディフォルトとしてh3の設定あり*/
.h3-2 {	/* border-bottom : groove 7px rgba(255,128,0,1) ;*/	}
.h3-3 {	border-bottom : groove 7px rgba(228,0,127,1) ;	}
.h3-4 {	border-bottom : groove 7px rgba(0,165,105,1) ;	}








/* ↓↓本文・本体関連 */
/* ↓↓本文・本体関連 */
/* ↓↓本文・本体関連 */
.dr_body {
	background-color : var(--bg_dr_body);
	/*background-color : dodgerblue;*/
	/* ウィンドウを小さくしていく中で、初めは余白が減っていくようにしたいので、margin-left 使わない。 */
	max-width : 850px ;
	margin : auto auto 40px auto;
	padding : 10px 10px 30px 10px;
	/*box-shadow: 0px 0px 25px 25px rgba(205,233,239,1);*/
	}


.dr_honbun {
	/* ウィンドウを小さくしていく中で、初めは余白が減っていくようにしたいので、margin-left 使わない。 */
	position : relative;
	max-width : 750px ;
	margin : auto auto 50px auto ;
	padding : 10px 20px 10px 20px;
	background-color : lightcyan ; 
	/*box-shadow: 20px 20px 10px -10px rgba(149,0,7,1);*/
	}

.dr_honbun_body	{
	background-color : azure ;  
	padding : 10px;
	margin-top : 10px;
	margin-bottom : 45px;
	}

.dr_honbun_body h4	{	/* .dr_honbun_body内をちょっと分けたい時 */
	border-bottom : groove 3px rgba(23,65,242,0.5) ;
	}

.dr_honbun_text {	/* 20230830ただのpから名前つけへ */
	margin : 20px auto 20px auto;
	padding : 30px ;
	background-color :  aliceblue ;  
	/*box-shadow: 0px 0px 25px 25px rgba(254,248,244,1);*/
	}
	





/* ↓↓images関連 */
/* ↓↓images関連 */
/* ↓↓images関連 */

/* ★アスペクト比を変える場合は、divだけでなくimgも必要 */

.dr_photo-grid {
	position : relative;
	display : flex ;
	flex-wrap : wrap ;
	justify-content : space-around ;
	}
	
.dr_photo-grid a {
	display : block;
	text-decoration : underline;	/* アンカーに下線を引く */
	color : rgba(42,36,160,1) ;
	}

.dr_photo-grid a:hover {
	color : rgba(255,255,255,1);				/* アンカーのマウスオーバー時の色を指定 */
	background-color : rgba(252,242,197,1); 
	/* 20230729 shadow かoutlineか boderだと内側に来てサイズが変わって周囲も巻き込む outlineだとキャプションに被さる*/
	box-shadow: 0px 0px 20px 20px lightblue;
	/*outline: 7px solid rgba(255,255,255,1);*/
	}


.dr_photo-grid p {
	background-color : rgba(254,248,244,0) ;  /* 打ち消して透明に */
	/*box-shadow: 0px 0px 25px 25px rgba(254,248,244,0); *//* 打ち消して透明に */
	padding : initial ;
	margin-top : 5px ;
	margin-bottom : 15px ;
	text-align : center ;
	z-index : 10 ;
	} 
	
.dr_photo-setsumei  {
	margin-top : 0px ; 
	padding-top : 0px;
	}

.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 : 5px ;
	margin-bottom : 15px ;
	text-align : center ;
	}




.dr_photo-item {
	max-width : 350px;
	margin : 10px 10px 0px 10px;
	}

.dr_photo-item200 {		/* タテ長用 */
	width : 200px;
	margin : 5px 5px 0px 5px;
	}


.dr_photo-item220 {
	margin : 5px 5px 0px 5px;
	width : 220px;
	}


.dr_photo-item230h {
	margin : 5px 5px 0px 5px;
	}
.dr_photo-item230h img {
	width : 230px;
	height : 180px;
	object-fit:cover;
	/* object-position:50% 50%; */
	}



.dr_photo-item240h {
	margin : 5px 5px 0px 5px;
	}
.dr_photo-item240h img {
	width : 240px;
	height : 180px;
	object-fit:cover;
	/* object-position:50% 50%; */
	}


.dr_photo-item330 {
	max-width : 330px;
	margin : 10px 10px 0px 10px;
	}


.dr_photo-item512 {
	max-width : 512px;
	margin : 10px 10px 0px 10px;
	}


.dr_photo-item640 {
	max-width : 640px;
	margin : 10px 10px 0px 10px;
	}

















/* topへ、bottomへ */
/* topへ、bottomへ */
/* topへ、bottomへ */

#to-top {
	position: fixed;
	top: 64%;
	right: 1%;
	margin: 0;
	width: 50px;
	height: 50px;
	text-align: center;
	z-index: 2;
	border-radius: 50px 50px 0px 0px;
	background : var(--to-top-color);
	/*background: rgba(0,0,128,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 {
	background-color : var(--to-top-hov-color) ;
	/*background-color : rgba(250,216,57,1) ;*/
	/*box-shadow: 0px 0px 15px 15px rgba(0,0,128,0.7);*/
	color : rgba(2,37,98,0.9);
	}

#to-last {
	position: fixed;
	top: 76%;
	right: 1%;
	margin: 0;
	width: 50px;
	height: 50px;
	background : var(--to-last-color);
	/*background: rgba(0,0,128,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 {
	background-color : var(--to-last-hov-color) ;
	/*background-color : rgba(250,216,57,1) ;*/
	/*box-shadow: 0px 0px 15px 15px rgba(0,0,128,0.7);*/
	color : rgba(2,37,98,0.9);
	}



/* 目次部分 */
/* 目次部分 */
.index {	/*「index」の見出し部*/
	text-align : center ;
	width : 50px;
	padding : 10px ;
	color : rgba(255,255,255,1);
	background-color	: var(  --bg_index);
	/*background-color :  rgba(0,0,128,0.7);*/
	/*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) ;
	}

.indexlist a:hover {	
	color : rgba(255,255,255,1);				/* アンカーのマウスオーバー時の色を指定 */
	background-color : rgba(253,40,40,1.0) ; 
	/*box-shadow: 0px 0px 10px 10px rgba(0,111,188,0.4);*/
	} /*個別に指定*/


.indexlist .clr-1:hover { background-color : rgba(0,0,128,0.7); }
.indexlist .clr-2:hover { background-color : rgba(252,224,177,1.0); color : navy; }
.indexlist .clr-3:hover { background-color : rgba(252,224,177,1.0); color : navy;  }
.indexlist .clr-4:hover { background-color : rgba(252,224,177,1.0); color : navy;  }
.indexlist .clr-5:hover { background-color : rgba(252,224,177,1.0); color : navy;  }
.indexlist .clr-6:hover { background-color : rgba(252,224,177,1.0); color : navy;  }
.indexlist .clr-7:hover { background-color : rgba(252,224,177,1.0); color : navy;  }
.indexlist .clr-8:hover { background-color : rgba(0,128,128,1.0); } 
.indexlist .clr-9:hover { background-color : rgba(252,224,177,1.0); color : navy;  }
.indexlist .clr-10:hover { background-color : rgba(10,125,250,1.0); }




.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(21,160,221,0.7)
	}


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

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




.dr_chofubashi-coution-2019 {
	font-style : italic ;
	font-size : 0.8rem ;
	color : var(--cl-chofu-2019);
	/*color : rgba(25,25,255,1) ;*/
	}


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


.dr_youtube  {
	text-align : center ;
	margin : 20px auto 20px auto ; /* 2020.08.13 追加*/
	}


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



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


.dr_syusei_rireki {
	max-width : 750px ;
	margin : auto ;
	padding : 10px 10px 10px 10px;			
	font-size : 0.75rem;
	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 10px auto ; /* 20220813 */
	display : flex;
	flex-wrap : wrap ;		/* 2020.3.10　追加 */
	padding-bottom : 5px ;
	}




.twitter-b1 {
	margin    :5px ;
	}

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

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

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




/* footer --------------------------------- */
footer {
	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(255,255,102,0); 
	}


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






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

	/* ボタンが文字にかぶるようになるので透過する */
	#to-top  {
		background-color : rgba(160,33,24,0.3) ;  
		}

	#to-last {
		background-color : rgba(160,33,24,0.3) ;  
		}

	#to-top a:hover,#to-last a:hover {								
		background-color : rgba(160,33,24,1) ;  
		color : white;
		}
	}




@media (max-width: 600px ) {

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

	/*.dr_photo-item230h img {
		width : 185px;
		height :125px;
		object-fit:cover;
		/* object-position:50% 50%; */
		/*}*/

	/*.dr_photo-item230h p {
		display : none;
		}*/


	}




@media (max-width: 450px ) {
		
	h1 {
	    display: block;
	    font-size: 2em;
    	}	
    	
	#headimg-pc	{
		display : none ;
		}
	
	#headimg-sp	{
		display : block ;
		}

	
	.page-tittle1 {
		position:  absolute;
		left : 10px ;
		top  : 5% ; /* 20230619 調整 */
		bottom : initial;
		color : rgba(255,255,255,1) ;
		}

	.page-tittle1-s {
		font-size : 1.5rem;
		}

	.page-tittle1-l {
		font-size : 2.5rem;
		}

	.page-tittle2 {
		display : block;
		z-index : 11;
		}


	.dr_honbun {
		padding : 10px 10px 10px 10px;	/* SPは余白減らす */
		}

	.dr_honbun_text {	/* 20230830ただのpから名前つけへ */
		margin : 20px auto 20px auto;
		padding : 15px ;
		background-color : aliceblue ;  
		/*box-shadow: 0px 0px 25px 25px rgba(254,248,244,1);*/
		}

	/*.dr_photo-item200 img {
		width : 150px;
		object-fit:cover;*/
		/* object-position:50% 50%; */
		}

	}