/*
  Theme Name:Amaru
*/
/*------------------------------
  reset
------------------------------*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background:transparent;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;  
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

/*------------------------------
  initialize
------------------------------*/
*{
  font-size:inherit;
  line-height:inherit;
  background-repeat:no-repeat;
  box-sizing:inherit;
  border-style:solid;
  border-width:0;
  margin: 0px;
  padding: 0px;

}

:before,:after{
  text-decoration:inherit;
  vertical-align:inherit;
  box-sizing:inherit;
  border-style:solid;
  border-width:0;
}

button,input,select,textarea{
  font-family:inherit;
  font-style:inherit;
  font-weight:inherit;
  background-color:transparent;
  color:inherit;
}

html{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  line-height:1.8;
  font-size:100%;
  background-color:#ffffff;
  box-sizing:border-box;
  color:#000000;
  cursor:default;
  overflow-y: scroll;
}

body{
  line-height:1.8;
  overflow:hidden;/*謎の空白対策*/
}

.fix{
  height: 100%;
  overflow: hidden;
}

a{
  color:#19283c;
  text-decoration:none;
}

a:hover{
  filter: brightness(110%);
  color:#1d9bf0;
}

p{overflow:hidden;}

i{margin-right:4px;}

table{
  margin:8px 0 1.8em;
  border-collapse:collapse;
  display:table;
}

th,td{
  padding:4px 8px;
  border:1px solid #b9b9b9;
  vertical-align:middle;
}

th{
  color:#fff;
  background-color:#3b62bf;
  text-align:center;
}

td{text-align:left;}

nav ol,nav ul{
  list-style:none;
}

img{
  max-width: 100%;
  height: auto;
}
/*------------------------------
  common
------------------------------*/
/*-- button --*/
.button{
  margin:28px 0;
  text-align:center;
  display:block;
}

.button a{
  text-align:center;
  display:inline;
  padding:8px 12px;
  border-radius:8px;
  color:#fff;
  background-color:#1d9bf0;
  box-shadow:1px 1px 2px #000;
  font-size:1.25rem;
  font-weight:bold;
}

/*-- tag --*/
ul.tag{
  margin:0;padding:0;
}

article ul.tag{
  margin:-8px 0 20px;
  padding:0;
}

ul.tag li{
  list-style-type:none;
  display:inline-block;
}

.tag li a{
  margin:0 8px 8px 0;
  padding:2px 8px;
  border-radius:4px;
  color:#fff;
  background-color:#1d9bf0;
  box-shadow:1px 1px 2px #000;
  display:inline-block;
  font-size:0.875rem;
  font-weight:bold;
}

a.archiveLink{
  margin:12px 0;
  padding:2px 12px;
  font-weight:bold;
  font-size:1.25rem;
  display:inline-block;
  border:solid 1px;
  border-radius:4px;
  text-align:center;
}

/*  SNS  */
.sns{
  margin:28px 0;padding:0;
}

.sns ul {
  text-align: center;
}

.sns li {
  width: 72px;
  height:44px;
  margin:0;
  padding: 4px 4px 4px 0;
  list-style: none;
  box-sizing: border-box;
  display: inline-block;
}

.sns li > a {
  padding: 0;
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size:1.25em;
}

.sns li > a:hover {
  cursor: pointer;
}

.sns li.twitter > a {
  background-color: #1d9bf0;
}

.sns li.facebook > a {
  background-color: #3b5998;
}

.sns li.hatebu > a {
  background-color: #00a4de;
}

.sns li.line > a {
  background-color: #00c300;
  font-weight: bold;
}
/*------------------------------
  container
------------------------------*/
#container{
  margin:80px auto 0;
  padding:0 16px;
  max-width:768px;
  min-height:480px;
}

/*------------------------------
  topMenu
------------------------------*/
#topMenu{
  background-color:#1d9bf0;
  color:#fff;
  margin:0 auto 20px;
  padding:4px 12px;
  text-align:center;
  font-size:1.5rem;
  height:48px;
  width:100%;
  position: fixed;
  z-index:99;
}

