@charset "UTF-8";
 @import url(http://fonts.googleapis.com/css?family=Courgette);




body {font-family:"ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
        background-color: #191970;
        margin: 0;
        padding:0;}

h1 {font-size: 18px;
    margin-top: 0
    margin-bottom: 0}

p {line-height: 1.5}

/*ヘッダー*/
header {
background-image: url("atticroom.png");
background-position: center;
 margin: -5px;
}


header h1 {font-family:Courgette,sans-serif,
"ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
          font-size: 30px;
         width: ;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
        margin-bottom: 5px;
       text-align: center;
       color: #ffffff;
text-shadow: 0 0 5px #000000;
}

header a {text-decoration: none;
color: #ffffff}

header a:hover {color: #228b22}

header p {font-family:ヒラギノ角ゴ Pro W3","メイリオ",sans-serif,Courgette,sans-serif;
          font-size: 16px;
         width: 90%;
        margin-left: auto;
        margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
       color: #ffffff}


header h5 {         
 font-size: 20px;
text-align: center;
 color: #ffffff;
margin-top: 0px;
margin-bottom:10px;
padding-top: 30px;
text-shadow: 0 0 5px #000000;
}

/*ナビゲーションメニュー*/
nav ul {list-style-type: none;
margin-top: 5px;
margin-bottom: 0;
padding-left: ;
font-size: 0}

nav li {display: inline;
font-size: 18px;
border-right: solid 0px #ffffff;
padding-left: 10px;
padding-right: 10px}

nav li:first-child{border-left: solid 0px #ffffff}

nav {width: 96%;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 10px;
margin-bottom: 10px}

nav a {color: #ffffff;
text-decoration: none}



/*記事*/
article {background-color:#ffffff;
         width: 100%;     
         overflow: hidden
margin-top: 0px  
}

article img{margin:10px;}


/*タイトル*/
article h1 {clear: both;
color: #333333;
font-size: 20px;
text-align: center;
margin-top: 10px
margin-bottom: 10px
}


/*背景赤タイトル*/
article h2 {clear: both;
font-size: 18px;
color: #ffffff;
text-align: center;
background: linear-gradient(-135deg,#191970, #483d8b);
margin-top: -5px;
margin-left:-5px;
margin-right:-5px;
padding: 8px;
}

/*目次*/
article h3 {clear: both;
color: #333333;
text-align:left;
margin: 15px
}

/*著者名*/

article h4 {clear: both;
color: #333333;
margin: 1px;
text-align: left;
}



article p{clear: both;
color: #333333;
margin: 15px;
text-align: left;
}


/*リンクの色*/
a {color: #333333}

a:hover {
background-color: ;
color: #16acf7
}

a img {border: none}


/*関連記事へのリンク*/
aside {border: solid 1px #aaaaaa;
border-radius: 5px;
padding: 10px;
background-color: #fffff9;
margin-top: 20px}


aside h2{font-size: 20px;
margin-top:10px;
color: #0748b2;
border-bottom: dotted 2px #294d9b}


aside ul {list-style-image: url(listmark.png)}

aside a {color: #333333;
}

aside p img {vertical-align: -11px}


/*記事 枠無し背景白*/

ul.news {
padding: 0px;
margin-bottom:10px;
list-style-type: none;
display:-webkit-flex;
display;-moz-flex;
display;flex;
-webkit-flex-wrap: wrap;
flex-wrap:wrap;
-webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

li.news{
border: solid 3px #ffffff;
border-radius: 0px;
padding: px;
background-color: #f0f8ff;
margin: 5px;
width:90%;
}

li.news img{margin:5px;}

li.news p{
font-size:16px;
text-align: left;
margin-top: 0px
margin-bottom: 0px
}

li.news h1{
margin-top: 5px;
margin-bottom:5px;
}


li.news h2 {clear: both;
font-size: 16px;
color: #ffffff;
text-align: center;
background-color:#b22222;
margin-top: 0px;
padding: 10px;
}

li.news h4{
font-size:16px;
margin:3px;
padding:3px;
}

/*商品*/

ul.book {
padding: 0px;
margin: 0px;
list-style-type: none;
display:-webkit-flex;
display;-moz-flex;
display;flex;
-webkit-flex-wrap: wrap;
flex-wrap:wrap;
-webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

li.book{
border: solid 2px #f0f8ff;
border-radius: 0px;
padding: 2px;
background-color: #f0f8ff;
margin: 2px;
width:45%;
}

li.book img{margin:0px;}

li.book p{
font-size:14px;
text-align: left;
margin-top: 0px
margin-bottom:0px
}

li.book h1{
margin-top: 5px;
margin-bottom:5px;
}


li.book h2 {clear: both;
font-size: 16px;
color: #ffffff;
text-align: center;
background-color: #b22222;
margin-top: 0px;
padding: 10px;
}

li.book h3{
font-size:16px;
text-align: left;
margin-top: 0px
margin-bottom: 0px
}


li.book h4{
font-size:16px;
margin:3px;
padding:3px;
}


.center{
 text-align: center;
}


footer p {
text-align: center;
color: #ffffff}

footer a {
color: #fffff0}

footer {
background: linear-gradient(-135deg,#191970, #483d8b);
                 padding:5px;
margin: 0px                
}


/* ===== PC版の設定 ===== */
@media (min-width: 768px) {

article {background-color:#ffffff;
         width: 100%;
        margin-left: auto;
        margin-right: auto;
       border: solid 1px #ffffff;
      padding: 0px;
      -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 margin-top: 0px;
 margin-bottom: 0px;
overflow: hidden

-webkit-text-size-adjust: 100%
}


li.book{
border: solid 3px #f0f8ff;
border-radius: 0px;
padding: 5px;
background-color: #f0f8ff;
margin:2px;
width:21%;
}


li.news{
border: solid 0px #f0f8ff;
border-radius: 0px;
padding: px;
background-color: #f0f8ff;
margin: 5px;
width:45%;
}

header h1 {font-family:Courgette,sans-serif,
"ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
          font-size: 30px;
         width: ;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
       margin-bottom: 5px;
       text-align: center;
       color: #ffffff;
}

/* ===== PC版の設定ここまで ===== */