@charset "UTF-8";
@import "reset5.css";

body { color:#0071be; line-height:1; background-color: #fff; padding: 0; position: relative; min-height: 100%; text-align: center; overflow: hidden }
html { min-height: 100%; }

* html body { font-family:"Times New Roman", Times, Georgia, serif }
*:first-child+html body { font-family: "Times New Roman", Georgia, Times, serif }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 12px default setting */
body { font-size:13px; line-height: 1; font-family: "Times New Roman", Times, Georgia, serif }
body p { line-height: 1.83em }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

iframe { overflow: hidden }

/* !clearfix */
hr { display: none; }

.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

/* margin-bottom
=========================================*/
.mb0 { margin-bottom:0 !important; }
.mb3 { margin-bottom:3px !important; }
.mb4 { margin-bottom:4px !important; }
.mb5 { margin-bottom:5px !important; }
.mb7 { margin-bottom:7px !important; }
.mb10 { margin-bottom:10px !important; }
.mb12 { margin-bottom:12px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb80 { margin-bottom:80px !important; }

.tx9 { font-size: 9px !important; }
.tx10 { font-size: 10px !important; }
.tx11 { font-size: 11px !important; }
.tx12 { font-size: 12px !important; }
.tx13 { font-size: 13px !important; }
.tx14 { font-size: 14px !important; }
.tx15 { font-size: 15px !important; }
.tx16 { font-size: 16px !important; }
.tx18 { font-size: 18px !important; }
.tx20 { font-size: 20px !important; }
.tx24 { font-size: 24px !important; }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

/* !Links */
a:link { color: #0071be; text-decoration: underline }
a:visited { color: #0071be; text-decoration: underline }
a:hover { color: #00a0e9; text-decoration: none }
a:active { color: #00a0e9; text-decoration: overline }
html { margin: 0; padding: 0}
body { margin: 0; padding: 0 }

#wrapper { text-align: center; height: 100% }

section { position: relative }
section .bg { position: absolute; width: 100%; left: 0; top: 0; overflow: hidden }
section .bg .ov { position: absolute; width: 100%; left: 0; top: 0; display: none }
section .inner { position: relative; padding: 140px 0 100px } 
section .inner h3 { position: absolute; left: 60px; top: 140px }
section .inner .tBox { opacity: 0 }

section .vis { width: 100%; left: 0; top: 0; overflow: hidden }
.pt0 { padding-top: 0px !important }

#home {  }
#home .bg { z-index: 0 }
#home h1 { position: absolute; left: 60px; top: 120px; opacity: 0; z-index: 10 }
#home h2 { position: absolute; left: 60px; top: 262px; opacity: 0; z-index: 10 }
#home p.lang { position: absolute; left: 60px; top: 342px; opacity: 0; padding-bottom: 4px; z-index: 10000 }
#home p.t { position: absolute; right: 40px; top: 48%; opacity: 0 }
#home p.cap { position: absolute; left: 60px; bottom: 25px; opacity: 0 }

#news {}
#news .cfix {  }
#news .tBox { padding: 0; margin: 0 0 0 360px }
#news p { text-align: left }

#mission {}
#mission .tBox { padding: 80px 0 0; width: 580px; margin: 0 0 0 360px }
#mission p { text-align: left }

#about {}
#about .cfix {  }
#about .tBox { padding: 80px 0 0; width: 550px; margin: 0 0 0 360px }
#about p { text-align: left }

#message {}
#message .cfix {  }
#message .tBox { padding: 80px 0 0; width: 550px; margin: 0 0 0 360px }
#message p { text-align: left; }

#profile {}
#profile .cfix { position: relative; padding: 0 50px }
#profile .tBox { padding: 80px 0 0; width: 550px; margin: 0 0 0 360px }
#profile p { text-align: left }

#books {}
#books .cfix {  }
#books .tBox { padding: 80px 0 0; width: 550px; margin: 0 0 0 360px }
#books p { text-align: left }

#exhibit {}
#exhibit .cfix {  }
#exhibit .tBox { padding: 80px 0 0; width: 550px; margin: 0 0 0 360px }
#exhibit p { text-align: left }

#reading {}
#reading .cfix {  }
#reading .tBox { padding: 80px 0 0; width: 550px; margin: 0 0 0 360px }
#reading p { text-align: left }

#music {}
#music .cfix {  }
#music .tBox { float: right; padding: 0 50px; width: 550px; }
#music p { text-align: left }

#contact {}
#contact .cfix {  }
#contact .tBox { padding: 80px 0 0; margin: 0 0 0 360px }
#contact p { text-align: left; float: left; margin-right: 60px }


/* header */
header { width: 100%; height: 110px; margin: 0; position: relative; background: url(../img/h_bg.png) no-repeat bottom right }
header h1 { position: absolute; left: 20px; top: 5px }
header .h_col { position: absolute; right: 30px; top: 20px }

#globalNav { position: fixed; left: 0; top: 0; width: 100%; height: 114px; background: url(../img/sdw.png) no-repeat center bottom; text-align: center; overflow: hidden }
#globalNav .inner { background-color: #fff; height: 74px; }
#globalNav ul { height: 61px; padding: 13px 0 0; background-color: #fff; }
#globalNav li { float: left; text-align: left; margin-right: 20px }
#globalNav li.none { display: none }
#globalNav li a { padding: 16px 6px; display: block; position: relative }
#globalNav li a span { width: 100%; height:0; background-color: #e4007f; position: absolute; left:0; bottom: 8px; }
#globalNav li a.selected span { height: 2px; }

span.entit { letter-spacing: 0.1em; padding-bottom: 5px }
span.year { font-size: 13px; font-style: italic; border-bottom: 1px solid #00a0e9; margin-bottom: 5px }
span.date { font-size: 13px; font-style: italic; border-bottom: 1px solid #00a0e9; }

#logo { position: fixed; right: 30px; bottom: 30px }
#next { position: fixed; left: 50%; bottom: -4px; margin: 0 0 0 -40px }
#loader { position: fixed; left: 50%; top: 50%; margin: -8px 0 0 -8px; }

#menu-btn { display: none }

.pc { display: block }
.sp { display: none }


@media screen and (max-width: 768px) {
	
	#wrapper { position: relative; left: 0;  margin-bottom: 40px }
	
	#home { }
	#home .bg { position: relative; left: inherit; top: inherit; margin-top: 25px }
	#home h1 { position: relative; left: inherit; top: inherit; margin-top: 25px; opacity: 0 }
	#home h1 img { width: 90%; height: auto }
	#home h2 { position: relative; left: inherit; top: inherit; margin-top: 25px; margin-left: 20px; opacity: 0 }
	#home h2 img { width: 80%; height: auto }
	#home p.t { position: relative; right: inherit; top: inherit; text-align: left; margin: 25px 0 0 20px; opacity: 0 }
	#home p.t img { width: 80%; height: auto }
	#home p.cap { position: relative; left: inherit; bottom: inherit; text-align: left; margin: 20px 0 0 20px; opacity: 0 }
	#home p.lang { position: relative; left: inherit; top: inherit; opacity: 0; margin: 20px 0 20px 20px; padding-bottom: 4px; text-align: left; }
	
	section .inner { position: relative; padding: 40px 0 } 
	section .inner h3 { position: absolute; left: 20px; top: 120px; }
	section .inner .tBox { opacity: 1 }
	
	#globalNav { position: fixed; left: 100%; top: 0; width: 50%; height: 100%; background: #f6f6f9; text-align: center; overflow: hidden }
	#globalNav .inner { background-color: #fff; height: 74px; }
	#globalNav ul { height: auto; padding: 0; background-color: #f6f6f9; }
	#globalNav li { float: none; text-align: left; margin-right: 0 }
	#globalNav li.none { display: none }
	#globalNav li a { padding: 25px; display: block; position: relative }
	#globalNav li a span { width: 100%; height:0; background-color: #e4007f; position: absolute; left:0; bottom: 8px; }
	#globalNav li a.selected span { height: 2px; }
	
	#news {}
	#news .inner h3 { top: 40px ; }
	#news .tBox { padding: 80px 20px 0; margin: 0 }
	#news .tBox img { width: 100%; height: auto }
	
	#mission {}
	#mission .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#about {}
	#about .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#message {}
	#message .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#profile {}
	#profile .cfix { position: relative; padding: 0 }
	#profile .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#books {}
	#books .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#exhibit {}
	#exhibit .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#reading {}
	#reading .tBox { padding: 40px 20px 0; width: auto; margin: 0 }
	
	#music {}
	#music .tBox { float: right; padding: 0; width: auto; }
	
	#contact {}
	#contact .tBox { padding: 40px 20px 0; margin: 0 }
	#contact p { text-align: left; float: none; margin-right: 0 }
	
	#logo { position: absolute; right: 20px; bottom: 20px }
	#logo img { width: 100px; height: 100px }
	#next { position: fixed; left: 50%; bottom: -4px; margin: 0 0 0 -30px }
	#next img { width: 60px; }
	
	#menu-btn { position: fixed; right: 0; top: 0; width: 50px; height: 50px; z-index: 1000; cursor: pointer; display: block }
	#menu-btn span.ln1 { position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -25%; width: 50%; height: 1px; background: #0071be }
	#menu-btn span.ln2 { position: absolute; left: 50%; top: 50%; margin: 5px 0 0 -25%; width: 50%; height: 1px; background: #0071be }
	
	.pc { display: none }
	.sp { display: block }
}

@media screen and (max-width: 320px) {
	#home p.cap { margin: 10px 0 0 20px; }
	#home p.lang { margin: 10px 0 10px 20px; padding-bottom: 0; text-align: left; }
	#globalNav li a { padding: 20px; display: block; position: relative; font-size: 12px }
}