@charset "UTF-8";
/* Gallery page CSS */

/* Clearfix
=================================*/

.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hide from Mac IE ¥*/
.clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
/* Hide from Mac IE */

/* =========================================
*  COMMON
* ========================================= */

#fontSample { width:100%; padding:20px 0; }

#fontSample .fontdemo {
	margin-bottom:20px; padding-bottom:10px;
	border-bottom:1px dotted #777;
}
#fontSample .fontdemo h2 {
	margin-bottom:10px;
}
#fontSample .fontdemo p {
 font-size:28px; line-height:1.4em;
}

#fontSample .fontdemo p.small {	font-size:1.4em; }

#fontSample p.notes {	font-size: 10px; font-family:"Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif; }


/* ========== photo gallery style ========== */

#gallery { float:left; width:600px;	margin:10px 0 0 50px; padding-bottom:20px; border-bottom:1px solid #963; }
#gallery h1 {
 width: 600px; height: 50px;
 margin: 0 0 20px 0; padding:0;
	text-indent:0;
 display: block;
}
#gallery h1 a {
 width: 600px; height: 50px;
 background: url("../images/title.gif") no-repeat scroll left center transparent;
	text-indent:-9999px;
	display:block;
}
#gallery a { color: #777; }
#gallery a:hover { color: #500; }
#gallery dl { float:left; margin:20px 0; }
#gallery dl dt {
 background-color: #EEE;
 float: left;
 width: 240px; height: auto;
 margin: 0 auto; padding: 20px;
}
#gallery dl dd {
 float: left;
	width: 300px;
 padding-left:20px;
	color:#777;
}
#gallery dl dd h2 {
	padding:5px 0;
 font-family: "Times New Roman", Times, serif;
	font-size:18px;	line-height:1em;
}
#gallery .notes {
	margin:10px 0; padding:10px 0;
	font-size:10px;
	border-top:1px dotted #999;
}
#gallery .galleryA canvas { margin-bottom:20px; }

#gallery dl#images {
	position:relative;
	float:left;
	width:240px;	height:160px;
 margin: 0 auto; padding: 20px;
	background-color: #EEE;
}
#gallery dl#images dt {
	position:absolute;
	width:240px;	height:160px;
	margin:0;	padding:0;
	list-style-type:none;
	display:block;	overflow: hidden;
}
#gallery dl#images dt img{
	width:240px;
	height:auto;
}

.caption {
	float:right;
	width:300px;
 font-family: "Times New Roman", Times, serif;
	font-size:12px;
	color:#555; text-align:left; letter-spacing:1px;
	display:block;	overflow:hidden;
}
.caption h2 { padding:5px 0;	font-size:14px; }
.caption h2 a { font-size:24px;	line-height:1em; }
#gallery .caption p { margin: 0 0 5px 0; }
#gallery .caption p.cap { font-size:10px; }

.chr {
	clear:both;
	width:100%; height:10px;
	margin:0; padding:0;
	font-size: 9px;	line-height:1em; color:#996;
 white-space: nowrap;
	border:none;
	overflow: hidden;
 text-overflow: ellipsis; -o-text-overflow: ellipsis;
}
.chr:before {
	content:"\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。\002606.・*・。\002605.・*・。";
}


@media screen and (max-width: 640px) { 

#contents #column img{
    float: none;
    width: auto;
    margin: 0;
}
#contents #column {
    float: none;
    width: auto;
    margin: 20px 0 20px;;

}

#contents h2 {
    background-size: 96%;
    margin: 0 auto 0 10px;
}

#contents h1 {
    margin: 0 0px;
    width: auto;
    background-size: 110%;
}
#contents h4 {
    margin: 10px 10px 5px 10px;
}
#contents p {
    margin: 0 10px;
}
#contents #column img {
    position: sticky;
}
#contents #column h4, #contents #column p {
    width: auto;
}
#contents ol li { flex: auto;}

dl { margin-left: 10px;}

#contents p.l01 {
    margin: 0 10px 0 10px;
}

#talk { width: 96%;}

#gallery dl dt {
    margin: 0 auto 0 20px;
}
.caption {
    float: none;
    width: 100%;
}

#gallery dl#images {
    position: static;
    float: none;
    margin: 0 auto 40px;
}


}