@charset "UTF-8";
/* ISESHIMA Emergent Life Support */

@media screen and (min-width:769px){ 	/* PC用設定 */
	div.grid {
		display: grid;
		grid-template-columns: 20px 1fr 20px;
		grid-template-rows: 
			[head] 150px
			[title] auto
			[sub] auto
			[contents] auto
			[foot] 100px;
		grid-row-gap: 5px;
		row-gap: 5px;
	}
	section.maincontents {
		grid-row:contents;
		grid-column:1/-1;
		display: inline-block;
	}
	section.maincontentsnomenu {
		grid-row:contents;
		grid-column: 1/ -1 !important;
		display: block;
		justify-self:stretch left;
	}
}
div.title {
	grid-column:1/-1;
	grid-row:title;
	background-image: url('images/9thherophoto.jpg') ;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain ;
	background-position: center center;
	min-height: 20em;
	z-index: -1;
	filter:blur(0) brightness(100%);
}
.centering {
	display: block;
	margin: 0 auto;
}


section.title {
	grid-column:1/-1;
	grid-row:title;
	min-height: 20em;
	z-index: 0;
}
section.maincontents h2 {
	background-color: transparent;
	border: none;
	text-align: center;
	font-size: large;
	position: relative;
	color: #000000;
}
section.maincontents h2::before {
	content:'' ;
	position: absolute;
	top: 0;
	left: 0;
	background-image:url('images/mark4.jpg');
	background-repeat:no-repeat;
}
section.maincontents a {
/*	background-color:  transparent;*/
	background-color:  #eedc10;

	color: #000000;
}

section.maincontents dl {
	max-width: 40em;
	margin:1em auto ;
	line-height: 1em;
	overflow: hidden;
}
section.maincontents dt {
   	position: relative;
    width: 14em;
    background-color: #f0f0f0;
/*    color: #ffffff;*/
    font-size:small;
    padding: 1em;
    margin-left: 1em;
	border-top:1px solid #ffffff ;
	border-bottom:1px solid #111 ;	
   	box-shadow: 0 2px 2px #101010;
    float: left;
}
section.maincontents dt:after {
	  content: "";
	  position: absolute;
	  top: 7px;
	  right: -12px;
	  height: 0;
	  width: 0;
	  border: 6px solid transparent;
	  border-left: 6px solid #555;
}
section.maincontents dt:before {
	  content: "";
	  position: absolute;
	  top: 7px;
	  right: -14px;
	  height: 0;
	  width: 0;
	  border: 7px solid transparent;
	  border-left: 7px solid #555;
}

section.maincontents dd {
    max-width: 28em;
    background-color: #f0f0f0;
    padding:1em;
    margin-left:18em;
    font-size:small;
   	border-top:1px solid #fff ;
	border-bottom:1px solid #111 ;
	border-righ:1px solid #111 ;
	box-shadow: 0 2px 2px #101010;
}

/*section.maincontents dt:hover, dd:hover{
    background-color:#d01010;
	border-bottom:1px solid #d01010 ;
	border-righ:1px solid #d01010 ;
    color:#ffffff;
}*/

section.maincontents ul {
	max-width: 46em;
	margin: 0 auto;
}
section.maincontents img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

section.maincontents table {
	border-collapse: collapse;
	width: 100%;
}
section.maincontentsnomenu table {
	border-collapse: collapse;
	width: 100%;
	font-size: small !important;
}
section.maincontents table th td ,section.maincontentsnomenu table th,td {
	border:solid 1px;
	padding: 10px;
	text-align: center;
}

section.maincontents table th,section.maincontentsnomenu table th {
	width: 100px;

}



/* ///////////////////////////// */
/* 以下ポータブルデバイス用設定 */
/* ///////////////////////////// */

@media screen and (max-width:768px){ 	/* iphone用画面 */
	div.grid {
		display: grid;
		grid-template-columns:  1fr;
		grid-template-rows: 
			[head] 80px
			[title] auto
			[sub] auto
			[contents] auto
			[foot] 100px;
		grid-row-gap: 1px;
		row-gap: 1px;
	}
	
/*minmax(0, 1fr)*/
	section.maincontents {
		grid-row:contents;
		grid-column: 1/-1 !important;
		display: block;  /* inline-blockからblockに変更 */
		margin: 0 auto;  /* 左右中央寄せ */
		width: 100%;     /* 幅を調整 */
		max-width: 100%; /* スマホの画面幅に合わせる */
	}
	section.maincontents dl {
	width: auto !important;
	margin:0 auto ;
	line-height: 1em;
	overflow: visible;
	}
	header h1.animation1 {
		padding-top: 0.8em;
		text-align: center;
		font-size: small;
	}
	nav.top ul,li,a{
		font-size: 8px !important;
	}
	section.maincontents {
		grid-row:contents;
		grid-column:1/-1;
		display: inline-block;
	}
	section.maincontents p,li,h2,dl,dt,dd,a {
		font-size: xx-small !important;
	}
	section.title h2 {
		font-size: small !important;
	}
	section.title p {
		font-size: x-small !important;
	}
	div.caption {
		width: 100%;
		font-size: small !important;
		text-align: center !important;
	}
	section.maincontentsnomenu table {
		border-collapse: collapse;
		width: 100%;
		font-size: x-small !important;
}

}


/* キラッとさせる*/ 
.reflection-img{
    width       :300px;
    height      :300px;
    position    :relative;
    margin: auto;
    overflow    :hidden;
}

.reflection-img2{
    width       :100%;
    height      :100%;
    position    :relative;
    margin: auto;
    overflow    :hidden;
}

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 3s ease-in-out 1;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out 1;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 3s ease-in-out 1;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 3s ease-in-out 1;
    -o-transform: rotate(45deg);
    -o-animation: reflection 3s ease-in-out 1;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
 
 /* 画像の上に文字を載せる*/


.layer1 {
	max-width:		600px;
	max-height: 	450px;
	overflow:		hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	position:		relative;	/* 相対位置指定 */
	box-sizing: border-box;  /* 余白やパディングを含めて制御 */
}
.layer1 .caption {
	width: 			100%;  /* 親要素の幅に合わせる */
	font-size:		22px;
	text-align: 	center;
	padding-top:	10px;
	color:			#fff;
	box-sizing:		border-box;  /* パディングも含めて幅を管理 */
}
.layer1 .mask {
	width: 		100%;
	height:			40%;
	position:		absolute;	/* 絶対位置指定 */
	top:			70%;
	left:			0;
	opacity:		1;	/* マスクを表示しない */
	background-color:	rgba(128,0,0,0.3);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.5s ease;
	box-sizing:		border-box;  /* パディングも含めて幅を管理 */
}
.layer1:hover .mask {
	width: 			100%;   /* 親要素の幅に合わせる */
	opacity:		1;	
	top: 			60%;
	height: 		50%;
	padding-top: 	0%;
	background-color:	rgba(128,0,0,0.8);
	box-sizing:		border-box;  /* 幅を超えないように */
}

.layer1 p {
	color: white;
	margin: 10px;
	text-align: center;
}
div.caption {
	text-align: center;
}