@charset "UTF-8";

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



:root {

/* 20240618 */
  --to-top-color    : rgba(50,150,200,1); /*deepskyblue;*/	/*rgba(0,92,170,1.0);*/
  --to-last-color   : rgba(50,150,200,1); /*deepskyblue;*/	/*rgba(0,92,170,1.0);*/
  --to-top-hov-color    : rgba(150,150,200,1); /*rgba(176,72,50,1);*/
  --to-last-hov-color   : rgba(150,150,200,1); /*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   :  rgba(55,78,103,1); /*lightcyan;*/
  
  /*--bg_body			: rgba(230,230,250,0.6);*/ /* #E6E6FA; */
  --bg_body			: rgba(211, 237, 251, 1);
  --bg_header2		: rgba(211, 237, 251, 1); /*#E6E6FA;*/
  --bg_index		: rgba(50,150,250,1); /*#CC99CC;*/
  --bg_dr_body		: ;  /*#008000;*/
  --bg_dr_article	: #ffffff;
  --bg_dr_honbun	: rgba(255,255,255,1);  /*#D8BfD8;*/
  --bg_dr_honbun_body	: ;
  --bg_dr_honbun_text	: ;
  --bg_dr_honbun_column	: aliceblue;
  --bg_sec1			: linear-gradient(to left , rgba(255,255,255,0.1), rgba(0,90,50,1.0)  50%);
  /*--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%);
  
  --pd_dr_honbun_text : 10px 30px 10px 20px ; /* 上下：同色の時は10px 異色の時は30px */






	}


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 ;
	/*box-shadow : inset 0px -30px 20px -10px rgba(221,0,0,1);*/
	}

#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 ;
	opacity : 0;
 	transition: opacity 2.0s ease-in-out; 
	}

#headimg-pc	{
	display : block ;
	height : 80vh;			/* 20240616 70→100 */
	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 ;
	opacity: 0;
 	transition: opacity 2.0s ease-in-out; 
	}

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

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

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

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




/* ↓↓↓トップ画像に重ねるタイトル */
/* ↓↓↓トップ画像に重ねるタイトル */
/* ↓↓↓トップ画像に重ねるタイトル */
#page-title1 {		
	position:  absolute;
	display : block;
	
	left : 20px ;
	top  : 3% ; /* 20230619 調整 */
	color : rgba(255,255,255,1) ;
	z-index : 11;
	opacity:1;
	font-size : 3.3rem;
	/*color : rgba(255,250,250,1) ; */
	text-shadow:0px 0px 30px deepskyblue;
 	transition: color 1.5s ease-in-out,text-shadow 1.5s ease-in-out; 
 	}


/*#page-title1 active {	z-index: 10;	 opacity:1;}*/

/*#page-title1 last-active {	z-index: 9;	 opacity:1;}*/
/* opacityを、無印は0、last-activeは0、activeは1にするとふわっとするけど色が同じ場合でも揺らいでしまう */



	
#page-title3 {		
	position:  absolute;
	display : block;
	
	left : 20px ;
	top  : 25% ;
	color : rgba(0,255,255,1) ;
	z-index : 11;
	opacity:1;
	font-size : 1.4rem;
	color : white  ; text-shadow:5px 5px 30px deepskyblue;	
 	transition: color 1.5s ease-in-out,text-shadow 1.5s ease-in-out; 
	}

/*#page-title3 active {	z-index: 10;	opacity:1;}*/

/*#page-title3 last-active {	z-index: 9;	opacity:1;}*/

	

#page-title2 {
	display : block;
	position:  absolute;
	right : 15px ;
	bottom : 15px ;   /* 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));*/
	/* background: linear-gradient(to right,  deepskyblue , rgba(211, 237, 251, 1));*/
	 z-index : 11;
	
	/* 20240707*/
	/*background: rgba(50,250,250,0.2);*/
	background: linear-gradient(to right,  rgba(0,191,255,0.4) , rgba(139,0,0,0.4));
	border : solid #ffffff;
	color : rgba(250,250,250,1);
	border-radius: 10px 10px 10px 10px;
	}




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

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

