@charset "UTF-8";

/*////////  for web font   ///////////*/
/*cyrilyc font*/
@font-face {
    font-family: CharisSIL-R;
    src: url(../fonts/ttf/CharisSIL-R.ttf) format('truetype');
    src: url(../fonts/CharisSIL-R.woff) format("woff");
}

/*greek font*/
@font-face {
    font-family: GalSILR;
    src: url(../fonts/ttf/GalSILR.ttf) format('truetype');
    src: url(../fonts/GalSILR.woff) format("woff");
}

/*Thai font*/

/* @font-face { */
/*     font-family: kinnari; */
/*     src: url(../fonts/ttf/kinnari.ttf) format('truetype'); */
/*     src: url(../fonts/kinnari.woff) format("woff"); */
/* } */

/*Akkadian cuniform*/
@font-face {
    font-family: akkadian;
    src: url(../fonts/ttf/Akkadian.ttf) fotmat('truetype');
    src: url(../fonts/Akkadian.woff) format("woff");
}

/*Assyrian cuniform*/
@font-face {
    font-family: assyrian;
    src: url(../fonts/ttf/Assyrian.ttf) format('truetype');
    src: url(../fonts/Assyrian.woff) format("woff");
}

/*Traditional Chinese*/
/*@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);*/
/*@font-face {
    font-family: notosanhans;
    src: url(../fonts/NotoSansHant-Regular.woff) format('woff');
}*/
/* @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); */
/*@font-face {
    font-family: notosansjp;
    src: url(../fonts/NotoSansJP-Medium.woff) format('woff');
}*/

/*//////////  end  ////////////*/

/*reset*/
html, body, div, header, nav, ul {
    margin: 0;
    padding: 0;
}

body {
    /*    font-family: 'IPAexg', sans-serif;*/
    /* IPAフォントを使うときは本文にクレジットを追加すること。 */
    /*    font-family: 'azukiLP', sans-serif;*/ /* あずきフォント*/
    /*    font-family: 'MT_TARE_P', sans-serif;*/ /* たれフォント */
    /*font-family: 'mplus2r', sans-serif;*/ /* M+フォント */
    /*font-family: 'notosansjp';*/
    font-family: 'CharisSIL-R', 'Noto Sans JP';
    font-size: 12pt;
    background-image: url(../images/back.jpg);
    background-repeat: repeat;
}

.wrapper {
    margin: 0 auto 0 auto;
    width: 1000px;
}

ul li {
    list-style-type: none;
}

header {
    border-top-style: double;
    border-bottom-style: double;
    padding-top: 0.5em;
    padding-bottom: 1em;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 70px;
    height: 450px;
}

header .titleimg {
    width: 472px; /* イメージファイルのピクセル数を指定することでイメージが入る */
    height: 420px;
    background-image: url(../images/title3.jpg);
    background-repeat: no-repeat;
    float: left;
    font-size: 0;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
}

header .titletext {
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 70px;
}

header h1 {
    font-size: 2em;
    margin-bottom: -0.5em;
}

header h2 {
    font-size: x-large;
    margin-bottom: -0.5em;
}

header h3 {
    /*        margin-bottom: 10px;*/

}

#totalcount {
    font-size: 12pt;
    margin-top: 10px;
    margin-bottom: 3px;
}

#daycount {
    font-size: 10pt;
    margin-top: 3px;
    margin-bottom: 10px;
}

#request {
    font-size: 10pt;
    font-weight: bold;
    font-style: inherit;
    margin-bottom: 10px;
}

#whatyutopia {
    font-size: x-large;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

#search {
    font-size: 14pt;
    padding-left: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#search ul li {
    float: left;
}

/* marquee */
.marquee {
    width: 350px;
    margin: 0em auto 0em;
    overflow: hidden;
    position: relative;
}

.marquee p:after {
    content: "";
    white-space: nowrap;
}

.marquee p {
    margin: 0;
    color: #FF0000;
    font-size: x-large;
    display: inline-block;
    white-space: nowrap;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-duration: 17s;
    animation-iteration-count: infinite;
}

@keyframes marquee {
    from { 
        transform:translate(0%);
    }
    99%,
    to {
        transform: translate(-100%);
    }
}

/*本文*/
.main {
    /*border-top-style: double;*/
    /*    margin: 20px;*/
    margin: 0px;
}

.contents {
    float: left;
    width: 600px;
}

.toc {
    width: 300px;
}

.main section {
    margin-top: 20px;
    margin-bottom: 20px;
}

.main h1 {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 2px;
}

.main h2 {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 2px;
}

.main section dl dt {
    font-weight: bolder;
    font-size: 1.2em;
}

.main p {
    padding-left: 1em;
    font-weight: bolder;
    line-height: 200%;
    margin-top: 0px;
    margin-bottom: 0px;
    text-indent: 1em;
}

.sidebar1 {
    float: right;
    width: 300px;
    font-size: small;
}

footer {
    clear: both;
    margin-top: 50px;
    margin-bottom: 50px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-width: 1px;
    padding: 0px;
    text-align: right;
    font-size: 16pt;
}

footer p span {
    text-align: right;
    margin-left: 30px;
    font-size: 10pt;
    font-style: italic;
    padding-right: 20px;
}

/*未完の本の案内用*/
.mikan-title {
    width: 80%;
    border-collapse: collapse;
    border-style: solid;
    border-width: 2px;
    margin: 50px;
    padding: 10px;
    font-size: 20pt;
    font-weight: bold;
}

