@charset "utf-8";
/* CSS Document */

body{
-webkit-text-size-adjust: 100%;
font: 18px/2 "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
margin:0;
color:#000000;
background-image: url('../images/bg.jpg');
background-attachment: fixed;
background-size: 100% auto;
background-position: top center;
min-width:360px;
}

a:visited{
    color:blue;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
a:hover {
    color: #FFFC00;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

rt {
    margin: 0px 0px -5px;
    padding: 0px;
    font-size: 0.6em;
    font-family: "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    font-weight: normal;
}
.clear {clear:both;}
.totop {
    position: fixed;
    bottom: 10px;
    right: 15px;
}
.totop a {
    display: block;
    text-decoration: none;
}
.totop img {
    background: #000;
width: 100%;
}

.totop a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}

#page h2{
	font-size: 1.2em;
	line-height: 1.4em;
	color: white;
	background-image: url('../images/ch_title_bg.png');
	background-repeat: no-repeat;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 90px;
	background-color:#C10900;
}

#home h2{
	font-size: 1.8em;
	letter-spacing: .5em;
	text-align: center;
	margin-bottom: 15px;
}

h3{
font-size:1.3em;
font-weight:bold;
margin-top:0.5em;
}
h3:first-letter{
}

h4{
font-size:1.4em;
font-weight:bold;
border-top:2px solid #C10900;
padding-top:0px;
margin-bottom:10px;
background-image: url('../images/ch_subtitle_bg.png');
	background-repeat: repeat-y;
line-height: 1.5em;
text-indent: -1.7em;

padding-left: 2em;
}


h4:first-letter{
color:#fff;
}

/*****HEADER*****/
header{
    display: block;
    width:100%;
    overflow: hidden;
	min-width:360px;
}

#home header .lang {
    display: block;
   float:right;
    margin-left:0px;
position:absolute;
top:10px;
left:auto;
right:30px;
}
@media screen and (min-width: 480px)  {
header .logo {
    display: block;
   float:left;
width:55%;
}

header .logo img{
width:95%;
}
header .lang {
    display: block;
   float:left;
    margin-top: 10px;
    margin-left: 0px;
width:15%;
}

header .lang img{
width:100%;
}


header .mark {
    display: block;
   float:right;
width:15%;
padding-right:60px;
}
header .mark img{
width:100%;
}

}
@media screen and (max-width: 479px) {
header .logo {
    display: block;
   float:none;
width:70%;
}

header .logo img{
width:95%;
}

header .lang {
    display: block;
   float:left;
    margin-top: 0px;
width:60%;
}

header .lang img{
width:38%;
   float:left;
    margin-left: 10px;
}

header .mark {
    display: block;
   float:right;
width:15%;
position:absolute;
top:10px;
left:auto;
right:30px;
}
header .mark img{
width:100%;
}
}





header h1{
    font-size:120%;
    color:#313131;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border:1px solid #313131;
    border-radius: 5px;
    letter-spacing: 3px;
    font-weight:400;
    float: left;
}


/*****NAV*****/
nav{
    width: 100%;
    overflow: hidden;
}

nav dl{
background:#C10900;

}
nav dt a {
	color: white;
	text-decoration: none;
	border-bottom: 1px white solid;
	display: block;
	padding-left:1em;
	padding-right:1em;
	padding-top:.8em;
	padding-bottom:.8em;
	font-weight:bold;
	line-height:1.4em;
}
nav dt a:visited {
	color: white;
	text-decoration: none;
	border-bottom: 1px white solid;
	display: block;
	padding-left:1em;
	padding-right:1em;
	padding-top:.8em;
	padding-bottom:.8em;
	font-weight:bold;
	line-height:1.4em;
}

nav dd a ,nav dd a:visited {
	font-weight: bold;
	line-height: 1.4em;
	color: black;
	background-color: #FFFC01;
	text-decoration: none;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 2em;
	border-bottom: 1px white solid;
	display: block;
}

nav dd a:before {
content:"・";
}

nav dt a:first-letter{
color:#FFFC01;
}

nav dt a:hover {
	color: #FFFC01;
}

nav dd a:hover {
	color: #C10900;
}
#home ul#nav{
width:98%;
margin:0 auto;
margin-left:2%;
}

#home ul#nav li{
	float:left;
	margin-bottom:15px;
	list-style-type: none; 
	margin-right:2%;
	width:31%;
	height:auto;
}


#home ul#nav li img{
	width:100%;
	height:auto;
}

#home #nav li:last-child {
  margin-right:0px;
}

#home ul#nav li a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

#header .lang a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}
header .lang a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
}
/*****ARTICLE*****/
section{
margin-bottom: 2em;
display: block;
width: 100%;
clear: both;
}

footer{
    font-size: 80%;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #313131;
    color: #fff;
	min-width:360px;
}

footer .archiveslink a{
	color: white;
	text-decoration: none;
	padding:.1em 2em;
	margin:0em 2em;
	border:0px solid #ccc;
}

