@charset "UTF-8";

/* トップ画像のスライドパターン:fade-in、fade-outするタイプ */

/* 画面トップのメインビジュアル部 */
.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 */
	position: relative;  /* <-- 20230709 */
	}

#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;
	
	left : 20px ;
	top  : 3% ; /* 20230619 調整 */
	color : rgba(255,255,255,1) ;
	z-index : 11;
	opacity:1;
	font-size : 3.3rem;
	text-shadow:0px 0px 30px deepskyblue;
 	transition: color 1.5s ease-in-out,text-shadow 1.5s ease-in-out; 
 	}


#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-title2 {
	display : block;
	position:  absolute;
	right : 15px ;
	bottom : 15px ;   /* 20230824 SPでフルにする対応 */
	padding : 2px 5px 2px 5px;
	 z-index : 11;
	
	/* 20240707*/
	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;
	}