#topMenu.hide {
  transform:translateY(-48px);
}

.topMenuWidth{
  margin:0 auto;
  max-width:960px;
  position:relative;
}

/*  サイト名  */
.headerLogo{
  display:inline-block;
  font-weight:bold;
  text-align:center;
  position: relative;
  top:-2px;
  color: #fff;
  z-index:999;
}

.a-maru{
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-right:2px;
  display:inline-block;
  color: #fff;
  font-family:游教科書体,游明朝体,游ゴシック,游明朝;
}

.amaru{
  display:none;
}

/*  sidebar  */
#sidebar{
  height:100%;
  width:100%;
  left:0;
  transform: translateX(-100%);
  background-color:#1d9bf0;
  color:#fff;
  position:fixed;
  text-align:left;
  padding-top:60px;
}

.sidebarContents{
  max-width:640px;
  padding:0 12px;
  margin:auto;
}

.sidebarContents > *{
  margin-top:20px;
}

#sidebar a{
  color:#fff;
  display:block;
}

#sidebar a i{
  color:#1d9bf0;
}

h1.logo{
  margin:0;
  font-size:1em;
  display:inline-block;
}

h1.logo a{
  margin-top:2px;
}

.headerLogo:hover,#sidebar a:hover{
  color:#19283c;
}

#sidebar ul{
  flex-wrap:wrap;
  padding-bottom:20px;
  margin-bottom:20px;
  display:flex;
}

#sidebar ul li{
  margin:4px 4px;
  padding:2px 6px;
  list-style-type:none;
  border:solid 2px #000;
  border-radius:4px;
  background-color:#fff;
}
#sidebar ul li a{
  font-weight:bold;
  font-size:1rem;
  color:#19283c;
}

#sidebar ul li a:hover{
  color:#1d9bf0;
}

#sidebar > a{
  margin:12px 8px;
  font-weight:bold;
}

#openSidebarMenu:checked ~ #sidebar{
  transform: translateX(0);
}

#openSidebarMenu{
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 0;
  height: 28px;
  width: 22px;
  position:absolute;
  z-index:999;
}

.tcircle{
  margin-top:-10px;
  padding:10px 8px 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  display:block;
}

.spinner{
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #1d9bf0;
  display:block;
}
.horizontal{
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 4px;
}
.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}
.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 4px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}
#openSidebarMenu:checked ~ .sidebarIconToggle .diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle .diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -12px;
}

#openSidebarMenu:checked ~ .sidebarCover{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(3,3,3,.5);
  display: block;
}

/*  search  */
.searchFormInner{
  position:absolute;
  top:0;
  right:0;
  z-index:999;
}

#searchForm{
  margin-top:-2px;
}

.search-btn{
  display:inline-block;
  margin:2px auto 0;
  text-align:center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
}

.search-btn i{
  color:#1d9bf0;
  margin:0;
}

#searchInput[type="text"]{
  background:#fff;
  border:none;
  border-radius:12px;
  color:#333;
  cursor:pointer;
  opacity:0;
  outline:none;
  padding:6px 12px;
  transition:all 0.7s;
  position:absolute;
  top:-2px;
  right:0;
  width:48px;
  height:100%;
  font-size:1.25rem;
}

#searchSubmit[type="submit"]{
  display:none;
}

#searchInput[type="text"]:focus{
  cursor:text;
  opacity:1;
  width:300px;
}

.icircle{
  padding-top:5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  vertical-align: middle;
  text-align:center;
}

/*------------------------------
  post
------------------------------*/
article header p{
  margin:12px 0;
}

h1{
  margin:20px 0 28px;
  color:#19283c;
  line-height:1.4;
  font-size:1.75rem;
  font-weight:bold;
}

h2,.heading{
  position:relative;
  margin:28px 0 20px;
  padding:12px 0;
  font-size:1.5rem;
  font-weight:bold;
  overflow:hidden;
}

