/* ===== 全体レイアウト ===== */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
  background-color: whitesmoke;
  color: #333;
}

/* ===== ヘッダー ===== */
.hwrapper {
  width: 100%;
  background-color: #FDE9FB;
max-width: 1080px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.header-img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  display: block;
}

/* ===== メニュー ===== */
.menu {
  display: flex;
  justify-content: center; /* 中央揃えにする */
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  background-color: #FFDEC5;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  box-sizing: border-box;

  scrollbar-width: none; /* Firefox */
}

.menu a {
  text-decoration: none; /* 最初は下線なし */
  color: #336699; /* リンク色を青系にする */
  display: block; /* aタグをブロック化して、.box全体にリンク適用 */
  width: 100%;
  height: 100%;
}

.menu a:hover {
  text-decoration: underline; /* ホバーしたら下線を出す */
}

.box {
  flex: 1 1 0%; /* 均等に横幅を分ける */
  text-align: center;
  padding: 15px 0; /* 横のpaddingをなくす */
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  background-color: #FFDEC5;
  box-sizing: border-box;
}

/* 最初の .box だけ左ボーダーを消す（2重線防止） */
.box:first-child {
  border-left: none;
}

.box:last-child {
  border-right: none;
}

/* ===== Blogroll ===== */

.home-title {
  max-width: 900px;
  font-size: 20px;
  margin: 30px auto 10px;
  color: #333;
}

.blogroll {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px; /* 上下paddingなくす！ */
  background-color: white;
  border: 1px solid #ccc;
  box-sizing: border-box; /* ← 追加！ */

  max-height: 200px;
  overflow-y: auto;
}