.dr_header2 h4 {	
	background-color : var(--bg_header2);
	padding : 5px;
	border-radius: 10px 10px 10px 10px;	
	box-shadow: 0px 0px 10px 10px var(--bg_header2);
	}



/* ↓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 ; 
	border-radius: 30px 0px 0px 30px;
	/* 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 : 870px ;
	margin : auto auto 40px auto;
	padding : 0;
	box-shadow: 0px 0px 25px 25px rgba(255,255,255,1);
	border-radius: 0 0 10px 10px;
	}


.dr_article {
	background-color : var(--bg_dr_article);
	/*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);*/
	border-radius: 0 0 10px 10px;
	}
	

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

.dr_honbun_body	{
	background-color :  var(--bg_dr_honbun_body);
	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) ;
	display : inline-block;
	margin-bottom : 5px;
	}


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

.dr_honbun_column {	
	margin : 20px auto 20px auto;
	padding : 30px ;
	background-color :  var(--bg_dr_honbun_column);
	border-radius: 5% 5%;
	/*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-top {	/* タイトルの直下の場合用の上のマージン確保 */
	margin-top : 12px;
	}
	


.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 ;
	
	color : navy;
	font-size : 0.85rem;
	} 
	
.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 : 0px ;
	margin-bottom : 20px ;
	text-align : center ;
	
	color : navy;
	font-size : 0.85rem;
	}




.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-item150h {
	margin : 5px 5px 0px 5px;
	}
.dr_photo-item150h img {
	/*width : 230px;*/
	height : 120px;
	object-fit:cover;
	/* object-position:50% 50%; */
	}



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


.dr_photo-item130wh {
	margin : 5px 5px 0px 5px;
	}
.dr_photo-item130wh img {
	width  : 200px;
	height : 150px;
	object-fit:cover;
	/* object-position:50% 50%; */
	}

.dr_photo-item129wh {
	margin : 5px 5px 0px 5px;
	}
.dr_photo-item129wh img {
	width  : 200px;
	height : 150px;
	object-fit:cover;
	/* object-position:50% 50%; */
	}
	

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


.dr_photo-item101w {
	margin : 5px 5px 0px 5px;
	}
.dr_photo-item101w img {
	width : 101px;
	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;
	display : none;	/* 20241021 初期状態で出ない様に */
	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;
	display : none;	/* 20241021 初期状態で出ない様に */
	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_youtube2  {
	text-align : center ;
	margin : 20px auto 5px auto ; /* 2020.08.13 追加*/
	}

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

.dr_youtube2 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);
	border-radius: 10px 10px 10px 10px;
	}


.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) ; */ 
		background-color : rgba(50,150,200,0.3);
		}

	#to-last {
		/*background-color : rgba(160,33,24,0.3) ; */ 
		background-color : rgba(50,150,200,0.3);
		}

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




@media (max-width: 600px ) {

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

	}




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

	
	#page-title1 {
		position:  absolute;
		left : 10px ;
		top  : 5% ; /* 20230619 調整 */
		bottom : initial;
		color : rgba(255,255,255,1) ;
		font-size : 2.5rem;
		}

	#page-title3 {		
	
		left : 20px ;
		top  : 65% ;
		font-size : 1.3rem;
		}


	#page-title2 {
		display : block;
		z-index : 11;
		}


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

	.dr_honbun_text {	/* 20230830ただのpから名前つけへ */
		margin : 12px auto 20px auto;	/* 20→12 */
		padding : 15px ;
		/*background-color : aliceblue ;  */
		/*box-shadow: 0px 0px 25px 25px rgba(254,248,244,1);*/
		}
		
	.dr_photo-item129wh img {
		width  : 140px;
		height : 110px;
		object-fit:cover;
		/* object-position:50% 50%; */
		}
	}