h2::before,h2::after,.heading::before,.heading::after{
  content:"";
  position:absolute;
  bottom:0;
}
h2:before,.heading:before{
  border-bottom:4px solid #1d9bf0;
  width:100%;
}
h2:after,.heading:after{
  border-bottom:4px solid #d8d8d8;
  width:100%;
}

h3{
  position:relative;
  margin:24px 0 16px;
  padding:6px 0 6px 18px;
  line-height:1.4;
  font-size:1.25rem;
  font-weight:bold;
}

h3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  border-radius: 4px;
  width: 6px;
  height: 100%;
  background: #1d9bf0;
}

h4{
  font-weight:bold;
  position:relative;
  padding-left:20px;
}

h4::before{
   position:absolute;
   content:'';
   width:16px;
   height:16px;
   background:#0095d9;
   border-radius:50%;
   top:50%;
   left:0;
   margin-top:-8px;
}

h4::after{
   position:absolute;
   content:'';
   width:0;
   height:0;
   border:solid 4px transparent;
   border-left:solid 6px #fff;
   top:50%;
   left:6px;
   margin-top:-4px;
}

.heading{
  position:relative;
  margin:28px 0 12px;
  padding:4px 0;
  font-size:1.5rem;
  font-weight:bold;
  overflow:hidden;
}

.heading::before,.heading::after{
  content:"";
  position:absolute;
  bottom:0;
}
.heading:before{
  border-bottom:4px solid #1d9bf0;
  width:100%;
}
.heading:after{
  border-bottom:4px solid #d8d8d8;
  width:100%;
}

.eyecatch{
  margin:20px auto;
  display:block;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

.postImg{
  margin:20px 0;
  display:block;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  max-width:100%;
  height:auto;
}

.post p.header{
  margin:20px 0 12px;
  font-weight:bold;
}

article p,article > a{
  margin:12px 0 28px;
}

p > a{
  display:inline;
}

article ul li{
  list-style-type:disc;
}

article ul,article ol{
  margin:12px 12px 1.8em 28px;
}

sup{/*  n乗  */
  font-size: 70%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}

/*  box  */
.memo,.caution,.point{
  position:relative;
  margin:12px 0 28px;
  padding:8px 12px 4px;
  border-radius:4px;
}

.boxHeader{
  padding-bottom:4px;
}

.boxHeader i,.boxHeader p{
  display:inline;
  font-weight:bold;
  font-size:1.25rem;
}

.memo{
  border:solid 2px #000;
  background-color:#fefefe;
  color:#000;
}

.memo .boxHeader p,.memo .boxHeader i{
  color:#4169e1;
}

.caution{
  background-color:#ffebeb;
  color:#44566d;
}

.caution .boxHeader p,.caution .boxHeader i{
  color:#ff4500;
}

.point{
  color:#fff;
  background-color:#114400;
  border:4px solid #a60;
}
.point .boxHeader p,.point .boxHeader i{
  color:#fff;
}

.point p,.memo p,.caution p{
  margin:0 0 12px 0;
}

.point ul,.point ol,.memo ul,.memo ol,.caution ul,.caution ol{
  margin:0 0 12px 24px;
}

a.sitemapList{
  margin:0 0 8px 0;
  display:block;
}

/*  quote  */
.quote{
  margin:12px 0 28px;
  padding:12px 8px 0;
  position:relative;
  border:solid 2px #3E3E3E;
  border-radius:4px;
  color:#44566d;
  font-weight:bold;
}

.quote:before{
  content:'“';
  font-size:3rem;
  line-height:1em;
  color:#6bb6ff;
  position:absolute;
  left:4px;
  top:16px;
}

.quote p,.quote a{
  margin:0 0 12px 28px;
}

.quote ul,.quote ol{
  margin:0 0 12px 52px;
}

.quote a.source{
  margin:-12px 0 0 28px;
  padding:0;
  color:#0084b4;
  text-align:right;
  font-weight:bold;
}

/*  movie  */
.youtube{
  margin:12px 0 28px;
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
}
.youtube iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/*  link  */
.linkCard{
  position:relative;
  font-weight:bold;
  margin:28px 0;
  padding:16px 12px;
  border:solid 2px #00c0ff;
}

.linkCard p{
  position:absolute;
  top:0;
  left:-2px;
  margin:0;
  padding:0 4px;
  transform:translateY(-50%) translateX(10px);
  color:#3b4675;
  background-color:white;
}

.linkCard a{
  width:100%;
  height:100%;
  display:inline-block;
}

/*  ref  */
a.ref{
  margin:0;padding:0;
  color:#0084b4;
  font-weight:bold;
}

.quote a.ref{
  margin:0 0 12px 28px;
}

/*  toc  */
#toc{
  margin:12px auto;
  padding:8px 20px 12px;
  border-top:solid 6px #1d9bf0;
  background-color:#fcfcfc;
  box-shadow:0px 0px 6px silver;
}