.blogroll ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.blogroll li {
  margin-bottom: 10px;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.blogroll li:not(:last-child):not(.submenu-title) {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.blogroll a {
  text-decoration: none;
  color: #336699;
}

.blogroll a:hover {
  text-decoration: underline;
}

/* ===== 本文＋サイドバー横並び ===== */
.content-wrapper {
  display: flex;
  max-width: 1080px;
  margin: 40px auto;
  gap: 20px;
/* 画面が狭くても横並びを維持するための設定 */
  overflow-x: auto;
  flex-wrap: nowrap;
  min-width: 600px;
box-sizing: border-box;
}

.main {
  flex: 1;
  margin-top: 20px;
  background-color: whitesmoke;
 }

.main-box {
  border: 2px solid #ccc; /* 枠線の太さと色 */
  padding: 20px; /* 中身との間隔 */
  margin-top: 10px; /* 上の「更新情報」と少し隙間 */
  background-color: white; /* 好きな背景色 */
  box-sizing: border-box;
}

.read-more {
  display: inline-block;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.read-more:hover {
  color: darkblue;
}

.hidden-keyword {
  display: none;
}

/* ===== 本文の文章構造===== */
.article-title {
  max-width: 900px;
  font-size: 20px;
  margin: 10px auto 70px;
  color: #333;
}

.main-danraku{
  text-indent:1em;
  margin: 0 0 8px 0; /* 下だけ8pxにして、上は0 */
  font-size: 16px;   /* 必要ならフォントサイズも調整 */
}

.main-tsuduki{
  margin: 50px 0 8px 0; /* 下だけ8pxにして、上は0 */
  font-size: 16px;   /* 必要ならフォントサイズも調整 */
}

.main-owari{
  margin: 50px 0 100px 0; /* 下だけ8pxにして、上は0 */
  font-size: 16px;   /* 必要ならフォントサイズも調整 */
}

.main-danrakudake{
  text-indent:1em;
  margin: 0 0 100px 0; /* 下だけ8pxにして、上は0 */
  font-size: 16px;   /* 必要ならフォントサイズも調整 */
}

.underline {
  text-decoration: underline;
}

.main-img {
  width: 100%;
  margin: 50px 0 50px 0;
  object-fit: cover;
  display: block;
}

.img-caption {
  text-align: center;
  font-size: 1rem;
  margin-top: -30px; /* 必要なら画像との隙間を調整 */
  margin-bottom: 50px;
  color: #555;
}

/* ===== 目次===== */
.toc {
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  margin: 100px 0 100px 0;;
}

.toc ul {
  padding-left: 20px;
}

.toc li {
  margin-bottom: 10px;
}

.toc a {
  color: #336699;
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

.subtitle {
  border-left: 3px solid blue;
  padding-left: 8px;
  background: linear-gradient(to right, whitesmoke 0%, transparent 100%);
}

.subsubtitle {
  padding-left: 8px;
}

.no-marker {
  list-style: none;
  margin-left: 0;
  padding-left: 1em; /* ← インデント用 */
}

.no-marker a {
  color: black;              /* 通常時は黒 */
  text-decoration: none;     /* 下線を消したい場合はこれ */
}

.no-marker a:hover {
  color: blue;               /* ホバー時に青に変化（お好みで） */
  text-decoration: underline;/* 下線表示（お好みで） */
}

/* ===== ジャンルのページ===== */
    /* カテゴリー展開スタイル */
    .category-block {
  margin-bottom: 20px;
  padding: 0;          /* パディング除去 */
  border: none;        /* 枠線除去 */
  background: none;    /* 背景除去 */
  box-shadow: none;    /* 影も除去しておく */
}

    input[type="checkbox"] {
      display: none;
    }

    .category-label::before {
      content: "▶";
      margin-right: 5px;
      transition: transform 0.2s;
    }

    input[type="checkbox"]:checked + .category-label::before {
      content: "▼";
    }

    .category-label {
      cursor: pointer;
      font-weight: bold;
      display: block;
      color: #333;
    }

    .submenu {
      display: none;
      margin-left: 20px;
      list-style-type: none;
      padding: 0;
    }

    input[type="checkbox"]:checked + .category-label + .submenu {
      display: block;
    }

    /* 記事リスト */
    .articles {
      margin-top: 20px;
    }

    .article {
      display: none;
      margin-bottom: 10px;
    }

    .article.active {
      display: block;
    }

    .home-articles {
      margin-top: 0px;
    }

    .home-article {
      margin-bottom: 10px;
    }

/* ===== お問い合わせフォーム ===== */

.contact-form {
      flex:1;
      padding: 20px;
      background-color: whitesmoke;
      font-family: sans-serif;
    }

    .contact-form h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    .form-group textarea {
  resize: vertical;
  min-height: 200px;
  font-size: 16px;
  }

    .contact-form button {
      width: 100%;
      padding: 10px;
      background-color: #336699;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .contact-form button:hover {
      background-color: #264d73;
    }

/* ===== プロフィールエリア ===== */
.sidebar {
  width: 250px;
  background-color: whitesmoke;
  box-sizing: border-box;
  margin-top: 20px;
}

.profile-img {
  width: 100%;
  margin-bottom: 15px;
  border: 1px solid #ccc;
}

.namae{
text-align: center;
margin: 0 0 15px 0;}

.profile-text {
  font-size: 14px;
  margin-bottom: 20px;
}

.til{
  text-indent:1em;
  margin: 0 0 8px 0; /* 下だけ8pxにして、上は0 */
  font-size: 14px;   /* 必要ならフォントサイズも調整 */
}

/* ===== 検索フォーム ===== */
.search-form input[type="text"] {
  width: calc(100% - 60px);
  margin: 50px 0 20px 0;
  padding: 5px;
  box-sizing: border-box;
}

.search-form button {
  padding: 6px 10px;
  margin-left: 5px;
}

/* ===== アーカイブ ===== */
.archive ul {
  padding-left: 20px;
  margin: 0;
}

.archive li {
  margin-bottom: 5px;
}

/* ===== フッター ===== */
.fwrapper {
  width: 100%;
  background-color: #FDE9FB;
 max-width: 1080px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.footer {
  margin: auto;
  max-width: 800px;
  padding: 10px;
  text-align: center;
}

/* ===== レスポンシブ対応 ===== */
/* スマホでもPCのような横レイアウトを維持する */
body {
  min-width: 1200px; /* PCサイズに固定 */
  overflow-x: auto;  /* 横スクロール可能にする */
}

html {
  overflow-x: auto;
}