/      CSS¡¡¥ê¥»¥Ã¥È      /

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; font-family:serif; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }


/      •øÌåÔO¶¨      /

p { font-size: 1.05em; }
h1 { font-weight:bold; font-family:sans-serif; font-size:2em; padding: 1em 0 0.5em 0; }
h2 { font-weight:bold; font-family:sans-serif; font-size:1.5em; padding: 1em 0 0.5em 0; }
h3 { font-weight:bold; font-family:sans-serif; font-size:1em; padding: 1em 0; }
h4 { font-weight:bold; font-family:sans-serif; font-size:1em; padding: 1em 0; }
b { font-weight: bold; }
i { font-style: italic; }

.header a { color: #333; text-decoration: none; padding: 0 2em; }
.contents a { color: #333; text-decoration: none; }
.contents { clear: both; margin-bottom: 3em; position: relative; padding:10px; }
.contents h2 { padding-top: 0; }
.contents h3 { padding-bottom: 0; }
.contents h2, .contents h3, .contents p { margin-left: 220px; }

a:hover { text-decoration: underline; }

p { line-height: 1.4; }
p+p, div+p { margin-top: 1em; }
.quote { padding: 0 1em; }
.lead { color: #333; margin-bottom: 2em; padding-left:1em; border-left:5px solid #333; }
.first { margin-top: 1.5em; border-top: 1px solid #ddd; padding-top: 1.5em; }

.speaker1 { color: saddlebrown; font-weight: bold; }
.speaker2 { color: navy; font-weight: bold; }
.speaker3 { color: darkslategray; font-weight: bold; }

.footer { font-size: 1em; background: #333 url(images/socrates_w.png) no-repeat bottom right;}
.footertitle { color:#eee; font-weight: bold; margin-top: 1em; background-color:#444; border:1px solid #555; border-radius:2px;}
.footer a { color:#ccc; text-decoration: none; padding-left:1px; }


/      ¥ì¥¤¥¢¥¦¥È      /

.container { margin: auto; width: 800px; }
.inner { padding: 0 10px; }
.header { position: relative; height:3em; padding:1em; border-bottom:1px solid #ccc; background-color: rgb(242, 242, 242); vertical-align: central; }
.menu { margin: 0 auto; text-align: center; }
.main { clear: both; }
.footer { clear: both; min-height:30em; position: relative; margin-top: 5em; padding: 1em 0; }
.column { width: 250px; float: left; padding-left: 50px; }
.one { width: 150px; padding-left:0; }
.group:after { content: ""; display: table; clear: both; }
.center {text-align: center; }

.gallery { position:relative; width:800px; clear:both;}
.galleryitem {float:left; padding:10px 10px 0 0; height:170px; }
.galleryitem p {width:140px;}
.gallery li { float:left; height:250px;}
.gallery p { clear:both;}

.gallery_backcover { width:400px; clear:both;}
.gallery_backcover li { float:left; height:300px;}
.gallery_backcover p { clear:both;}

/      ¥¤¥á©`¥¸¤È¥¤¥á©`¥¸év‚S      /

img { max-width: 100%; }

.professor { margin: 1em 0; }
.professor img { float:left; margin-right: 1em; }
.professor h2 { font-size:1em; padding: 0 0 0.5em 0; }
.professor h3 { font-size:1em; padding: 0 0; }

.figure { margin: 1em 0; border: 1px solid #ccc; padding: 10px; background:#fafafa; }
.top { margin: 1em 0; }
.right { float: right; margin: 1em 0 1em 1em; }
.left { float: left; margin: 1em 1em 1em 0; }
.center { margin: auto; }
.figure p, .top p { font-size: 0.8em; color: #333; }

.large, .large img { width: 778px; }
.medium { width: 578px; }
.small { width: 378px; }
.tiny { width: 378px; border: 1px solid #ddd; padding: 10px; background-color: #eee; }
.tiny img { float: left; padding-right: 10px; width: 178px; }
.cover { padding-top: 5em; border: 0; background-color: inherit; }
.contents img { width: 200px; float: left; }
.feature { border: 1px solid #ddd; background-color: #eee; }
.figure table, .figure tr, .figure  th, .figure  td { border: 1px solid #555; }
.figure th { font-weight: bold; }
.figure th, .figure td { padding: 3px; }

.pullquote { font-size: 2em; background: #fafafa url(images/pullquote.png) no-repeat top left; background-position: 10px 10px; }
.pullquote p { margin-left: 100px; }

/      ¥ì¥¹¥Ý¥ó¥·¥ô?¥Ç¥¶¥¤¥ó      /

@media only screen and (max-width : 801px) {
	.container { width: 100%; }
	.large, .large img { max-width: 100%; clear: both; }
	.large { width: auto; }
	.medium, .medium img { max-width: 400px; }
	.column { float: none; padding-left: 1em; }
	.gallery {width:100%;}
}

@media only screen and (max-width : 601px) {
	.medium, .medium img { max-width: 100%; clear: both; }
	.small, .small img { max-width: 100%; }
	.right, .left { float: none; }
	.medium { width: auto; }
	.logo { width: 90px; }
	.nav { width: 30px; }
	.header { height: 2em; }
	h1 { font-size: 1.5em; }
	.header a { padding: 0 1em; }
	.tiny { width: 178px; }
	.tiny img { float: none; }
	.right { margin-left: 0; }
	.left { margin-right: 0; }
}

@media only screen and (max-width : 401px) {
	.small, .small img { max-width: 100%; clear: both; }
	.small, .column { width: auto; }
	h1, h2 { font-size: 1em; }
	.header a { padding: 0 0; }
	.contents h2, .contents h3, .contents p { margin-left: 0; }
	.contents img { float: none; width:auto; }
	.gallery_backcover { width:100%;}
	.gallery li { width:100%; height:auto;}
}

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	img { max-width: 100%; }
}