.tocHeader{
  color:#1d9bf0;
  font-weight:bold;
  font-size:1.25rem;
  display:inline;
}

.tocHeader p{
  display:inline;
  margin:0 8px;
}

.tocHeader i{
  color:#fff;
  background-color:#1d9bf0;
  margin-left:-14px;
  width:40px;
  height:40px;
  border-radius:50%;
  text-align:center;
  line-height:40px;
  font-size:1.25rem;
  display:inline-block;
}

#toc ol{
  margin:0;padding:0 0 0 20px;
  list-style-type:none;
}

ol#tocTop{
  margin-top:8px;
}

#toc ol li{
  list-style-type:decimal;
  padding:0 6px;
  font-weight:bold;
}

.ocbutton{
  display:none;
}

.ocbutton + label:before{
  content:"[開く]";
}
.ocbutton:checked + label:before{
  content:"[閉じる]";
}
.oc_content{
  display:none;
}

#b0:checked ~ #b0_content{
  display:block;
}

/*  breadcrumb  */
.breadcrumb{
  background-color:#fff;
  margin:20px 0 20px -8px;
}

.breadcrumb ul{
  font-size:1.0rem;
  font-weight:bold;
  overflow:hidden;
  margin:0;padding:0;
}

.breadcrumb li{
  display:inline;
  list-style-type:none;
}

.breadcrumb a,.breadcrumb p{
  padding:0 8px;
  position:relative;
  text-decoration:none;
  display:inline;
  color: #004363;
  font-weight:bold;
}

.breadcrumb i{margin:0;}
/*------------------------------
  information
------------------------------*/
.categoryDescription{
  margin:20px 0;
}

