/*デバッグ用：各要素が必ず線で囲まれて、背景を白で塗りつぶされる*/
/*
*	{
	border: solid 1px;
	background-color: #ffffff; 
}
*/
body	{
    min-height: 100vh;
}
main{
	margin:auto;
	text-align:center;
    vertical-align: text-top;
    min-height: 94vh;
    font-size:110%;
    width:600px;
}
footer	{
	display:block;
	width:100%;
    margin-top: auto;
    bottom:0;
	text-align: right;
    min-height: 5vh;
}
p.groupDiscript{
	margin:0;
}
li{
	display:inline-block;
	width:180px;
    font-size:150%;
}
h1{
	width:100%;
	text-align:center;
	margin: 0;
}
h2{
	margin:0;
	margin-top:20px;
	clear:both;
}
h3{
	margin:0;
	border-bottom: solid 2px black;
	
    height: 60px;
    border-bottom-width: 2px;
    line-height: 50%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.0));
    color:#FFF;
	text-align:center;
	text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
	          -1px 1px 0 #000, 1px -1px 0 #000,
	          0px 1px 0 #000,  0-1px 0 #000,
	          -1px 0 0 #000, 1px 0 0 #000;
}
dd:nth-child(6n+2) h3{
	background: linear-gradient(270deg, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.0));
}
dd p{
	margin:0;
}
img.icon{
	height:198px;
	width:198px;
	border: solid 1px black;
	background: linear-gradient(220deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.0));
}
dt:nth-child(6n+1) img.icon{
	background: linear-gradient(140deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.0));
}
dl{
	width:600px;
	margin:auto;
	clear:both;
}
dt,dd{
	display:block;
	height:200px;
    background: #888;
}
dt{
	width:200px;
	clear:right;
	float:right;
	
    background: #888;
}
dd p{
	flex:auto;
    background: rgba(255, 255, 255, 0.8);
    padding:3px;
}
dd .quoteContainer,dd .quoteContainer_hasDetail{
    background: rgba(255, 255, 255, 0.8);
}
dd .quoteContainer_hasDetail{
    background-image: url("img/hasDetail.png");
    background-repeat: no-repeat;
    background-size:20px;
	background-position: left bottom
}
dd:nth-child(6n+2) .quoteContainer_hasDetail{
	background-position: right bottom
}
blockquote{
	margin:0;
	padding:1em 0;
	color:gray;
    font-size:80%;
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
	font-family: "serif";
	text-align:center;
}
div.groupDetailsContainer{
    background: linear-gradient(90deg, #EEE, white 10%, white 90%, #EEE);
    vertical-align:middle;
	width:100%;
	height:150%;
	overflow-x:auto;
	overflow-y:hidden;
	white-space: nowrap;
}
.charaDetailsContainer{
    background: linear-gradient(90deg, #EEE, white 10%, white 90%, #EEE);
    vertical-align:middle;
    line-height: 150px;
	width:100%;
	height:100%;
	overflow-x:auto;
	overflow-y:hidden;
	white-space: nowrap;
}
img.detailImages{
	height:120px;
	margin:5px;
	border: solid 2px black;
}
dd{
	margin:0;
	width:400px;
	clear:left;
	display:flex;
	text-align:left;
	flex-direction: column;
}
dt:nth-child(6n+1){
	clear:left;
	float:left;
}
dd:nth-child(6n+2){
	clear:right;
	float:right;
}

ruby{
	font-size:150%;
	
}
dd:first-line{
}
div.charafooter_close{
	clear:both;
	overflow:hidden;
	height:0;
    visibility:hidden;
  transition:
    height     .1s linear .1s,
    visibility  .1s linear .1s;
}
.charafooter {
	clear:both;
	overflow:hidden;
    height:  150px;             /* 高さ指定 */
    width:  600px;              /* 幅指定 */
    visibility:visible;
  transition:
    height     .1s linear .1s,
    visibility  .1s linear .1s;
}