/* ===== フォント ===== */
body{
  font-family:
    "Hiragino Mincho ProN","Hiragino Mincho Pro",
    "ヒラギノ明朝 ProN W3","ヒラギノ明朝 Pro W3",
    "MS Mincho",serif;
}
:lang(en), h2, h3, nav, .site-logo{
  font-family:"Times New Roman",Times,serif;
}

/* ===== 変数 ===== */
:root{
  --bar-h:48px;
  --bar-bg:rgba(152,158,179,0.7);
  --bar-border:rgba(152,158,179,0.7);
  --pillar-1:#9a4c4c; --pillar-2:#7a3c3c; --pillar-3:#5a2c2c;
}

html{ font-size:16px; }
body{
  margin:0;
  padding-top:calc(var(--bar-h) * 2);
  background:#fff; color:#333; line-height:1.6;
}

/* ===== ロゴ・ナビ ===== */
.site-logo{
  position:fixed; top:0; left:0; width:100%; height:var(--bar-h);
  background-color:var(--bar-bg); padding:0 12px;
  display:flex; align-items:center; box-sizing:border-box; z-index:1000;
}
.site-logo img{ height:calc(var(--bar-h) - 8px); width:auto; display:block; }

nav{
  position:fixed; top:var(--bar-h); left:0; width:100%; height:var(--bar-h);
  display:flex; align-items:center; justify-content:stretch;
  background-color:var(--bar-bg);
  border-top:1px solid var(--bar-border);
  border-bottom:1px solid #fff;
  box-sizing:border-box; z-index:999;
}
nav a{ flex:1 1 auto; height:100%; display:flex; align-items:center; justify-content:center; text-decoration:none; }
nav img{ height:calc(var(--bar-h) - 8px); width:auto; display:block; }
nav a.active{ background:#fff; }

@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){
  :root{ --bar-h:56px; }
}

/* ===== メイン ===== */
.information-area{
  min-height:calc(100vh - (var(--bar-h) * 2));
  padding:40px 20px 40px;
  background:#fff; box-sizing:border-box;
}
.information{
  max-width:800px;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:15px !important;
  padding-right:15px !important;
  text-align:left;
  box-sizing:border-box;
}

/* ===== 見出し（柱付き） ===== */
.pillar-title{
  font-size:1rem; font-weight:normal; text-align:left;
  margin:1.2em 0 0.6em; position:relative; padding-left:14px;
}
.pillar-title::before{
  content:""; position:absolute; left:0; top:4px;
  width:4px; height:calc(100% - 8px);
  background:linear-gradient(to bottom,var(--pillar-1),var(--pillar-2),var(--pillar-3));
  border-radius:2px;
}

/* ===== テキスト & フォーム ===== */
.information p{ font-size:0.7rem; line-height:1.6; margin:0 0 0.9em; }

.information input,
.information textarea,
.information button,
.information label{ font:inherit; color:inherit; }

.information input[type="text"]{
  width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box;
}
.information textarea{
  width:100%; min-height:9em; padding:10px; border:1px solid #ccc; border-radius:4px;
  box-sizing:border-box; resize:vertical;
}
.information button{
  padding:8px 14px; border:1px solid #ccc; background:linear-gradient(#fff,#eee);
  border-radius:6px; cursor:pointer;
}
.information button:active{ transform:translateY(1px); }

#clapCount{ margin-left:8px; font-weight:bold; }

.comment-list .item{
  border-top:1px solid #eee; padding:0.6em 0;
}
.comment-list .meta{ font-size:0.65rem; color:#666; margin-bottom:0.3em; }
.comment-list .name{ font-weight:bold; }
.comment-list .time{ margin-left:0.5em; }
.comment-list .body{ font-size:0.75rem; white-space:pre-wrap; }
.comment-list .empty{ font-size:0.7rem; color:#999; }/* 画像を中央に配置＆余白を確保 */
.information img.centered {
  display: block;           /* インライン要素をブロック化して中央寄せできるように */
  margin: 30px auto;        /* 上下40pxの余白＋左右自動で中央寄せ */
  max-width: 100%;          /* 横幅はコンテナを超えない */
  height: auto;             /* アスペクト比を維持 */
  border-radius: 8px;       /* 角を少し丸める（不要なら削除） */
}
html, body {
  height: 100%;       /* ページ全体を100%に固定 */
  overflow: hidden;   /* スクロール禁止 */
}