.categoryImg{
  width:320px;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/*  archiveBox  */
.flexbox{
  display:flex; 
  flex-wrap:wrap;
  width:100%;
  height:auto;
}

.archiveBox{
  margin:0 0.6% 8px;
  line-height:1.2;
  width:100%;
  display:flex;
  align-items:center;
}

.archiveBox a{
  width:100%;
  height:100%;
  display:block;
}

.archiveBox img{
  width:32%;
  margin-right:8px;
  float:left;
  border:solid 1px silver;
}

.archiveBox p{
  margin:0;
  padding:4px 0;
  text-align:left;
  display:flex;
  font-weight:bold;
  min-height:64px;
}

p.archiveBoxSitename{
  font-size:1.5rem;
  align-items:center;
}

/* categoryList */
.categoryList,.categoryList a,.categoryList p{
  height:64px;
}

.categoryList{
  background-color:#fff;
  margin:0 0.6% 8px;
  line-height:1.2;
  width:100%;
}

.categoryList a{
  width:100%;
}

.categoryList img{
  margin-right:8px;
  border:solid 1px silver;
  float:left;
}

.categoryList p{
  margin:0;
  font-weight:bold;
  font-size:1.375rem;
  display:flex;
  align-items:center;
  text-align:left;
}

/*  archiveList  */
.archiveList{
  margin:12px auto 0;
  padding:0;
  width:100%;
  min-height:80px;
  line-height:1.2;
  display:flex;
}

article .archiveList{
  margin:28px 0;
}

.archiveList a{
  width:100%;
}

.archiveList img{
  margin-right:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  float:left;
}

.archiveList p{
  height:80px;
  padding-right:4px;
  font-weight:bold;
  display:table-cell;
  vertical-align:middle;
}

/*  archiveListCategories  */
ul.archiveListCategories{
  list-style-type:none;
  margin:0 0 20px;
}

.archiveListCategories li{
  margin:8px 8px 0 0;
  padding:0 8px 0 20px;
  border:solid 1px gray;
  display:inline-block;
}

.archiveListCategories li:before{
  content:'';
  display:inline-block;
  position:absolute;
  width:0;
  height:0;
  margin:10px 0 0 -12px;
  border:6px solid transparent;
  border-left:6px solid #ee4f16;
}

/*  pagination  */
.nextprev{
  padding-left:4px;
  color:#fff;
  background-color:#808080;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination{
  padding:20px 0;
  font-size:1.25rem;
  font-weight:bold;
  display:table;
  border-collapse:separate;  /* セルの間隔を空ける */
  border-spacing:4px 0;
  text-align:center;
  margin:0 auto;
}

.pagination a,.current{
  padding:0 12px;
  border-radius:8px;
  background-color:#2894D4;
  border:solid 2px #2894D4;
  color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  display:table-cell;
}

.pagination .current{
  background-color:#fff;
  color:#2894D4;
}

/*-------------------------
  footer
-------------------------*/
footer{
  background-color:#f6f6f6;
  padding:12px 16px 20px;
  text-align:center;
}

.footerArea{
  margin:20px auto 0;
  max-width:600px;
  text-align:center;
}

.footerAreaHeader{
  margin:12px 0;
  font-weight:bold;
}

.footerLogo{
  display:inline-block;
  position: relative;
  font-weight:bold;
  font-size:1.5em;
  color:#000;
}

/*-------------------------
  contactForm
-------------------------*/
/* 項目名を太字にする */
#sendMail label{
  font-weight:bold;
}

/* 入力項目を見やすくする */
#sendMail input,#sendMail textarea{
  width:100%;
  padding:8px 15px;
  margin-right:10px;
  margin-top:10px;
  border:1px solid #d0d5d8;
  border-radius:3px;
}
#sendMail textarea{
  height:120px;
  vertical-align:top;
}

/* 送信ボタンを見やすくする */
#sendMail input[type="submit"]{
  background:#1d9bf0;
  border:2px solid #FFF;
  color:#FFF;
  border-radius:4px;
  box-shadow:1px 1px 1px rgba(000,000,000,0.3);
  text-shadow:0px 0px 3px rgba(0,0,0,0.5);
  height:44px;
  width:120px;
  padding:6px 0;
  margin-bottom:12px;
  font-weight:bold;
}

/* メッセージ */
.sendSuccess{
  color:blue;
  border:solid 2px blue;
  font-weight:bold;
  width:100%;
  padding:8px;
}

.sendErr{
  color:red;
  border:solid 2px red;
  font-weight:bold;
  width:100%;
  padding:8px;
}

/*-------------------------
  site
-------------------------*/
/*  animal  */
table.profile{
  margin:20px auto;
  width:100%;
}

table.profile th{
  text-align:center;
  background-color:#3b62bf;
  color:white;
  width:160px;
}

table.profile td{
  padding:4px 8px;
  text-align:left;
}

/*  it  */
pre{
  margin:0 0 1.8em;
  padding:8px 0 8px 8px;
  font-size:0.875rem;
  line-height:1.4;
  color:#fff;
  white-space:pre-wrap;
  /*折り返し*/
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow:auto;
  background-color:#424242;
}

