@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Zen+Maru+Gothic:wght@400;700&display=swap");

/* ============================================================
   だらだら旅 custom.css
   2026-10-25 整理版⑭

   置き場所：wp-content/maaru-css/custom.css
   読み込み：Code Snippets「custom.css を読み込む」

   ■ 目次
     1. サイト全体
     2. ヘッダー
     3. トップページ
     4. 記事一覧のカード（トップ・すべての記事・タグ・カテゴリ共通）
     5. 投稿ページ：記事の頭・本文・見出し
     6. 投稿ページ：記事の中のパーツ（クラスを付けて使うもの）
     7. 投稿ページ：記事下（タグ・注意書き・合わせて読みたい）
     8. 固定のシェアボタン
     9. コメント欄
    10. 固定ページ（ごあいさつのプロフィール枠）
    11. サイドバー・目次
    12. フッター

   ■ 画面幅の目安
     スマホ：767px以下 ／ PC：768px以上
   ============================================================ */


/* ============================================================
   1. サイト全体
   ============================================================ */

/* 本文の文字：noteの見た目に寄せる */
main p,
main li,
article p,
article li {
  font-weight: 400 !important;              /* 字の太さ */
  -webkit-text-stroke: 0.1px currentColor;  /* 輪郭線 */
  line-height: 2 !important;                /* 行間 */
  letter-spacing: 0.04em !important;        /* 字間 */
}

/* 写真のフィルター（記事一覧・アイキャッチ） */
.xw-post-article-list__item--fig img,
.post-thumbnail img {
  filter: brightness(1.05) contrast(0.92) saturate(0.9) sepia(0.08);
}

/* 上部のウィジェットエリアの幅 */
.widget-area.container {
  max-width: 900px;
  margin: 0 auto;
}


/* ============================================================
   2. ヘッダー
   ============================================================ */

/* スマホ（600px以下）：ブログタイトルを1行に */
@media (max-width: 600px) {
  .siteInfo__logo a {
    font-size: 1.5rem;
  }
}

/* スマホ（768px以下）：キャッチフレーズを表示 */
@media (max-width: 768px) {
  .siteInfo__desc {
    display: block !important;
    font-size: 12px !important;
    white-space: normal !important;
    text-align: center !important;
  }
}


/* ============================================================
   3. トップページ
   ============================================================ */

/* トップ・一覧ページの見出し：記事タイトルと同じ書体 */
body.home main :is(h1, h2, h3, h4),
body.archive main :is(h1, h2, h3, h4),
body.blog main :is(h1, h2, h3, h4),
body.search main :is(h1, h2, h3, h4) {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 500 !important;
}

/* トップ・一覧ページの記事カードのタイトル：記事タイトルと同じ書体 */
:is(body.home, body.archive, body.blog, body.search)
  :is(.xw-post-article-media__body--title, .xw-article-media__body--title) {
  font-family: "Noto Sans JP", sans-serif !important;
  font-weight: 500 !important;
}

/* 追従型サイドバーを消す */
body.home .sidebar-sticky {
  display: none !important;
}

/* 特集枠のコピー（段落にクラス feature-text） */
p.feature-text {
  line-height: 1.4 !important;
  font-family: "Zen Maru Gothic", sans-serif !important;
}

/* バナー同士のすき間（タグページへのリンク画像）：32px → 16px */
body.home figure.wp-block-image:has(> a[href*="/tag/"]) + figure.wp-block-image:has(> a[href*="/tag/"]) {
  margin-top: 16px !important;
}

/* --- 記事カード（トップ） --- */

/* タイトル */
body.home .xw-block-post-list.type-card .xw-post-article-media .xw-post-article-media__body--title {
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
}

/* 空の説明文の枠を消す */
body.home .xw-block-post-list.type-card .xw-post-article-media__body--text:empty {
  display: none !important;
}

/* タイトルと日付のすき間 */
body.home .xw-block-post-list.type-card .article-meta {
  margin-top: 8px !important;
}

