@charset "UTF-8";
html{
     	background-color:#ccc;
      margin:0;
	padding:0;
	font-family:"BIZ UDPMincho","HGP明朝 E","YuMincho",YuMincho,"Hiragino MinchoProN",serif;}
*, *::before, *::after {
  box-sizing:border-box;
}

body {
	text-align: center;
	margin:0 auto;
	padding: 0;
	width:100%;
	background-color:#ccc;
}
header img{
	width:100%;
	max-width:1024px;
}
section{
	display:inline-block;
	background-color:#fff;
	margin:1em;
	width:100%;
	max-width:640px;
	vertical-align:top;
}

section > div{
	display:inline-block;
	vertical-align:top;
	background-color:#fff;
}
figure{
	float:right;
	width:30%;
	max-width:300px;
	padding:8px;
	border-radius:0.5em;
	text-align:center;
	box-shadow:inset 0 0 6px 6px #eee;
	border:1px solid #ddd;
}
figure > img {
	width:100%;
}

section  img{
	width:100%;
	vertical-align:top;
}


p{
	text-align:left;
	margin:0.5em 1em;
	text-indent:1em;
	line-height:175%;
}
p.右{
	text-align:right;
}

p.客席{
	color:#f0f;
}

h1{  
	color: #000;
	padding:0.5em 0;
	text-align:center;
	margin:0;
	font-size:18pt;
	font-family:"HG明朝E",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
	text-shadow:3px 3px 3px #C9C9F8;
	line-height:150%;
}
h2{  
	color: #040;
	padding:0.5em 1em;
	background-color:#f8f8f8;
	text-align:left;
	margin:0;
	font-size:14pt;
	font-family:"HG明朝E",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
	text-shadow:3px 3px 3px #C9C9F8;

}




.w50{
	width:50%;
}
.w40{
	width:40%;
}
.w30{
	width:30%;
}
.w20{
	width:20%;
}

.右寄り{
	float:right;
	margin-left:0.5em;
	margin-right:1em;
}


i{
	color:#f00;
	font-style: normal;
	text-shadow:0 0 8px #ff0;
}
b{
	color:#c04;
}

a {
	color: #00A; 
	text-decoration:underline ; 
 }

footer{
	text-align:center;
	padding:0.5em;
	background-color: white ;
}
footer a{
	display:inline-block;
	line-height:200%;
	text-decoration:underline ; 
}
footer a:hover{
	color:red;
}

#戻る{
	display:block;
	opacity:1;
}

#戻る:after{
	content:"戻る";
	position:fixed;
	top:0.1em;
	left:0.1em;
	font-size:20pt;
	padding:0.2em;
	width:3.5em;
	border:2px solid gray;
	text-align:center;
	border-radius:1em;
	opacity:0.3;
	font-family:"HG明朝E",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
	text-decoration:none;
	color:blue;
	z-index:5;
}

#戻る:hover::after{
	opacity:1;
	color:red;
	border-color:red;
	background-color:white;
	text-shadow:3px 3px 3px #C9C9F8;
}


.点滅楕円{
	position:absolute;
	display:none;
	border:2px solid red;
	 border-radius: 50%;
 	animation-duration: 0.5s;
  	animation-name: key点滅;
	animation-fill-mode:backwords;
	animation-iteration-count: infinite;
}

@keyframes key点滅{
  0%   {
	box-shadow:0 0 4px 4px #fe0;
	opacity:0.5;
	 }
  50% { 
	box-shadow:0 0 1px 1px #f00;
	opacity:1;
	}
}


.図枠 {
    position: relative;
    display: inline-block;
	line-height:0;
}

.図枠 img{
	width:100%;
	max-width:720px;
}

.部分枠{
	position:absolute;
	display:block;
	border:4px  solid #0ff;
	box-shadow:0 0 4px #8ff;
	opacity:0;
}

.部分枠:hover{
	opacity:1;
}


u{
	padding:4px 4px;
	margin:8px 0;
	cursor:context-menu;
	text-decoration: #faa wavy underline;
	background-color:#fffaff;
	box-shadow:0 0 4px 4px #fffff0;
}

u:hover{
	color:red;
	text-shadow:3px 3px 3px #C9C9F8;
	box-shadow:0 0 4px 4px #ffe;
}

.矢印{
	position:absolute;
	display:none;
	background-image:url("cursor.svg");
 	background-size: contain;
	width:100px;
	height:100px;
	margin-top:-50px;
	margin-left:-50px;
}

.矢印右 ,.矢印左,.矢印下 ,.矢印上{
    	position: absolute;
	top:0;
	left:0;
    	font-size: 40pt;
	line-height:0;
	display:none;
    	color: red;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 500;
}

.矢印右 {
	margin-left:-0.9em;
	margin-top:0.05em;
}
.矢印左 {
 	margin-left:0;
	margin-top:0;
}

.矢印下{
	margin-left:-0.5em;
	margin-top:-0.3em;
}
.矢印上{
	margin-left:-0.45em;
	margin-top:0.45em;
}

.四角形{
    	position: absolute;
    	color: blue;
	border:1px solid blue;
	background-color:#0ff;
	width:4em;
	height:1em;
}

.出現画像{
	width:100%;
    	position: absolute;
	display:none;
	top:0;
	left:0;
}


#矢印7{
	animation-name: key矢印7;
	animation-duration: 2s;
	animation-fill-mode:backwords;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}

@keyframes key矢印7{
  0%  {left:32.19%; top:68.89%;	rotate:35deg;}
100%{left:56.41%; top:32.50%;	rotate:35deg;}
}

#矢印62{
	animation-name: key矢印62;
	animation-duration: 1s;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-timing-function:linear;
}

@keyframes key矢印62{
  0%  {left:11.64%; top:49.72%;	rotate:60deg;}
  50%  {left:11.64%; top:49.72%;	rotate:60deg;}
  75%  {left:27.42%; top:40.00%;	rotate:90deg;}
100%{left:34.69%; top:41.11%;	rotate:120deg;}
}