.mikan-contents h1 {
    margin: 30px;
}

.mikan-contents table {
    font-size: 16pt;
    margin: 50px;
}

.new-release {
    text-decoration: underline;
    font-size: larger;
    color: red;
}

.Events {
    margin-left: 70px;
    margin-top: 2em;
    width: 50%;
    /*    font-size: 16pt;*/
}

/*linkページ*/
.link-page {
    font-size: 16pt;
    font-weight: bold;
}

.link-page h1 {
    margin: 10px 0 10px 0;
}

.link-page dt {
    margin: 5px auto 5px auto;
}

.link-page dt dd {
    margin: 5px 10px 10px auto;
}

/* what is yutopia  */

/* ゆうとぴあってなにのブロック */
#floatWindow {
    display: none;
    /*<bodyタグの終わる直前に作った<div>を不可視にしておいて、Javascriptの処理で表示・移動・消去する。*/
    position: absolute;
    width: 500px;
    height: 300px;
    top: 5%;
    left: 5%;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px; /* 角を丸める */
    background: rgba(204, 255, 204, 1.0);
    backface-visibility: hidden;
    background-color: snow;
    background-clip: border-box;
    box-shadow: 0px 0px 7px #454545;
    z-index: 9999;
}

#floatWindow dl {
    margin: 0px;
}

#floatWindow dl dt {
    text-indent: 1em;
    color: #990033;
    cursor: move;
    font-size: x-large;
    margin-top: 0em;
    background-color: #99CCCC;
}

#floatWindow dl dd {
    margin: 10px;
    padding: 0.3em;
    line-height: 1.5em;
    text-indent: 0em;
    color: #330033;
}

#floatWindow a.close {
    border: 1px solid #000000;
    border-radius: 3px; /* 角を丸める */
    background: rgba(102, 255, 153, 1); /* 背景色を白に指定して不透明度を1に指定 */
    background-color: snow;
    box-shadow: 0px 0px 3px #454545;
    margin-left: 220px;
}

/*  **********     */

/* 未完発行物のブロック */
#floatWindow2 {
    display: none;
    /*<bodyタグの終わる直前に作った<div>を不可視にしておいて、Javascriptの処理で表示・移動・消去する。*/
    position: absolute;
    width: 800px;
    height: 500px;
    top: 1100px;
    left: 5%;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px; /* 角を丸める */
    background: rgba(204, 255, 204, 1.0);
    backface-visibility: hidden;
    background-color: snow;
    background-clip: border-box;
    box-shadow: 0px 0px 7px #454545;
    z-index: 9999;
    font-size: 12px;
}

#floatWindow2 dl {
    margin: 0px;
}

#floatWindow2 dl dt {
    text-indent: 1em;
    color: #990033;
    cursor: move;
    font-size: x-large;
    margin-top: 0em;
    background-color: #99CCCC;
}

#floatWindow2 dl dd {
    margin: 10px;
    line-height: 1em;
    text-indent: 0.5em;
    color: #330033;
}

#floatWindow2 dl dd .obsoleteTitle {
    background-color: #666666;
}

#floatWindow2 dl dd .newRelease {
    background-color: #CCFF66;
    color: #FF0000;
}

#floatWindow2 dl dd .Prepair {
    background-color: #996666;
}

#floatWindow2 a.close {
    border: 1px solid #000000;
    border-radius: 3px; /* 角を丸める */
    background: rgba(102, 255, 153, 1); /* 背景色を白に指定して不透明度を1に指定 */
    background-color: snow;
    box-shadow: 0px 0px 3px #454545;
    margin-left: 220px;
}

/*  **********     */

/*  ***** */
.latin, .en, .de, .fr, .id, :lang(en), :lang(fr), :lang(de), :lang(id) {
    /*        font-family: 'Noto Serif', serif;*/
    font-family: 'CharisSIL-R', sans-serif !important;
}

.cyr, .ru, :lang(ru) {
    font-family: 'CharisSIL-R', sans-serif !important;
}

.greek, .el, :lang(el) {
    font-family: 'GalSILR', sans-serif !important;
}

.arabic, .al, :lang(ar) {
    font-family: 'amiri-regular', serif !important;
}

.thai, .th, :lang(th) {
    /*     font-family: 'kinnari', serif !important; */
    font-family: 'Sarabun', serif !important;
}

.china, :lang(zh-Hant) {
    font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;
    /*     font-family: 'cwTeXFangSong', sans-serif !important; */
    /*font-family: 'notosanhans', serif !important;*/
}

.akkadian {
    font-family: 'akkadian', serif !important;
}

.assyrian {
    font-family: 'assyrian', serif !important;
}

.marquee {
    width: 350px;
    /* the plugin works for responsive layouts so width is not necessary */
    overflow: hidden;
    border: 0px solid #ccc;
    font-weight: bolder;
    color: #FF0000;
    font-size: x-large;
}

/*#### for mail form ###*/
#formWrap {
    /*	width:700px;*/
    margin: 0 auto;
    color: #555;
    line-height: 120%;
    font-size: 90%;
}

table.formTable {
    /*	width:100%;*/
    margin: 0 auto;
    border-collapse: collapse;
}

table.formTable td, table.formTable th {
    /*border:1px solid #ccc;*/
    padding: 5px;
}

table.formTable th {
    /*	width:30%;*/
    width: 10em;
    font-weight: normal;
    /*	background:#efefef;*/
    text-align: left;
    font-weight: bolder;
}