@charset "UTF-8";

/* =========================
   drmnuit blog-ish theme for FC2 BBS
   - ブログ(checked_blue)寄せ
========================= */

/* --- blog palette --- */
:root{
  --bg: #f2f1ff;
  --card: #ffffff;
  --text: #425467;
  --title: #334860;
  --muted: #8BA6C3;
  --line: #ebf0f4;
  --tagbg: #F8F8F8;
  --shadow: 0 0 8px rgba(0,0,0,.06);
}

/* base */
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  font-family:"游ゴシック","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
  color: var(--text);
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust:100%;
  background: var(--bg);
}

a{ color: var(--text); text-decoration:none; }
a:hover{ opacity:.85; }

/* container（bootstrap無しでも中央寄せ維持） */
.container{
  max-width: 945px;
  margin: 0 auto;
  padding: 0 16px !important;
}

/* =========================
   header: ブログと同じチェック柄
========================= */
#header{
  position: relative;
  width: 100%;
  min-height: 120px;
  margin: 30px 0 40px;
  padding: 0;
  text-align: center;
  background: url(https://blog-imgs-138.fc2.com/t/e/m/templates/checked_blue_check.png) center 1px repeat;
  background-size: 4px 4px;
  color: var(--title);
  text-shadow: none;
}

#header::before,
#header::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:9px;
  display:block;
  background: url(https://blog-imgs-138.fc2.com/t/e/m/templates/checked_blue_line.png) center 1px repeat #fff;
  background-size: 4px 9px;
}
#header::before{ top:0; }
#header::after{ bottom:0; }

#header h1{
  padding: 30px 8px 20px;
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  color: #577393;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* 上部ナビ（list-inlineがある前提で整える） */
#header ul.list-inline{
  margin: 0;
  padding: 0 0 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#header ul.list-inline li{ list-style:none; }
#header ul.list-inline a{
  display:inline-block;
  border: 2px solid #E0E5F5;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text) !important;
  background: #fff;
  padding: 10px 14px;
  line-height: 1;
  min-width: 110px;
  text-align:center;
}
#header ul.list-inline a:hover{ opacity: .9; }

/* =========================
   thread cards: entryっぽく白カード＋影
========================= */
.thread_wrapper{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}

/* 親/子/検索結果 */
.parent_article,
.child_article,
.result_article{
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 6px;
  padding: 20px 30px 18px;
}

/* 子レスは少しだけ区切り感 */
.child_article{
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* date（元: pull-right date） */
.date{
  float: none !important;
  text-align: right;
  font-size: 12px;
  font-weight: bold;
  color: var(--text);
  opacity: .75;
  margin: 0 0 8px;
}

/* タイトル */
.parent_article h3,
.child_article h5{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--title);
  line-height: 1.5;
}

/* small（名前など） */
.parent_article h3 small,
.child_article h5 small{
  color: var(--muted);
  font-weight: bold;
}

/* 本文 */
.article_body, .body{
  font-size: 14px;
  color: var(--text) !important;
  line-height: 1.6;
  margin-top: 8px;
  white-space: normal;
}

.article_body p{
  margin: 0 0 .6em;
}

/* 画像（ブログの画像っぽく中央寄せ） */
img.userimage{
  float: none;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px 0 8px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 0;
}

/* アイコン */
.article_icon img{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: block;
  margin-top: 10px;
}

/* Site / New ラベル（bootstrap無しでもそれっぽく） */
.label{
  display:inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 2px;
  background: #718FAF;
  color: #fff;
  vertical-align: middle;
}
.label-danger{ background:#718FAF; } /* 主張強くしたくないなら同色でOK */
.label-info{ background:#718FAF; }

/* =========================
   操作ボタン（返信/編集/削除）＋ページング
========================= */
ul.list-inline.panel,
ul.list-inline.navi{
  margin: 14px 0 0 !important;
  padding: 0;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  background: transparent !important;
}
ul.list-inline.panel li,
ul.list-inline.navi li{ list-style:none; padding:0; }

input[type="submit"], .button{
  display:inline-block;
  border: 2px solid #E0E5F5;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  background-color: #fff;
  padding: 10px 14px;
  line-height: 1;
  cursor: pointer;
}
input[type="submit"]:hover{ opacity:.85; }

/* =========================
   投稿フォーム（白カード化）
========================= */
#bbsform{
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 6px;
  padding: 20px 30px 18px;
  border: none;
  margin: 30px 0;
}

#bbsform table.postinfo{
  width:100%;
  margin:0;
  border-collapse: separate;
  border-spacing: 0 12px;
}