#layout{
	margin: 0 auto;
	width: 100%;
	min-width:360px;

}
#contents{
	border:0px solid #ccc;
	padding:5px;
	background-color:rgba(255,255,255,0.8);
}




#center_block{ width:100%;}

#home main{
width:100%;
background:#fff;
  margin-top:10px;
  padding-top:20px;
	min-width:360px;
}


#page .note{ margin-bottom: 2em;}
#page .textarea{width:100%;font-size:1em; margin-bottom:1em; min-width:360px;}
#page .photo{width:100%; float: none;}
#page .photo a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

#page .photo img{ width:280px;border:1px dotted #ccc;z-index:-5;}


#page .subphoto ul{margin-left: -10px;}
#page .subphoto ul li{
	text-align: center;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-bottom: 0px;
	border: 1px #CCCCCC solid;
	width: 84px;
	height: 60px;
	list-style-type: none;
	float: left;
	overflow: hidden;
}


#page .subphoto ul li img{
	border: 0px #CCCCCC solid;
	width: auto;
	max-height: 100%;
}


#page .note{
border:5px solid #FFFC01;
background:#FEFFD7;
padding:15px;
}




#home .message_area{
}

#home .message_l, #home .message_r{
width:90%;
padding:15px;
background:#eee;
font-size:1em;
height:100%;
margin:0 auto;

}

#home .message_l h2, #home .message_r h2{
font-size:1.5em;
}

#home .message_l img, #home .message_r img{
margin-left:15px;
}

#home .home_title{
	text-align: center;
	margin-top: 0px;
	margin-bottom: 30px;
	width: 100%;
}
#home .home_title img{
	width: 90%;

}
#home .logo{
	width: 15%;
}
#home .logo img{
	width: 100%;
}

#home .btmlogo{
	width: 100%;
}


#home .btmlogo .logo_left,#home .btmlogo .logo_left{
width:48%;
}
#home .btmlogo .logo_left{
float:left;
text-align:right;
margin-right:2%
}

#home .btmlogo .logo_left img{
	width: 150px;
}

#home .btmlogo .logo_right img{
	width: 80px;
}
#page .held,#page .refer{
display:inline-block;
border:1px dotted #aaa;
padding:0px 8px;
margin-top:1em;
margin-right:2em;
background:#fff;
}

#page .fljp:after{
content:url(../images/fl_jp.png);
margin-left:10px;
    position: relative;
    top: 5px;
}

#page .flvn:after{
content:url(../images/fl_vn.png);
margin-left:10px;
    position: relative;
    top: 5px;
}

#page .link{
	font-size: .9em;
	color: white;
	background-color: #D77873;
	margin-top: 1em;
	padding: 0px 8px;
border:0px solid #D77873;
	border-radius:5px;
width: 160px;
}

#page .link a{
	color: white;
	text-decoration: none;
	display: block;
}
#page .link a:after {
content:url(../images/link.png);
position: absolute;
}


#page .held:before {
content:"所蔵：";
font-weight:bold;
padding:0px 8px;

}

#page .refer:before {
content:"請求番号：";
font-weight:bold;
}
#page .document{
font-size:.9em;
border:1px solid #ccc;
padding:5px 10px;
background:#fff;
}

#page .quotation{
margin-left:3em;
font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}

#page .shomei{
margin-left: auto;
}

#page .zoom{
background-image: url('../images/zoom.png');
position:relative;
width:280px;
height:35px;
top:-48px;
margin-bottom:-40px;
}


.historytable{
border:1px solid #ccc;
font-size:.8em;
line-height:1.4em;
}

.historytable td,.historytable th{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px dotted #ccc;
border-right:1px dotted #ccc;
padding:3px;
}


.historytable td .datay{

}
.historytable td.vndata,.historytable td.vnjpdata,.historytable td.jpdata{
width:24%;
}
.historytable td.otherdata {
width:20%;
background:#E1FFE2;

}

.historytable td.vndata{
background:#FFEDED;
}
.historytable td.vnjpdata{
background:#F3DBFF;
}
.historytable td.jpdata{
background:#EDF5FF;
}

#left_block{display: block;}
#left_block {
    width: 80%;
    height: 100%;
    transition: all 0.2s;
    transform: translate(100%);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    background-color: #C10900;
padding-top:30px;
   }
#left_block.open {
    transform: translate(0); 
   }

.btn_menu {
  display: block;
  background: #C10900;
  border: none;
  padding: 5px;
  width: 45px;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 1001;
  text-align: center;
  outline: none;
}

.drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
}
.btn_menu.active .drawer_bar {
  width: 49px;
}

.btn_menu.active .drawer_bar1 {
  transform: rotate(30deg);
}

.btn_menu.active .drawer_bar2 {
  opacity: 0;
}

.btn_menu.active .drawer_bar3 {
  transform: rotate(-30deg);
}

.drawer_bar {
  display: block;
  height: 2px;
  margin: 10px 0;
  transition: all 0.2s;
  transform-origin: 0 0;
}
.drawer_bar {
    background-color: #fff;
}

.btn_menu {
  color: #fff;
}