/* カード同士のすき間（PC：上下20px・左右14px） */
body.home .xw-block-post-list.type-card {
  gap: 20px 14px !important;
}
body.home .xw-block-post-list.type-card .xw-post-article-list__item {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* PC：タイトルを15pxに（一覧ページと同じ）
   ※テーマはサイドバーなしのページで17pxにするため */
@media (min-width: 768px) {
  body.home .xw-block-post-list.type-card .xw-post-article-media__body--title {
    font-size: 15px !important;
  }
}

/* --- 絶景スライダー --- */

/* スライダー：写真を3:2にして大きく、タイトル部分を小さく */
body.home .xw-block-post-list.type-slider .xw-post-article-list__item--fig::before {
  padding-top: 66.6% !important;    /* 写真の縦横比（66.6% = 3:2） */
}
body.home .xw-block-post-list.type-slider .xw-post-article-media__body {
  padding: 14px 18px 16px !important;   /* タイトルまわりの余白（上・左右・下） */
}
body.home .xw-block-post-list.type-slider .xw-post-article-media__body--title {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* タイトルを少し小さく */
.wp-block-group.has-border-color .xw-block-post-list.type-slider .xw-post-article-media__body--title {
  font-size: 0.95em;
}

/* 説明文を消す */
.wp-block-group.has-border-color .xw-block-post-list.type-slider .xw-post-article-media__body--text {
  display: none;
}

/* PC：左右の矢印が切れないよう内側に入れる */
@media (min-width: 768px) {
  body.home .xw-block-post-list.type-slider .slick-arrow.slick-prev {
    left: 0 !important;
  }
  body.home .xw-block-post-list.type-slider .slick-arrow.slick-next {
    right: 0 !important;
  }
}

/* --- noteの投稿 --- */

/* タイトルが折り返したときの行間を詰める */
.maaru-note-feed .maaru-note-feed__title {
  line-height: 1.5 !important;
}

/* --- スマホだけ --- */
@media (max-width: 767px) {

  /* 左右の余白を8pxに */
  body.home .xw-block-section.alignfull > .xw-block-section__inner {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* 列の余白はなし */
  body.home .xw-block-section__inner .wp-block-columns > .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 記事カードのタイトル：14px（新着記事） */
  body.home .xw-block-post-list.type-card .xw-post-article-media .xw-post-article-media__body--title {
    font-size: 14px !important;
  }

  /* 特集枠のカードタイトル：16px（1列でサムネが大きいので） */
  body.home .has-xw-background-white-background-color .xw-block-post-list.type-card .xw-post-article-media .xw-post-article-media__body--title {
    font-size: 16px !important;
  }

  /* 記事カード同士のすき間（上下16px・左右14px） */
  body.home .xw-block-post-list.type-card {
    gap: 16px 14px !important;
  }

  /* 特集：アイコンの位置 */
  body.home figure.wp-block-image.is-resized:has(img[style*="width:150px"]) {
    margin-bottom: -6em !important;
    transform: translateX(16px);
  }

  /* 特集：アイコンの大きさ */
  body.home figure.wp-block-image.is-resized img[style*="width:150px"] {
    width: 100px !important;
  }

  /* 特集：アイコンと見出しを横並びに（白い枠の中） */
  body.home .has-xw-background-white-background-color > .wp-block-group__inner-container > .wp-block-columns:has(> .wp-block-column:empty) {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  body.home .has-xw-background-white-background-color > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:empty {
    flex: 0 0 90px !important;
  }
  body.home .has-xw-background-white-background-color > .wp-block-group__inner-container > .wp-block-columns:has(> .wp-block-column:empty) > .wp-block-column:not(:empty) {
    flex: 1 1 auto !important;
  }

  /* 絶景スライダー：枠の余白をなくす */
  .wp-block-group.has-border-color:has(.xw-block-post-list.type-slider) {
    padding: 0 !important;
    border-width: 0 !important;
    background-color: transparent !important;
  }
}


/* ============================================================
   4. 記事一覧のカード
      トップ（body.home）と、すべての記事・タグ・カテゴリ
      （body.blog / body.archive）の見た目をそろえる
   ============================================================ */

/* すべての記事・タグ・カテゴリ：タイトル */
:is(body.blog, body.archive) .articleList.type-card .xw-article-media__body--title {
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
}

/* すべての記事・タグ・カテゴリ：空の説明文の枠を消す */
:is(body.blog, body.archive) .articleList.type-card .xw-article-media__body--text:empty {
  display: none !important;
}

/* すべての記事・タグ・カテゴリ：タイトルと日付のすき間 */
:is(body.blog, body.archive) .articleList.type-card .article-meta {
  margin-top: 8px !important;
}

/* サムネとタイトルの間を詰める（全部8px） */
body.home .xw-block-post-list.type-card .xw-post-article-list__item--fig,
:is(body.blog, body.archive) .articleList.type-card .articleList__item--fig {
  margin-bottom: 8px !important;
}
body.home .xw-block-post-list.type-card .xw-post-article-media__body,
:is(body.blog, body.archive) .articleList.type-card .xw-article-media__body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* テーマがタイトルの上に付けている余白をなくす */
body.home .xw-block-post-list.type-card .xw-post-article-media__body--title,
:is(body.blog, body.archive) .articleList.type-card .xw-article-media__body--title {
  margin-top: 0 !important;
}

/* すべての記事・タグ・カテゴリ：カード同士のすき間（トップに合わせる） */
:is(body.blog, body.archive) .articleList.type-card {
  gap: 20px 14px !important;            /* PC */
}
@media (max-width: 767px) {
  :is(body.blog, body.archive) .articleList.type-card {
    gap: 16px 14px !important;          /* スマホ */
  }
}

/* スマホ：すべての記事・タグ・カテゴリ */
@media (max-width: 767px) {

  /* タイトル：15px（トップの新着記事は14px） */
  :is(body.blog, body.archive) .articleList.type-card .xw-article-media__body--title {
    font-size: 15px !important;
  }

  /* 投稿日とカテゴリの行と行の間を詰める */
  :is(body.blog, body.archive) .articleList.type-card .article-meta {
    row-gap: 4px !important;
  }
  :is(body.blog, body.archive) .articleList.type-card .article-category li,
  :is(body.blog, body.archive) .articleList.type-card .article-category .list-label {
    line-height: 1.2 !important;
  }

  /* カテゴリが折り返したときの行と行の間も詰める */
  :is(body.blog, body.archive) .articleList.type-card .article-category ul {
    row-gap: 2px !important;
  }
}


/* ============================================================
   5. 投稿ページ：記事の頭・本文・見出し
   ============================================================ */

/* --- 記事の頭 --- */

/* 並び順：写真 → カテゴリ・日付 → タイトル */
body.single-post .articleHeader {
  display: flex;
  flex-direction: column;
}
body.single-post .articleHeader .post-thumbnail {
  order: -2;
  margin: 0 0 1.2em !important;
}
body.single-post .articleHeader .articleHeader__info {
  order: -1;
  margin: 0 0 0.8em !important;
}

/* スマホ：サムネを横幅いっぱいに（ことりっぷ風） */
@media (max-width: 767px) {
  body.single-post .articleHeader .post-thumbnail {
    margin-left: calc(50% - 50vw) !important;   /* 左右の余白をはみ出す */
    margin-right: calc(50% - 50vw) !important;
    margin-top: -32px !important;               /* ヘッダーのすぐ下に付ける */
  }
  body.single-post .articleHeader .post-thumbnail img {
    display: block;
    width: 100% !important;
    border-radius: 0 !important;
  }
}

/* タイトルと見出し（H2）：書体・太さ・色 */
body.single-post .articleHeader__title,
body.single-post .articleBody h2 {
  font-weight: 500;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}

/* タイトルの大きさ（スマホ22px・PC23px） */
body.single-post .articleHeader__title {
  font-size: 22px;
}
@media (min-width: 768px) {
  body.single-post .articleHeader__title {
    font-size: 23px;
  }
}

/* --- 本文 --- */

/* PC（1024px以上）：本文の左右の余白（投稿ページ・固定ページ） */
@media (min-width: 1024px) {
  body.single-post main,
  body.page:not(.home) main {
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
  }
}

/* PC：本文と見出しをnoteのPC版に寄せる */
@media (min-width: 768px) {

  /* 本文：17px */
  body.single-post .articleBody p,
  body.single-post .articleBody li {
    font-size: 17px;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
  }

  /* 段落の間：36px */
  body.single-post .articleBody > p {
    margin-top: 36px;
  }

  /* 見出し（H2）：20px */
  body.single-post .articleBody h2 {
    font-size: 20px !important;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }
}

/* 見出し（H2）の頭に画像 */
body.single-post .articleBody h2 {
  display: flex;
  align-items: center;
  gap: 5px;
}
body.single-post .articleBody h2::before {
  content: "";
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/見出しアクセント-03.png") no-repeat center / contain;
}

/* 画像・表のキャプション */
body.single-post .articleBody figcaption.wp-element-caption,
body.single-post .articleBody figcaption.wp-element-caption span {
  font-size: 14px !important;   /* 文字の大きさ */
  color: #8c6a1d !important;    /* 文字の色 */
}


/* ============================================================
   6. 投稿ページ：記事の中のパーツ
      （ ）の中が、ブロックに付けるクラス名
   ============================================================ */

/* ------------------------------------------------------------
   ランキング（rank-box：ボックスに付ける）
   全体は中央、中は左揃え
   ------------------------------------------------------------ */

/* ボックスの枠と背景をなくし、一番長い項目の幅に合わせて中央に */
body.single-post .articleBody .rank-box {
  --bg-color: transparent !important;
  --accent-color: transparent !important;
  display: grid !important;
  grid-template-columns: fit-content(100%);
  justify-content: center;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
body.single-post .articleBody .rank-box::after {
  content: none !important;
  display: none !important;
}

/* 上のリボン帯の画像：中央 */
body.single-post .articleBody .rank-box::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  justify-self: center;
  width: 200px !important;          /* 画像の大きさ */
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1000 / 600;
  margin: 0 auto 4px !important;
  border: none !important;
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/018_ボルテックス_00-1000-x-600-px-e1792465597949.png") no-repeat center / contain !important;
  transform: none !important;
}

/* 1組ずつ：左揃え、下に細い線 */
body.single-post .articleBody .rank-box p {
  margin: 0 !important;
  padding: 14px 4px !important;
  border-bottom: 1px solid #f0e6cc;
  text-align: left !important;
  font-size: 0.95em !important;     /* 説明の文の大きさ */
  color: #666;
  line-height: 1.6 !important;
}
body.single-post .articleBody .rank-box p:last-child {
  border-bottom: none;
}

/* メダルと名前を横並びに */
body.single-post .articleBody .rank-box p > strong {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 8px;                  /* 説明の文との間 */
  font-size: 1.05em;                /* 名前の大きさ */
  color: #333;
  line-height: 1.5;
}

/* 「1位」：丸いメダル */
body.single-post .articleBody .rank-box .xwb-label-custom {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;                      /* メダルの大きさ */
  height: 34px;
  margin: 0 !important;
  padding: 0 !important;
  background: #d3a243 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #d3a243;   /* ふちの二重線 */
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------------------------------------
   表
   ------------------------------------------------------------ */

/* 列の幅を中身に合わせる・外枠を消す */
body.single-post .articleBody .wp-block-table {
  border: none !important;
}
body.single-post .articleBody .wp-block-table table {
  table-layout: auto !important;
}
body.single-post .articleBody .wp-block-table table,
body.single-post .articleBody .wp-block-table thead,
body.single-post .articleBody .wp-block-table tbody,
body.single-post .articleBody .wp-block-table tfoot {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* マスの文字と線 */
body.single-post .articleBody .wp-block-table tbody tr {
  background: transparent !important;
}
body.single-post .articleBody .wp-block-table th,
body.single-post .articleBody .wp-block-table td {
  font-size: 14px !important;                     /* 文字の大きさ */
  line-height: 1.6 !important;
  border: none !important;
  border-bottom: 1px solid #e5e5e5 !important;    /* 行の下の線 */
}

/* 見出しの行：背景なし、下に太めの線 */
body.single-post .articleBody .wp-block-table thead th {
  background: transparent !important;
  color: #333 !important;
  font-weight: 500 !important;
  border-bottom: 2px solid #d3a243 !important;
}

/* スマホ：表の幅を中身に合わせる
   （文字は折り返さず、入りきらないときだけ横スクロール） */
@media (max-width: 767px) {
  body.single-post .articleBody .wp-block-table table {
    width: auto !important;
    min-width: 100% !important;
  }
  body.single-post .articleBody .wp-block-table th,
  body.single-post .articleBody .wp-block-table td {
    white-space: nowrap !important;
  }
}

/* ------------------------------------------------------------
   スマホで縦に並べる表（stack-cols / stack-rows：表のブロックに付ける）
   ※Code Snippets「スマホで表を縦に並べる」と一緒に使う
   ------------------------------------------------------------ */

/* PC：見出しの行は太字 */
.stack-cols thead th,
.stack-rows thead th {
  font-weight: 700 !important;
}
/* PC：列ごとの表は、左の見出し列をクリーム色の背景・茶色の文字に */
.stack-cols tbody tr > :first-child {
  background: #fdf9ed !important;
  color: #8c6a1d !important;
  font-weight: 500 !important;
}

/* 縦に並べた形（スマホ用）：PCでは隠す */
.st-cards {
  display: none;
}

@media (max-width: 767px) {
  /* スマホ：元の表を隠して、縦に並べた形を出す */
  .st-ready {
    display: none !important;
  }
  .st-cards {
    display: block;
    margin-top: 2em;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
  }
  /* 1つ分のまとまり */
  .st-card + .st-card {
    margin-top: 28px;
  }
  /* まとまりの名前：太字・金色の下線（記事の表の見出し行と同じ） */
  .st-title {
    padding: 10px 8px;
    border-bottom: 2px solid #d3a243;
    font-size: 16px;
    font-weight: 700;
  }
  /* 1行分：左に項目名、右に中身 */
  .st-row {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
  }
  .st-label {
    flex: 0 0 6.5em;
    padding: 10px 8px;
    background: #fdf9ed;
    color: #8c6a1d;
    font-size: 12px;
    font-weight: 500;
  }
  .st-value {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 8px;
  }
}

/* ------------------------------------------------------------
   島の比較表（カスタムHTMLの island-table）
   記事の表と同じ見た目。PC：横並び ／ スマホ：島ごとに縦並び
   ------------------------------------------------------------ */

/* PC：左に項目、右に3島を並べる */
.island-table {
  display: grid;
  grid-template-columns: 8.5em repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);   /* 島名の行＋項目6行 */
  grid-auto-flow: column;                /* 縦に順番に埋めていく */
  margin-top: 2em;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
.island-table > div {
  padding: 10px 8px;
  border-bottom: 1px solid #e5e5e5;      /* 行の下の線（記事の表と同じ） */
}
/* 島の名前の行：太字・金色の下線 */
.island-table .it-corner,
.island-table .it-island {
  font-weight: 700;
  border-bottom: 2px solid #d3a243;
}
/* 左の項目名：クリーム色の背景に茶色の文字 */
.island-table .it-label {
  background: #fdf9ed;
  color: #8c6a1d;
  font-weight: 500;
}

/* スマホ：島ごとに縦に並べる */
@media (max-width: 767px) {
  .island-table {
    display: block;
  }
  /* 左の項目名の列と左上のマスは隠す */
  .island-table .it-corner,
  .island-table .it-label {
    display: none;
  }
  /* 島の名前：2つ目からは上をあける */
  .island-table .it-island {
    margin-top: 28px;
    font-size: 16px;
  }
  .island-table .it-island:nth-child(8) {
    margin-top: 0;
  }
  /* 各行の左に小さく項目名を出す */
  .island-table .it-cell {
    display: flex;
    gap: 12px;
  }
  /* 各行の左の項目名：PCの見出し列と同じクリーム色の背景・茶色の文字 */
  .island-table .it-cell::before {
    content: attr(data-label);
    flex: 0 0 6.5em;
    margin: -10px 0 -10px -8px;   /* 背景を行の上下と左の端まで広げる */
    padding: 10px 8px;
    background: #fdf9ed;
    font-size: 12px;
    font-weight: 500;
    color: #8c6a1d;
  }
}

/* ------------------------------------------------------------
   本文内のタグブロック（my-tag-style）
   ------------------------------------------------------------ */
.my-tag-style a {
  text-decoration: none !important;
}
.my-tag-style a::before {
  content: "#";
}

/* ------------------------------------------------------------
   旅程のタイムライン（trip-flow：箇条書きに付ける）
   ------------------------------------------------------------ */
body.single-post .articleBody .trip-flow {
  position: relative;
  margin-left: 0 !important;
  padding-left: 26px !important;
  list-style: none !important;
}

/* 左の縦線 */
body.single-post .articleBody .trip-flow::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.8em;
  bottom: 0.8em;
  width: 2px;
  background: #ecdcb4;
}

body.single-post .articleBody .trip-flow > li {
  position: relative;
  margin: 0 !important;
  padding: 0 0 18px !important;
  line-height: 1.7 !important;
  list-style: none !important;
}
body.single-post .articleBody .trip-flow > li:last-child {
  padding-bottom: 0 !important;
}

/* 頭の丸い点 */
body.single-post .articleBody .trip-flow > li::before {
  content: "" !important;
  position: absolute;
  left: -26px;
  top: 0.45em;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  background: #fff !important;
  border: 2px solid #d3a243;
  border-radius: 50%;
  box-sizing: border-box;
  transform: none !important;
}
body.single-post .articleBody .trip-flow > li::marker {
  content: none;
}

/* 旅程の中のアイコン（場所の情報のアイコンと同じ見た目） */
body.single-post .articleBody .trip-flow .inline-icon {
  display: inline-block;
  width: 1.4em;
  margin-right: 0.3em;
  text-align: center;
  color: #d3a243;
}

/* ------------------------------------------------------------
   場所の情報（place-info：ボックスに付ける）
   ------------------------------------------------------------ */

/* ボックス全体：クリーム色、上に「info」画像を重ねる */
.place-info {
  position: relative;
  margin-top: 60px !important;
  padding: 1.5em !important;
  padding-top: 2.5em !important;
  background: #fdf9ed !important;
  border: none !important;
  border-radius: 12px !important;
}
.place-info::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 22px;
  width: 90px;
  height: 56px;
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/INFOアクセント-02-270-x-168-px.png") no-repeat center / contain;
}

/* PC：ボックスの中の文字 */
@media (min-width: 768px) {
  body.single-post .articleBody .place-info p,
  body.single-post .articleBody .place-info li {
    font-size: 15px;
  }
}

/* 場所の名前・リンク・普通の段落 */
.place-info > p {
  margin: 0 !important;
  font-size: 0.9em;                 /* 箇条書きと同じ大きさ */
  line-height: 1.7 !important;
}
.place-info > p:not(:first-child) {
  margin-top: 1.5em !important;
}

/* 場所の名前 */
.place-info > p strong {
  font-size: 1em;
  font-weight: 700;
}

/* 公式サイトのリンク */
.place-info > p a {
  font-size: 0.85em;
}

/* 箇条書き */
.place-info ul {
  margin: 0.5em 0 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
.place-info li {
  font-size: 0.9em;
  line-height: 1.7 !important;
  margin-top: 0.3em;
}

/* 項目の頭のアイコン（箇条書き・段落） */
.place-info li .inline-icon,
.place-info > p .inline-icon {
  display: inline-block;
  width: 1.4em;
  margin-right: 0.3em;
  text-align: center;
  color: #d3a243;
}

/* 場所の名前の横の「マップ」ボタン
   （Googleマップのリンクを自動でボタンにする） */
.place-info a:is([href*="maps.app.goo.gl"], [href*="google.com/maps"], [href*="goo.gl/maps"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-left: 0.6em;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #a69425;        /* 地図のボタンと同じ色 */
  border-radius: 3px;               /* 角の丸み */
  color: #a69425 !important;
  font-size: 0.75em !important;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: 0.15em;           /* 縦の位置：大きくすると上に上がる */
}

/* タイトル付きボックスの中の「マップ」ボタン（place-infoと同じ見た目） */
.xw-block-title-box a:is([href*="maps.app.goo.gl"], [href*="google.com/maps"], [href*="goo.gl/maps"]) {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6em;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #a69425;
  border-radius: 3px;
  color: #a69425 !important;
  font-size: 11px !important;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: 0.25em;
}

/* ------------------------------------------------------------
   メモのボックス（memo-box：ボックスに付ける）
   上向きの吹き出し
   ------------------------------------------------------------ */
.memo-box {
  position: relative;
  margin-top: 20px !important;      /* 上の段落とのすき間 */
  padding: 1.2em 1.5em !important;
  background: #F2F2F2 !important;   /* 背景 */
  border: none !important;
  border-radius: 12px !important;
}

/* 上向きのしっぽ */
.memo-box::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 32px;                                 /* しっぽの位置（左からの距離） */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #F2F2F2;          /* しっぽの色（背景と同じにする） */
}

/* 中の文字：少し小さめ */
.memo-box p,
.memo-box li {
  font-size: 0.9em;
  line-height: 1.7 !important;
}
@media (min-width: 768px) {
  body.single-post .articleBody .memo-box p,
  body.single-post .articleBody .memo-box li {
    font-size: 15px;
  }
}
.memo-box > p {
  margin: 0 !important;
}
.memo-box > p + p {
  margin-top: 1em !important;
}

/* 上のすき間を詰める（画像などのブロックに mt-s を付ける） */
.mt-s {
  margin-top: 0.5em !important;
}

/* ------------------------------------------------------------
   タイトル付きボックス（XWriteのブロック）
   白い背景に細い枠、タイトルを枠線の上に乗せる
   ------------------------------------------------------------ */

/* ボックス */
body.single-post .articleBody .xw-block-title-box {
  --accent-color: transparent !important;     /* XWriteのもともとの枠を消す */
  position: relative;
  margin-top: 2em !important;
  padding: 24px 24px 12px !important;
  background: #fff !important;
  border: 1px solid #d3a243 !important;       /* 枠の色 */
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
}
body.single-post .articleBody .xw-block-title-box::before,
body.single-post .articleBody .xw-block-title-box::after,
body.single-post .articleBody .xw-block-title-box .xw-box-content::before,
body.single-post .articleBody .xw-block-title-box .xw-box-content::after {
  content: none !important;
  display: none !important;
}

/* タイトル：枠線の上に乗せる
   2行以上のときは右に余白を残し、本文を下に押し下げる */
body.single-post .articleBody .xw-block-title-box .xw-box-title {
  display: flex !important;
  align-items: flex-start;
  gap: 0.4em;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: fit-content !important;
  max-width: calc(100% + 12px);
  min-height: 0;
  margin: -36px 0 12px -6px !important;
  padding: 0 8px !important;
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
body.single-post .articleBody .xw-block-title-box .xw-box-title::before,
body.single-post .articleBody .xw-block-title-box .xw-box-title::after {
  content: none !important;
}
body.single-post .articleBody .xw-block-title-box .title-text {
  padding: 0 !important;
  background: none !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #333 !important;
  line-height: 1.5 !important;
}

/* タイトルのアイコン：白で見えなくなるので色を付ける */
body.single-post .articleBody .xw-block-title-box .title-icon {
  color: #d3a243 !important;        /* アイコンの色 */
  margin: 0 !important;
  font-size: 1em;
  line-height: 24px;
}

/* 中身 */
body.single-post .articleBody .xw-block-title-box .xw-box-content {
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 箇条書き：点線とチェックの色 */
body.single-post .articleBody .xw-block-title-box li {
  border-bottom-color: #e5e5e5 !important;
}
body.single-post .articleBody .xw-block-title-box li:last-child {
  border-bottom: none !important;
}
body.single-post .articleBody .xw-block-title-box li::before {
  color: #d3a243 !important;
  border-color: #d3a243 !important;
}

/* ------------------------------------------------------------
   AI解説の折りたたみ（ai-note：折りたたみブロックに付ける）
   ------------------------------------------------------------ */

/* 画像の分だけ上をあけて、はみ出しを見せる */
body.single-post .articleBody .xw-block-accordion.ai-note {
  position: relative;
  overflow: visible !important;
  margin-top: 56px !important;      /* 上のすき間 */
}

/* 帯の上に画像を乗せる */
body.single-post .articleBody .xw-block-accordion.ai-note::after {
  content: "";
  position: absolute;
  top: -72px;                       /* 帯に重なる量 */
  right: 16px;                      /* 右からの位置 */
  width: 120px;                     /* 画像の大きさ */
  height: 80px;
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/折りたたみアクセント-AI解説-02-e1792330069702.png") no-repeat right bottom / contain;
  pointer-events: none;
  z-index: 2;
}

/* スマホ：画像の上の余白を詰める */
@media (max-width: 767px) {
  body.single-post .articleBody .xw-block-accordion.ai-note {
    margin-top: 48px !important;    /* 上のすき間 */
  }
  body.single-post .articleBody .xw-block-accordion.ai-note::after {
    top: -36px;                     /* 帯に重なる量 */
    width: 120px;                   /* 画像の大きさ */
    height: 40px;
  }
}

/* AI解説の折りたたみ：色（ブロックごとに設定しなくてよくする） */
body.single-post .articleBody .xw-block-accordion.ai-note {
  --background-color: #f8f1e3 !important;   /* 背景 */
  --accent-color: #d3a243 !important;       /* 帯の線・アイコン */
  --text-color: #333333 !important;         /* 文字 */
}

/* 中身の一番下に「(Generated by AI)」を小さく入れる */
body.single-post .articleBody .xw-block-accordion.ai-note .xw-block-accordion__body::after {
  content: "(Generated by AI)";
  display: block;
  margin-top: 12px;
  text-align: right;        /* 右寄せ。左寄せにするなら left */
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #b8a07a;           /* 背景のベージュに合わせた薄い茶色 */
}

/* ------------------------------------------------------------
   ブログカード（XWriteのブロック）
   ------------------------------------------------------------ */

/* 枠線とラベルの背景の色 */
body.single-post .articleBody .xw-block-blog-card {
  --key-color: #deb068 !important;
}

/* ラベル：文字の色と、右下だけ角丸 */
body.single-post .articleBody .xw-block-blog-card__label {
  color: #fff !important;
  border-radius: 0 0 8px 0 !important;
}

/* ------------------------------------------------------------
   記事内の地図（Googleマップの埋め込み）
   ------------------------------------------------------------ */

/* 地図を包む段落を枠にする（縦横比 4：3） */
body.single-post .articleBody p:has(> iframe[src*="google.com/maps"]) {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 75%;
  border-radius: 12px;
}

/* 地図を上にずらして、上の黒い帯を隠す */
body.single-post .articleBody p:has(> iframe[src*="google.com/maps"]) > iframe {
  position: absolute;
  top: -70px;
  left: 0;
  width: 100%;
  height: calc(100% + 70px);
  border: none;
}

/* スマホ：地図を隠してボタンだけにする */
@media (max-width: 767px) {
  body.single-post .articleBody p:has(> iframe[src*="google.com/maps"]) {
    display: none !important;
  }
}

/* 地図の下の「Googleマップで開く」ボタン（map-link：段落に付ける） */
body.single-post .articleBody .map-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: fit-content;
  margin: 0.8em auto 0 !important;
  padding: 12px 32px;
  background: #fff;                 /* ボタンの背景 */
  border: 1px solid #a69425;        /* 縁取り */
  border-radius: 6px;
  color: #a69425;                   /* 文字とアイコンの色 */
  line-height: 1.5 !important;
}
body.single-post .articleBody .map-link a {
  color: #a69425 !important;
  text-decoration: none !important;
}
/* ボタン全体を押せるように */
body.single-post .articleBody .map-link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 地図の上の説明文（map-lead：段落に付ける） */
body.single-post .articleBody p.map-lead {
  font-family: "Zen Maru Gothic", sans-serif !important;
  font-weight: 500 !important;
  text-align: center;
  font-size: 14px !important;       /* 文字の大きさ */
  color: #666 !important;           /* 文字の色 */
  line-height: 1.6 !important;
  margin-bottom: 0.3em !important;
}
/* 説明文のすぐ下の地図：上の余白を詰める */
body.single-post .articleBody p.map-lead + p {
  margin-top: 0.5em !important;
}

/* ------------------------------------------------------------
   アフィリエイトリンク（バリューコマース・DiscoverCars・A8）
   ------------------------------------------------------------ */

/* 上の誘導テキスト
   （「＼」で始まる段落に、プログラムが目印 aff-lead を付ける） */
body.single-post .articleBody p.aff-lead {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700 !important;
  text-align: center;
  color: #333333;
  margin-bottom: 0.3em !important;
}
/* 誘導テキストの太字も同じ太さ（700）に */
body.single-post .articleBody p.aff-lead strong {
  font-weight: 700 !important;
}

/* 誘導テキストのすぐ下のリンクの段落：上の余白を詰める */
body.single-post .articleBody p.aff-lead + p,
body.single-post .articleBody p.aff-lead + style + p {
  margin-top: 0.2em !important;
}

/* リンクをボタン風に
   （バナー画像は除く。1ピクセルの計測用画像は数えない） */
body.single-post .articleBody a:is([href*="valuecommerce.com"], [href*="discovercars.com"], [href*="a8.net"]):not(:has(img:not([width="0"]):not([width="1"]):not([height="1"]))) {
  display: block;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid #1f3a8f;
  border-radius: 4px;
  text-align: center;
  text-decoration: none !important;
  line-height: 1.5;
  transition: background-color 0.2s;
}
/* マウスを乗せたとき */
body.single-post .articleBody a:is([href*="valuecommerce.com"], [href*="discovercars.com"], [href*="a8.net"]):not(:has(img:not([width="0"]):not([width="1"]):not([height="1"]))):hover {
  background-color: rgba(31, 58, 143, 0.06);
}

/* ------------------------------------------------------------
   ホテリップ（スマホで写真が文字にかぶるのを直す）
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .hotelipp-card .hotelipp-image-outer {
    flex: none !important;
    width: 100% !important;
    padding: 12px 12px 0 !important;
    box-sizing: border-box;
  }
  .hotelipp-card .hotelipp-image,
  .hotelipp-card .hotelipp-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
  }
}

/* ------------------------------------------------------------
   ステップのタイトル（step-route：ステップブロックに付ける）
   帯＋吹き出しのしっぽ
   ------------------------------------------------------------ */

/* 丸をしっぽより前に */
.step-route .xw-block-step__number--inner {
  position: relative;
  z-index: 1;
}

/* タイトルの帯 */
.step-route .xw-block-step__title {
  position: relative;
  padding: 7px 12px;
  background: #f8efd6;
  border-radius: 0 4px 4px 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;
  font-weight: 500;
}

/* しっぽ（丸 → 帯の左上） */
.step-route .xw-block-step__title::before {
  content: "";
  position: absolute;
  top: calc(-0.5em - 10px);
  left: -23px;
  width: 24px;
  height: calc(0.5em + 26px);
  background: #f8efd6;
  clip-path: polygon(0 0, 100% calc(100% - 16px), 100% 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   所要時間の矢印（move-time：段落に付ける）
   ------------------------------------------------------------ */
.articleBody p.move-time {
  position: relative;
  padding: 12px 0 12px 44px;
  font-size: 14px;
  color: #8c6a1d;
}
/* PCの本文の文字サイズ指定より優先させる */
body.single-post .articleBody p.move-time {
  font-size: 14px;
}

/* 点線 */
.articleBody p.move-time::before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -14px;
  left: 23px;
  border-left: 2px dotted #d3a243;
}
/* 上が写真やボックスのときは、点線の始まりを少し下げる */
.articleBody :not(p) + p.move-time::before {
  top: -14px;
}

/* 矢印の先（三角） */
.articleBody p.move-time::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 19px;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 5px 0;
  border-color: #d3a243 transparent transparent;
  box-sizing: content-box;
}

/* ------------------------------------------------------------
   答えの一言（answer-text：段落に付ける）
   ------------------------------------------------------------ */

/* 左上に画像、文字の長さだけの下線 */
.articleBody p.answer-text {
  position: relative;
  margin-top: 60px !important;
  padding-top: 16px;
  text-decoration: underline;
  text-decoration-color: #fdd35c;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.articleBody p.answer-text::before {
  content: "";
  position: absolute;
  top: -34px;
  left: -6px;
  width: 90px;
  height: 56px;
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/アンサーアクセント-01-270-x-168-px-e1792484026791.png") no-repeat center / contain;
  pointer-events: none;
}


/* ============================================================
   7. 投稿ページ：記事下
   ============================================================ */

/* 記事下のシェアボタンを隠す
   （固定のシェアボタンがリンク先を使うので、設定ではなくCSSで隠す） */
body.single-post .articleFooter__sns {
  display: none !important;
}

/* 記事下の始まりのすき間をなくす（タグを注意書きに近づけるため） */
body.single-post .articleFooter {
  margin-top: 0 !important;
}

/* 記事下のタグ：見出しなしで、タグだけ左寄せ */
body.single-post .articleFooter__tag {
  display: block !important;
  margin-top: 24px !important;      /* 注意書きとのすき間 */
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
body.single-post .articleFooter__tag--caption {
  display: none !important;
}
body.single-post .articleFooter__tag--list .tagList {
  justify-content: flex-start !important;
}

/* 記事下の注意書き（共通パーツ74）：枠をなくす */
.xw-block-common-parts__content[data-id="74"] .xw-block-decobox {
  --bg-color: transparent !important;
  --accent-color: transparent !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.xw-block-common-parts__content[data-id="74"] .xw-block-decobox::before,
.xw-block-common-parts__content[data-id="74"] .xw-block-decobox::after {
  display: none !important;
}
.xw-block-common-parts__content[data-id="74"] .xw-block-decobox p {
  font-size: 1.4rem !important;     /* 文字の大きさ */
  color: #333 !important;           /* 文字の色 */
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------
   合わせて読みたい（関連記事）
   ------------------------------------------------------------ */
body.single-post .articleFooter__relation {
  margin-top: 56px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* 見出し：中央寄せ、もとのシェアの見出しと同じ書体 */
body.single-post .articleFooter__relation .caption {
  display: block !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 1.5rem !important;     /* 大きさ */
  font-weight: 400 !important;
  color: #333 !important;
  letter-spacing: 0.04em !important;
  -webkit-text-stroke: 0.1px currentColor;
  line-height: 1.5 !important;
}
body.single-post .articleFooter__relation .caption::before,
body.single-post .articleFooter__relation .caption::after {
  content: none !important;
}
/* 見出しの大きさ・下のすき間（テーマの指定に負けないよう強めに） */
html body.single-post .articleFooter .articleFooter__relation .caption,
html body.single-post .articleFooter .articleFooter__relation .caption::first-letter {
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}
html body.single-post .articleFooter .articleFooter__relation .caption {
  margin: 0 0 16px !important;
}

/* 記事の並び：スマホ2列・PC3列 */
body.single-post .articleFooter__relation .articleList {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px 16px !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  body.single-post .articleFooter__relation .articleList {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
body.single-post .articleFooter__relation .articleList__item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* カード：写真が上、タイトルが下 */
body.single-post .articleFooter__relation .xw-article-media {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* 写真：横幅いっぱい、写真の下の余白を詰める */
body.single-post .articleFooter__relation .articleList__item--fig {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
}
body.single-post .articleFooter__relation .articleList__item--fig img {
  display: block;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transform: none !important;
}
body.single-post .articleFooter__relation .articleList__item--fig::before,
body.single-post .articleFooter__relation .articleList__item--fig::after {
  content: none !important;
  display: none !important;
}
body.single-post .articleFooter__relation .xw-article-media__body {
  width: auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

/* タイトル：記事タイトル・見出しと同じ書体 */
body.single-post .articleFooter__relation .xw-article-media__body--title {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
  line-height: 1.6 !important;
}

/* 日付：小さく、キャプションと同じ色 */
body.single-post .articleFooter__relation .article-meta {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #666 !important;
}


/* ============================================================
   8. 固定のシェアボタン
      スマホ：画面下の帯（タグの下で止まる）
      PC：1400px以上のときだけ左に縦に並べる
   ============================================================ */

/* 共通：丸いボタン */
.maaru-share__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  color: #666;
  text-decoration: none !important;
  cursor: pointer;
}
.maaru-share__btn:hover {
  opacity: 0.7;
}
.maaru-share__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
}
.maaru-share__label {
  font-size: 10px;
  line-height: 1.4;
  color: #666;
  white-space: nowrap;
}

/* ボタンの色（XWriteのシェアボタンと同じ） */
.maaru-share .is-x .maaru-share__icon    { background: #0f1419; }
.maaru-share .is-fb .maaru-share__icon   { background: #3b5998; }
.maaru-share .is-line .maaru-share__icon { background: #00b900; }
.maaru-share .is-copy .maaru-share__icon { background: #666; }

/* スマホ：下の帯 */
@media (max-width: 767px) {
  .maaru-share {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: column-reverse;             /* 開いた部分を帯の上に */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); /* 帯の影 */
  }
  .maaru-share__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #f2f2f2;                        /* 帯の背景：フッターと同じグレー */
    border: none;
    font-family: "Noto Sans JP", sans-serif;    /* 文字：記事タイトルと同じ書体 */
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .maaru-share__toggle i {
    font-size: 18px;
  }

  /* 開くボタンの部分 */
  .maaru-share__list {
    display: none;
    justify-content: center;
    gap: 20px;
    padding: 16px 0 12px;
    background: #fff;                           /* 開いた部分の背景 */
  }
  .maaru-share.is-open .maaru-share__list {
    display: flex;
  }

  /* タグの下で止まる場所 */
  .maaru-share-dock {
    position: relative;
    height: 48px;
    margin-top: 24px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .maaru-share.is-docked {
    position: absolute;
  }
}

/* PC：いったん隠す */
@media (min-width: 768px) {
  .maaru-share-dock {
    display: contents;
  }
  .maaru-share__toggle {
    display: none;
  }
  .maaru-share {
    display: none;
  }
}

/* PC（1400px以上）：左に縦に並べる */
@media (min-width: 1400px) {
  .maaru-share {
    display: block;
    position: fixed;
    top: 50%;
    left: 32px;
    z-index: 900;
    transform: translateY(-50%);
  }
  .maaru-share__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}


/* ============================================================
   9. コメント欄
   ============================================================ */

/* 見出し */
.articleFooter__comment .comments-title,
.articleFooter__comment #reply-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 16px !important;       /* 文字の大きさ */
  font-weight: 500 !important;
  color: #333 !important;
  line-height: 1.3 !important;
}
.articleFooter__comment .comments-title::before,
.articleFooter__comment .comments-title::after,
.articleFooter__comment #reply-title::before,
.articleFooter__comment #reply-title::after {
  content: none !important;
}

/* 背景 */
.articleFooter__comment #comments {
  background: #fef4f4;
  border-radius: 12px;              /* 角の丸み */
  padding: 24px;                    /* 内側の余白 */
}

/* 「より:」を消す */
.articleFooter__comment .comment-author .says {
  display: none;
}

/* 開閉式：コメント一覧のボタン（画像） */
.maaru-list-toggle .comments-title {
  width: 230px;                     /* 画像の大きさ */
  max-width: 100%;
  height: 66px;
  padding: 0 0 10px !important;     /* 文字を上にずらす量 */
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/コメント見出し-03.png") center / contain no-repeat !important;
  cursor: pointer;
}
/* 閉じているときは一覧と書き込む欄を隠す */
.maaru-list-toggle:not(.is-list-open) .comment-list,
.maaru-list-toggle:not(.is-list-open) #respond {
  display: none;
}
.maaru-list-toggle:not(.is-list-open) .comments-title {
  margin-bottom: 0 !important;
}

/* 送信ボタン */
.articleFooter__comment .form-submit {
  text-align: center;
}
.articleFooter__comment .form-submit #submit {
  width: auto !important;
  padding: 12px 32px !important;
  background: #f0908d !important;   /* ボタンの背景 */
  border: none !important;
  border-radius: 6px !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #fff !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  cursor: pointer;
}


/* ============================================================
   10. 固定ページ
   ============================================================ */

/* ------------------------------------------------------------
   プロフィール枠（profile-box：ボックスに付ける）
   ごあいさつページの一番下
   ------------------------------------------------------------ */

/* 枠：クリーム色・角丸（場所の情報と同じ色） */
.articleBody .profile-box {
  --bg-color: #fdf9ed !important;
  --accent-color: transparent !important;
  --border-radius: 12px !important;
  margin-top: 48px !important;
  padding: 28px 24px !important;
  background: #fdf9ed !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.articleBody .profile-box::before,
.articleBody .profile-box::after {
  content: none !important;
  display: none !important;
}

/* 写真と文字を上下中央でそろえる */
.articleBody .profile-box .wp-block-columns {
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
}

/* 写真：丸く、白いふち */
.articleBody .profile-box .wp-block-image {
  margin: 0 !important;
}
.articleBody .profile-box .wp-block-image img {
  display: block;
  width: 140px !important;          /* 写真の大きさ */
  height: 140px !important;
  margin: 0 auto;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
}

/* 紹介文 */
.articleBody .profile-box .wp-block-column p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}
.articleBody .profile-box .wp-block-column p + p {
  margin-top: 10px !important;
}

/* 名前（右の列の一番上の段落） */
.articleBody .profile-box .wp-block-column:last-child > p:first-child {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: #333;
}

/* noteへのリンク：丸いボタン風（地図のボタンと同じ色） */
.articleBody .profile-box a[href*="note.com"] {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 16px;
  background: #fff;
  border: 1px solid #a69425;
  border-radius: 999px;
  color: #a69425 !important;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none !important;
}

/* 好きなところ・気になっているところ：上に点線 */
.articleBody .profile-box ul {
  margin: 16px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px dashed #e6d7ae;
}
.articleBody .profile-box li {
  font-size: 13px !important;
  line-height: 1.7 !important;
  border: none !important;
}
.articleBody .profile-box li::before {
  color: #d3a243 !important;        /* チェックの色 */
  border-color: #d3a243 !important;
}

/* スマホ（781px以下で写真と文字が縦並びになる）：名前を中央寄せ */
@media (max-width: 781px) {
  .articleBody .profile-box .wp-block-column:last-child > p:first-child {
    text-align: center;
  }
}

/* ごあいさつページ：タイトルの文字を吹き出しで囲む */
body.page-id-2 .articleHeader__title {
  width: fit-content;               /* 文字の長さに合わせる */
  padding: 16px 32px 24px;          /* 文字のまわりの余白（上・左右・下） */
  border-bottom: none !important;   /* タイトルの下の線を消す */
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/ごあいさつ_タイトル.png") no-repeat center / 100% 100%;
}


/* ============================================================
   11. サイドバー・目次
   ============================================================ */

/* 見出しとタグを中央寄せに */
.side .widget-title,
.side .widgettitle {
  text-align: center;
}
.side .ez-toc-title-container {
  display: block;
  text-align: center;
}
.side .tagcloud {
  justify-content: center;
}

/* --- サイドバーの目次 --- */

/* 項目の位置と行間 */
.ez-toc-widget-container ul.ez-toc-list li {
  padding-left: 1.4em;
  padding-bottom: 0.3em;
  position: relative;
}

/* ポチ（丸い枠線） */
.ez-toc-widget-container ul.ez-toc-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  left: 0;
  top: 0.35em;
}

/* 今読んでいる項目のポチの色 */
.ez-toc-widget-container ul.ez-toc-list li.active::before {
  background: #d3a243 !important;
  border-color: #d3a243 !important;
}

/* 長いときはスクロール */
#ez-toc-widget-container {
  max-height: 80vh;
  overflow-y: auto;
}

/* --- 記事の中の目次 --- */

/* 全体：薄い背景・角丸 */
.articleBody .toc_block {
  --point-color: #d3a243;           /* 「›」や点の色 */
  position: relative;
  margin-top: 60px !important;      /* 画像がはみ出す分の上のすき間 */
  background: #fdf9ed !important;
  border: none !important;
  border-radius: 12px !important;
}

/* 枠の左上に画像を重ねる */
.articleBody .toc_block::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 22px;
  width: 90px;                      /* 画像の大きさ */
  height: 56px;
  background: url("https://daradara-maaru.com/wp-content/uploads/2026/10/目次アクセント-01-270-x-168-px.png") no-repeat center / contain;
  pointer-events: none;
  z-index: 1;
}

/* 「目次」の文字は隠して、[close] だけ右に残す */
.articleBody .toc_block .toc__caption {
  justify-content: flex-end;
  min-height: 28px;
  padding: 12px 20px 8px !important;
  font-size: 0 !important;
}
.articleBody .toc_block .toc_toggle_button {
  margin-left: auto !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #999;
}

/* 項目の部分 */
.articleBody .toc_block .toc {
  padding: 0 20px 18px !important;
}
.articleBody .toc_block .toc > ol {
  border-top: 1px solid #efe3c2 !important;
  padding-top: 12px !important;
}
.articleBody .toc_block .toc a {
  font-size: 14px;
  font-weight: 400 !important;
  color: #333;
  line-height: 1.6;
}

/* サイドバー：タグのバナー同士の間隔（トップページと同じ16px） */
.side .widget_media_image:has(a[href*="/tag/"]) + .widget_media_image:has(a[href*="/tag/"]) {
  margin-top: 16px !important;
}
/* サイドバー：タグの見出し（トップページの「＼ タグ置いておきます ／」と同じ見た目） */
.side .widget_tag_cloud .widget-title {
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-bottom: 24px !important;
}


/* ============================================================
   12. フッター
   ============================================================ */

/* ウィジェットと下の帯の間の白い余白をなくす */
:is(.block, .widget, .widget_block, .widget-area, .contents, .footer):has(.maaru-footer) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* --- フッターウィジェット（カスタムHTMLの maaru-footer） --- */

/* 全体：横いっぱいのグレー */
.maaru-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: #f2f2f2;
  margin: 0 calc(50% - 50vw);
  padding: 48px calc(50vw - 50%);
}

/* ロゴ */
.maaru-footer__logo img {
  display: block;
  width: 200px;
  height: auto;
}

/* 紹介文 */
.maaru-footer__text {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.8 !important;
}

/* SNS（noteなど）：横に並べる */
.maaru-footer__sns {
  display: flex;
  gap: 12px;
}
.maaru-footer__sns img {
  display: block;
  width: 36px;
  height: auto;
}

/* 区切り線 */
.maaru-footer__line {
  align-self: stretch;
  width: 100%;
  margin: 8px 0 0;
  border: none;
  border-top: 1px solid #1f3a8f;
}

/* メニュー */
.maaru-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
}
.maaru-footer__menu a {
  color: #1f3a8f;
  text-decoration: none;
}