#bbsform th{
  text-align:left;
  font-size: 18px;
  color: var(--title);
}

#bbsform input[type="text"],
#bbsform input[type="password"],
#bbsform textarea{
  width:100%;
  font-size:14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:#fff;
  color: var(--text);
}

#bbsform textarea{
  resize: vertical;
  min-height: 180px;
}

.alert{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  color: var(--text);
}

/* ads余白 */
div.ads{ margin: 8px auto; }

/* =========================
   スマホ最適化（ブログに寄せる）
========================= */
@media screen and (max-width: 640px){
  .parent_article, .child_article, .result_article,
  #bbsform{
    padding: 16px;
  }
  #header h1{
    font-size: 22px;
    padding: 28px 8px 18px;
  }
  #header ul.list-inline a{
    min-width: auto;
    padding: 10px 12px;
  }
}

/* 中身（文字とボタン）は今まで通り中央の幅に収める */
#header.container > h1,
#header.container > ul.list-inline{
  max-width: 945px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}


/* ===== header を画面端まで（full-bleed / safer） ===== */
#header.container{
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* iPhoneの左右余白(セーフエリア)にも対応したいなら任意で */
#header{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

#header.container{ max-width: none !important; }

font[color]{
  color: var(--text) !important;
}

/* どこかの子要素がはみ出した時の保険 */
.container, .parent_article, .child_article, .result_article, #bbsform{
  max-width: 100%;
}

input[type="submit"],
input[type="reset"],
.button {
  display:inline-block;
  border: 2px solid #E0E5F5;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  background-color: #fff;
  padding: 10px 14px;
  line-height: 1;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="reset"]:hover{
  opacity:.85;
}

/* ===== 記事本文レイアウト：左テキスト / 右画像 ===== */
.parent_article .contents,
.child_article .contents,
.result_article .contents{
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* テキストを左に伸ばす */
.parent_article .article_body,
.child_article .article_body,
.result_article .body,
.result_article .article_body{
  flex: 1 1 auto;
  min-width: 0;
}

/* 画像ブロックを右に固定 */
.parent_article .contents .userimage,
.child_article .contents .userimage,
.result_article .contents .userimage{
  flex: 0 0 220px;      /* 幅は好みで 180〜260 */
  width: 220px;
  max-width: 220px;
  height: auto;
  margin: 0;            /* 既存のmarginを殺す */
}

/* 画像がリンクに包まれてても崩れないように */
.parent_article .contents a.superbox,
.child_article .contents a.superbox,
.result_article .contents a.superbox{
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
}

/* 画像をいい感じに */
.parent_article img.userimage,
.child_article img.userimage,
.result_article img.userimage{
  display: block;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

@media screen and (max-width: 640px){
  .parent_article .contents,
  .child_article .contents,
  .result_article .contents{
    display:block;
  }

  .parent_article .contents .userimage,
  .child_article .contents .userimage,
  .result_article .contents .userimage,
  .parent_article .contents a.superbox,
  .child_article .contents a.superbox,
  .result_article .contents a.superbox{
    width: 100%;
    max-width: 100%;
  }

  .parent_article img.userimage,
  .child_article img.userimage,
  .result_article img.userimage{
    margin-top: 12px;
  }
}

h1{
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .1em;
font-weight: bolder;
}

html {
  scroll-behavior: smooth;
}

.article_body{
  font-size:14px;
  line-height:1.65;
  letter-spacing:.02em;
}

/* ===== edit/delete password page ===== */

.form-edel{
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 6px;
  padding: 28px 30px;
  max-width: 640px;
  margin: 40px auto;
}

/* ラベル */
.form-edel label{
  display:block;
  font-size:14px;
  color: var(--title);
  margin-bottom:8px;
  letter-spacing:.05em;
}

/* 入力欄 */
.form-edel input[type="text"],
.form-edel input[type="password"]{
  width:100%;
  font-size:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#fff;
  color: var(--text);
}

/* ボタン */
.form-edel button{
  margin-top:18px;
  display:inline-block;
  border: 2px solid #E0E5F5;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  background:#fff;
  padding:10px 18px;
  cursor:pointer;
}

.form-edel button:hover{
  opacity:.85;
}

.cancel-btn{
  border-color: var(--line);
  color: var(--muted);
  background: #fff;
}
.cancel-btn:hover{
  opacity:.7;
}

/* =========================
   Preview Page (letters)
========================= */

/* プレビュー全体をカード化 */
#page_preview .container > table:first-of-type{
  width:100%;
  max-width:720px;
  margin:40px auto 30px;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius:6px;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}

/* 行の余白 */
#page_preview table tr{
  border-bottom:1px solid var(--line);
}

