html,body { margin:0; padding:0; color:#231815; height:100%; }
img  { border:0; }
.sp { display:none; }

header { padding-top:60px; }
#hFixed { position:fixed; top:0; left:0; background-color:#FFF; z-index:999; width:100%; }
#hTop { width:100%; max-width:1000px; display:flex; justify-content: space-between; margin:0 auto; }
  #hTop div { display:flex; align-items:center; } 
  h1 { margin:0; padding:0 0 0 24px; }
  a#hThome { display:flex; background-color:#5db6e7; width:130px; height:64px; color:#FFF; text-decoration:none; align-items:center; justify-content: center; }
  a#hThome img { width:auto; height: 24px; margin-right:6px;}

  ul#hMenu { display:flex; justify-content: end; margin:0; padding:0; }

    ul#hMenu > li { list-style-type:none; margin:0; padding:0; border-right:1px solid #999; display:flex; }
    ul#hMenu > li:first-child { border-left:1px solid #999; }
    ul#hMenu > li img { width:auto; height: 32px; }
    ul#hMenu > li a { text-decoration:none;  padding:0 24px; height:64px; display:flex; justify-content: center; align-items:center; }


#hImg { width:100%; text-align:center; background-color:#EEE; }
#hImg img { width:1100px; height:auto; vertical-align:bottom; }

#menu { background-color:#5db6e7; box-shadow: 0px 12px 10px 0px rgba(0, 0, 0, 0.45); }
#menu ul { width:100%; max-width:1000px; margin:0 auto; padding:0; display:flex; justify-content: start; }
#menu li { list-style-type:none; padding:18px; color:#FFF; margin:0; }
#menu li i { font-size:18px; margin-right:6px; }
#menu li:first-child { background-color:#231815; }
#menu li a { color:#FFF; text-decoration:none; }

footer { background-color:#5db6e7; color:#FFF; padding:24px 0; font-size:12px;}
footer ul { margin:0; padding:0; display:flex;  }
footer li { list-style-type:none; margin:0 12px; }
footer .flexBox { justify-content: center; }
footer a { color:#FFF; text-decoration:none; }
/* section共通 */
section  { padding:32px 0; } 
section h2 { font-size:24px; text-align:center; margin:0; padding:0; }
section h2 div { font-size:50%;}

/* その他共通 */
.flexBox { margin:0 auto; display:flex; justify-content: space-between; }
.wFull   { width:100%; max-width:1000px; }
.wMedium { width:800px; }
.bkgray  { background-color:#e6e6e5; }
/* コンセプト */
section#concept h2 { text-align:left; font-size:20px; }
#conceptImg { width:480px; }
#conceptImg img { width:100%; height:auto; }

#conceptMain { width:480px; }
#conceptMain p { font-size:14px; }
/* 背景色 */
section#newarticles,section#information { background-color:#e6e6e5;  }

/* 新着*/
section#newarticles ul { width:100%; max-width:1000px; margin:24px auto; padding:0; display:flex; justify-content: start; }
section#newarticles li { list-style-type:none; margin:0 6px; padding:0; width:23%; }
.thumbox { width:100%; height:154px; overflow:hidden; }
.thumbox img { width:100%; height:auto; }

section#newarticles h3 { font-size:12px; height:3.8em; }
.artYmd { font-size:10px; }
.artCtg { font-size:10px;  }

a.more { display:block; width:200px; margin:0 auto; padding:4px; border:1px solid #999; text-align:center; text-decoration:none; color:#231815; border-radius: 16px; }

/* おすすめ */
section#recommend { }

section#recommend ul { width:100%; max-width:1000px; margin:24px auto; padding:0; display:flex; justify-content: space-between; }
section#recommend li { list-style-type:none; margin:0 6px; padding:0; width:23%; }

section#recommend h3 { font-size:12px; height:3.8em; }


/* SHARE */
section#sns { border-top:1px solid #221714; width:100%; max-width:1000px; margin:24px auto; }
section#sns ul { display:flex; justify-content: center; }
section#sns li { list-style-type:none; padding:12px; }
section#sns li:first-child { border-right:1px solid #999;  }
section#sns li { display:flex; align-items:center; }
section#sns li img { margin-right:8px; vertical-align:middle; }
section#sns li a { text-decoration:none; color:#333; }

/* お知らせ */
section#information .flexBox { justify-content: center; }
section#information img { width:30px; height:auto; }
section#information ul { font-size:14px; margin:0 0 0 24px; padding:0; }
section#information li { display:flex; justify-content: space-between; padding:12px 0; border-bottom:1px solid #999; }
section#information li:first-child { border-top:1px solid #999; }
section#information li a { display:block; text-decoration:none; color:#221714; width:600px;  }

/* 記事 */
section#articleBox { width:100%; margin:0 auto; }
.article { width:100%; max-width:1000px; margin:24px auto; border-bottom:1px solid #5db6e7; }
div.article { font-size:14px; line-height:140%; }
section#articleBox h2 { font-size:16px; text-align:left; }
section#articleBox h2.pTitle { font-size:20px; border-bottom:1px solid #221714; padding-bottom:6px }

.artDate { font-size:12px; text-align:right; }

/* pagenation */
.post-navigation{
   width:100%; max-width:1000px;
   margin:40px auto;
}
.nav-links{
   display:flex;
   justify-content: space-between;
   font-size:12px;
}

.nav-links a { text-decoration:none; padding:4px; border:1px solid #5db6e7; color:#5db6e7; border-radius: 6px; }
.nav-links a:hover { background-color:#5db6e7; color:#FFF; }

/* */
section#catList { } 
section#catList ul { width:100%; max-width:1000px; margin:24px auto; padding:0; display:flex; justify-content: start; flex-wrap:wrap; }
section#catList li { list-style-type:none; margin:0 6px 14px; padding:0; width:23%; }

section#catList h3 { font-size:12px; height:3.8em; }


/* カテゴリページネーション */
#pagination {
   width:100%; max-width:1000px;
   margin:40px auto;
   display:flex;
   justify-content: space-between;
   font-size:12px;
}


#pagination li:last-child { text-align:right; }
#pagination a { text-decoration:none; padding:4px; border:1px solid #5db6e7; color:#5db6e7; border-radius: 6px; }
#pagination a:hover { background-color:#5db6e7; color:#FFF; }


@media screen and ( max-width:512px ) {

    a#hThome { width:100px; }
    a#hThome img { width:auto; height: 24px; margin-right:6px;}
    h1 img { width:90%;  }
    ul#hMenu > li img { width:auto; height: 24px; }
    ul#hMenu > li a { text-decoration:none;  padding:0 8px; height:64px; }

    #hImg img { width:100%; }
    #menu { display:none; }


   section { width:100%;  overflow:hidden; }
   .flexBox { display:block; }
   .wMedium { width:100%; } 
   .spNone { display:none; }
   .sp     { display:block; }
   /* */
   #conceptImg,#conceptMain { width:90%; margin:0 auto; }
   section#concept h2 { font-size:3.8vw; }
   #conceptMain p { font-size:3.0vw; }

   /* */
   section#newarticles ul,section#recommend ul,section#catList ul { width:90%; margin:0 auto; display:block; }
   section#newarticles li,section#recommend ul li,section#catList li { width:100%; margin-bottom:24px; }
     section#newarticles li .flexBox,section#recommend li .flexBox,section#catList .flexBox { display:flex; }

/* SHARE */
   section#sns { border-top:0; }
   section#sns ul { flex-wrap:wrap; justify-content: center; width:90%; margin:0 auto; padding:0; }
   section#sns li { width:100%; margin:0 0 14px 0; padding:0; text-align:center; }
   section#sns li:first-child { width:100%; border-right:0; border-bottom:1px solid #999;  }

/* お知らせ */
   section#information ul { width:100%; margin:8px auto 0; font-size:2.6vw; }
   section#information li { flex-wrap:wrap; } 
   section#information li div { width:100%; text-align:right; }
   section#information > div { width:90%; margin:0 auto;  }
   section#information > div img { vertical-align:middle; margin-right:8px; }
   section#information li a { width:100%;  }

/* footer */
  footer { text-align:center; font-size:2.0vw;; }
  footer ul { display:none;  }

/* */
  .article,.post-navigation,#pagination { width:90%; }

}