code{
  font-family:Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

em{
  display:inline-block;
  width:101%;
  margin:0 -8px;
  padding:0 8px;
  color:yellow;
}

p.codeHeader{
  margin:0 0 -4px 0;
  background-color:#424242;
  color:#fff;
  font-weight:bold;
}

p.codeTitle{
  padding:4px 4px;
  background-color:#2581c4;
}

p.HTML:before{
  content:"HTML";
  padding:4px 16px;
  background-color:#ef5350;
}

p.CSS:before{
  content:"CSS";
  padding:4px 16px;
  background-color:#006eb9;
}

p.PHP:before{
  content:"PHP";
  padding:4px 16px;
  background-color:#8892bf;
}

p.WordPress:before{
  content:"WordPress";
  padding:4px 16px;
  background-color:#8892bf;
}

p.JavaScript:before{
  content:"JavaScript";
  padding:4px 16px;
  background-color:#efa300;
}

/*  prove  */
.meigenList{
  margin:8px auto 40px;
  left:0;
  right:0;
  padding:12px 8px 8px;
  line-height:1.2;
  position:relative;
  border-radius:6px;
  border:groove 6px #644034;
}

.meigenListContent{
  margin-bottom:12px;
  display:table;
}

.meigenListContent .cell:first-child{
  width:88px;
}

.meigenListContent img{
  border:solid 1px gray;
}

.meigenListContent p{
  margin:0;
  padding:0 4px;
  font-weight:bold;
  font-size:1.125rem;
  display:table-cell;
  vertical-align:middle;
}

.meigenListComment{
  margin:0;
  padding:12px 0;
  color:gray;
  border-top:solid 1px gray;
}

ul.meigenListFooter{
  margin:0;
  padding:8px 0;
}

.meigenListFooter li{
  list-style-type:none;
  float:left;
}

.meigenListFooter li a{
  margin-right:8px;
  padding:4px 8px;
  border-radius:4px;
  color:#fff;
  text-decoration:none;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  font-size:0.875rem;
  font-weight:bold;
  display:inline-block;
}

.meigenListAuthor{
  background-color:#347bdd;
}

.meigenListCategory{
  background-color:#3498db;
}

/*  art  */
.gallery{
  margin:0 auto;
  display:grid;
  grid-gap:12px;
}

.artList{
  margin:0 auto;
  line-height:1.2;
  max-width:420px;
}

.artList *{
  display:block;
}

.artList img{
  margin:0 auto;
  border:groove 12px #644034;
  border-radius:4px;
  box-shadow:1px 1px 2px #000;
  max-height:480px;
}

p.artListTitle{
  font-size:1.25rem;
  font-weight:bold;
  margin:8px 0;
  padding:8px;
  text-align:center;
}

.artListYear{
  font-size:0.75rem;
  margin-top:4px;
  text-align:center;
}

.artList>ul{
  list-style-type:none;
  margin:0;padding:0;
  display:inline-block;
  font-size:0.875rem;
}

.artListDesc{
  margin:4px 0;
}

.artListFooter li{
  float:left;
}

.artListFooter li a{
  margin:4px;
  padding:4px 8px;
  border-radius:4px;
  color:#fff;
  text-decoration:none;
  box-shadow:1px 1px 2px #000;
  font-size:0.875rem;
  font-weight:bold;
}

.artListCategory a{
  background-color:#347bdd;
}

.artListTag a{
  background-color:#3498db;
}

/*-------------------------
  responsive
-------------------------*/
@media screen and (min-width:768px){
  body{font-size:1.125rem;}
  #container{padding:0 40px;}
  #toc>ol{margin-left:24px;}
  .archiveBox,.categoryList{width:32%;text-align:center;}
  .archiveBox{height:calc(100% * 0.32 * 0.9);text-align:center;}
  .archiveBox img{margin:0;width:100%;float:none;}
  .archiveBox p{padding:4px 8px;}
  p.archiveBoxSitename{justify-content: center;}
  .categoryList img{border:none;border-right:solid 1px silver;}
  .gallery{grid-template-columns:1fr 1fr;}
  .amaru{display:inline-block;}
}