#page_preview table td{
  padding:14px 18px;
  font-size:14px;
  vertical-align:top;
}

/* 左カラム（項目名） */
#page_preview table td:first-child{
  width:140px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.05em;
}

/* メッセージ本文 */
#page_preview table td:last-child{
  line-height:1.6;
  color:var(--text);
}

/* 画像 */
#page_preview img{
  max-width:240px;
  height:auto;
  border-radius:6px;
  box-shadow: var(--shadow);
}

/* CAPTCHAブロック */
#page_preview table:nth-of-type(2){
  width:100% !important;
  max-width:720px;
  margin:0 auto 60px !important;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius:6px;
  border-collapse:separate;
  border-spacing:0;
  padding:20px;
}

/* CAPTCHA見出し */
#page_preview th{
  padding:16px;
  font-weight:600;
  color:var(--title);
  font-size:16px;
}

/* 入力欄 */
#page_preview input[type="text"]{
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px 10px;
  font-size:14px;
  width:120px;
}

/* 投稿ボタン */
#page_preview input[type="submit"]{
  margin-top:18px;
  border:2px solid #E0E5F5;
  border-radius:4px;
  font-size:13px;
  color:var(--text);
  background:#fff;
  padding:10px 18px;
  cursor:pointer;
}

#page_preview input[type="submit"]:hover{
  opacity:.85;
}

/* ===== preview image size control ===== */
.container > table img{
  max-width: 420px;   /* ← 好みで 360〜500 */
  width: 100%;
  height: auto;
  display: block;
  margin: 10px;
  border-radius: 6px;
  box-shadow: var(--shadow);
}

/* ===== Preview page background ===== */
body{
  background: var(--bg);
}

/* プレビューの1つ目のtableをカード化 */
.container > table:first-of-type{
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 6px;
  max-width: 900px;
  margin: 40px auto 30px;
  border-collapse: separate;
  border-spacing: 0;
  padding: 20px 30px;
}

/* 2つ目（captcha）も同じカード */
.container > table:nth-of-type(2){
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 6px;
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 24px 30px;
}

/* tableの線を消す */
.container > table td{
  border: none;
}

/* 行間整える */
.container > table td{
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
}

input[name="authnum"]{
  width: 110px;          /* 好みで 90〜130 */
  padding: 8px 10px;
  text-align: center;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.container > table img{
  max-width: 300px;   /* ← 小さめ */
  width: 100%;
  height: auto;
  display: block;
  margin: 14px 0 8px;
  border-radius: 6px;
  box-shadow: var(--shadow);
}

.container > table:nth-of-type(2) img{
  display:block;
  margin:20px auto;
  border-radius:8px;
  box-shadow: var(--shadow);
}

.parent_article .contents .userimage,
.child_article .contents .userimage,
.result_article .contents .userimage{
  flex: 0 0 140px;
  width: 140px;
  max-width: 140px;
}

.parent_article .contents{
  align-items: center;
}

/* ===== 横スクロール防止 ===== */
html, body{
  overflow-x: hidden;
}

*{
  box-sizing: border-box;
}

img{
  max-width: 100%;
  height: auto;
}

/* ===== 投稿フォーム：PCも縦並びにする ===== */

/* テーブルをブロック化 */
#bbsform table.postinfo,
#bbsform table.postinfo tbody,
#bbsform table.postinfo tr{
  display: block;
  width: 100%;
}

/* 各行を1ブロック扱い */
#bbsform table.postinfo tr{
  margin-bottom: 18px;
}

/* ラベル */
#bbsform table.postinfo td:first-child{
  display: block;
  width: 100%;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--title);
  letter-spacing: .05em;

  word-break: keep-all;
  white-space: nowrap;
}

/* 入力欄 */
#bbsform table.postinfo td:last-child{
  display: block;
  width: 100%;
}

#bbsform table.postinfo td:first-child{
  font-size: 13px;
}



#help{
    margin: 20px auto;
    padding:20px;
}


/* ===== PC：カード幅統一（FC2 BBS 安定版） ===== */
@media screen and (min-width: 900px){

  /* スレッドカード */
  .parent_article,
  .child_article,
  .result_article{
    width: min(720px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 投稿フォーム（これが効きにくい本丸） */
  #bbsform{
    width: min(720px, calc(100% - 32px)) !important;
    max-width: none !important;       /* max-width頼みをやめる */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;        /* tableっぽい挙動を潰す */
  }

  /* #bbsform の中の table が幅100%で暴れるのを抑える */
  #bbsform table,
  #bbsform .postinfo{
    width: 100% !important;
  }
}

