/* ----- トップページの内容 ----- */



#topPage{
	background-image: url("../../../images/mainVisual_img.jpg");
}

#topPage .text_opacity{
	margin-top:0;
	background-color:rgba(255,255,255,0.1);
	height: 70%;


}

#topPage .topArticle{
	background-color:rgba(255,255,255,0.9);
	margin-top:5%;
	border-radius: 8px;
	height: 40%;
}

#Introduction h1{
  font-size: 2rem;
  font-family: 'Antic Didone', serif !important;
  position: relative;
  padding: 1em .5em .5em 2em;
}



#page h1.pageTitle {
  font-size: 2rem;
  font-family: 'Antic Didone', serif !important;
  position: relative;
  padding: 1em .5em .5em 2em;
}

h1.pageTitle::before,
h1.pageTitle::after {
  position: absolute;
  content: '';
}
h1.pageTitle::before {
  top: 1.2em;
  left: .7em;
  z-index: 2;
  width: 25px;
  height: 25px;
  background: #2A6E6B;
}
h1.pageTitle::after {
  top: 1.7em;
  left: 1.2em;
  width: 18px;
  height: 18px;
  background: rgba(210, 210, 210, .5);
}



#Introduction {
	width:980px;
	margin: 0 auto;
	color:#fff;

}

#page h1{
	transform:scale(0.8);
	position: relative;  left:-2em;
}


@media screen and (max-width: 767px) {
	
	
	#Introduction{
	width:90%;
	transform:scale(0.7);
	position: absolute; top: 2em;
	z-index:1;
	}
	
	#Introduction h1{
		font-size: 1.5rem;
	}
	
	h1.pageTitle::before {
	  top: 1.2em;
	  left: .1em;
	  z-index: 2;
	}
	h1.pageTitle::after {
	  top: 1.7em;
	  left: 0.7em;
	}
	
	#page{
	width:90%;
	}
	
	#page h1{
	transform:scale(0.5);
	position: relative; top: -1em; left:-0.5em;
	}



}