@media screen and (min-width: 900px){
  .parent_article,
  .child_article,
  .result_article,
  #bbsform{
    margin-top: 0;
    margin-bottom: 30px;
  }
}

/* ===== thread: 親+子を一体化して見せる ===== */
.thread_wrapper{
  gap: 0;                 /* 親と子の間の余白を消す */
  margin-bottom: 60px;    /* スレッド単位の余白は残す */
}

/* 親カード：下の角を落として“上側だけカード”に */
.thread_wrapper .parent_article{
  border-radius: 6px 6px 0 0;
  padding-bottom: 14px;   /* 下を少し詰める */
}

/* 子カード：上の角を落として“下側だけカード”に */
.thread_wrapper .child_article{
  border-radius: 0;
  box-shadow: none;                 /* 親と同じ箱に見せる */
  border-top: 1px solid var(--line);
  margin-top: 0;
}

/* 最後の返信だけ下の角を戻す */
.thread_wrapper .child_article:last-child{
  border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow);        /* スレッド全体の影として欲しければここで */
}

/* 返信が無い場合：親だけで完結するので角を戻す */
.thread_wrapper .parent_article:last-child{
  border-radius: 6px;
}

.thread_wrapper .child_article{
  background: #fbfcff; /* ほんのり違う白 */
  padding-top: 14px;
  padding-bottom: 14px;
}

.child_article h5{
  font-size: 11px;
  margin-bottom: 6px;
}

/* ===== 親と返信の間の余白を強制で0にする ===== */
.thread_wrapper{
  display: block !important;   /* 変なflexが当たってても潰す */
}

.thread_wrapper .parent_article{
  margin-bottom: 0 !important;
  border-radius: 6px 6px 0 0;
}

.thread_wrapper .child_article{
  margin-top: 0 !important;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--shadow);         /* 影は下だけでOK */
  border-top: 1px solid var(--line);
}

/* 親カードは下角を落とす */
.parent_article{
  border-radius: 6px 6px 0 0 !important;
}

/* 次に来る返信カード（別wrapperでもOK）を上角0にして詰める */
.parent_article + .child_article{
  margin-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
  border-top: 1px solid var(--line);
}

/* ===== 親+返信を“1つのカード群”として密着させる ===== */

/* まず gap を殺す（ここが本丸） */
.thread_wrapper{
  gap: 0 !important;
  margin-bottom: 18px; /* スレ同士の間隔はここで取る */
}

/* それぞれのカードが勝手に余白持ってたら潰す */
.parent_article,
.child_article{
  margin: 0 !important;
}

/* 角丸を「親=上」「返信=下」に分担 */
.thread_wrapper > .parent_article{
  border-radius: 6px 6px 0 0 !important;
}
.thread_wrapper > .parent_article:last-child{
  border-radius: 6px !important; /* 返信が1個もない時 */
}

.thread_wrapper > .child_article{
  border-top: 1px solid var(--line);
  border-radius: 0 !important;
  box-shadow: none !important; /* 返信は影なしにして“同じカード感” */
}

.thread_wrapper > .child_article:last-child{
  border-radius: 0 0 6px 6px !important;
  box-shadow: var(--shadow) !important; /* 影は最後だけ */
}








/* ===== thread_wrapper を確実に中央寄せ ===== */
.container .thread_wrapper{
  width: 100%;
  max-width: 860px;      /* 好み：720〜900 */
  margin: 0 auto;
}

/* wrapper の中のカードは wrapper 幅に揃える */
.container .thread_wrapper > .parent_article,
.container .thread_wrapper > .child_article,
.container .thread_wrapper > .result_article{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* date が float ならレイアウト崩しやすいので保険 */
.container .thread_wrapper .date{
  float: none !important;
  text-align: right;
}


/* ===== 一覧・返信ページ：カードを必ず中央寄せ ===== */
.parent_article,
.child_article,
.result_article,
#bbsform{
  max-width: 720px;
  margin: 0 auto 18px; /* 下に余白も付く */
}

/* thread_wrapper も中央に */
.thread_wrapper{
  max-width: 720px;
  margin: 0 auto;
}

/* FC2側のfloatが当たってても中央寄せを壊さない */
.thread_wrapper,
.parent_article,
.child_article,
.result_article,
#bbsform{
  float: none !important;
}


/* ===== 記事一覧の列を強制的に中央＆同じ幅にする（最終上書き） ===== */
.thread_wrapper{
  width: min(720px, calc(100% - 32px)) !important; /* 720固定＋スマホは左右16px */
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* カード側も列幅に合わせて100%で伸ばす */
.parent_article,
.child_article,
.result_article{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}