@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================
   Global font
   ========================= */
body {
  font-family: 'Barlow', 'Zen Kaku Gothic New', sans-serif;
}

/* 投稿ページ */
.p-articleThumb__img, .p-articleThumb__youtube{
	box-shadow:none;
	border-radius: 10px; /* ← この1行を追加 */
}

/* 記事本文内の画像を丸くする（ただし、横幅の広いバナー設定のものは自動で除外して四角くする） */
.post_content .wp-block-image:not(.alignwide):not(.alignfull) img {
    border-radius: 10px;
}

/* 2. 「角丸にしない（バナーなど）」用の設定 */
.no-round img, 
img.no-round {
    border-radius: 0 !important;
}

/* パーツ-投稿一覧 */
.-type-card .p-postList__link {
    height: auto;
}

/* タグデザイン */
:root {
  --tag-season:  #BED8B2; /* 季節 */
  --tag-life:    #ECCBAC; /* 暮らし */
  --tag-morning: #BFCAE4; /* 朝時間 */
  --tag-gift:    #D7BBE1; /* 贈り物 */
  --tag-heart:   #F8BFAD; /* こころ */
  --tag-beauty: #A5D4CC; /* 美容・健康 */
  --tag-goods: #EAD49E; /* 雑貨 */
}

/* 共通デザイン */
.c-tagList {
    margin-top: 50px !important; /* バナーとの距離を広げる */
    display: block;              /* 確実に余白を効かせる */
}

.c-tagList:before{
	content:none;
}

.c-tagList__items{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    padding-left: 0!important;
}

.c-tagList__item{
	list-style:none;
}

.c-tagList__item a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 1.0rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #ffffff;
  background: #ccc; /* デフォルト（上書きされる） */
  transition: 0.2s ease;
}

.c-tagList__item a:hover {
  opacity: 0.9;
}

@media screen and (max-width:648px){
	.c-tagList__items{
		gap:8px;
	}
	.c-tagList__item a{
		min-width: 64px;
		padding: 6px 16px;
	}
}

/* ▼ heart（こころ） */
a[href*="tag=heart"] {
  background-color: var(--tag-heart);
}

/* ▼ season（季節） */
a[href*="tag=season"] {
  background-color: var(--tag-season);
}

/* ▼ life（暮らし） */
a[href*="tag=life"] {
  background-color: var(--tag-life);
}

/* ▼ morning（朝時間） */
a[href*="tag=morning"] {
  background-color: var(--tag-morning);
}

/* ▼ gift（贈り物） */
a[href*="tag=gift"] {
  background-color: var(--tag-gift);
}

/* ▼ beauty(美容・健康) */
a[href*="tag=beauty"] {
  background-color: var(--tag-beauty);
}

/* ▼ goods(雑貨) */
a[href*="tag=goods"] {
  background-color: var(--tag-goods);
}

.p-postList__tags{
	margin-top:16px;
}

.p-postList__tags a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-decoration: none;
  transition: 0.2s ease;
}

/* =========================
   Header Navigation
   ========================= */
.l-header .c-gnav a,
.l-header .c-gnav a *,
#fix_header .c-gnav a,
#fix_header .c-gnav a * {
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* =========================
   moado Header Layers（共通）
   ========================= */
.moado-category-layer,
.moado-scene-layer {
  top: 0;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #fff;
  z-index: 9999;
  padding: 40px 0;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.moado-category-layer.is-open,
.moado-scene-layer.is-open {
  opacity: 1;
  visibility: visible;
}

/* 中央コンテンツ幅 */
.moado-category-layer__inner,
.moado-scene-layer__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* 共通グリッド */
.moado-category-layer__list,
.moado-scene-layer__list {
  display: grid;
  justify-items: center;
}

/* 共通アイテム */
.moado-category-layer__item,
.moado-scene-layer__item {
  margin: 0;
  padding: 0;
}

.moado-category-layer__item a,
.moado-scene-layer__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #444;
}

/* テキスト共通 */
.moado-category-layer__item span,
.moado-scene-layer__item span {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin: 0;
  color: #888282;
}

/* =========================
   Category Layer（商品カテゴリ）
   ========================= */
.moado-category-layer__list {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 0;
}

.moado-category-layer__item img {
  width: 150px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin-bottom: 5px;
}

.moado-category-layer__item span {
  margin-top: -10px;
  line-height: 1.6;
}

/* =========================
   Scene Layer（シーンから選ぶ）
   ========================= */
.moado-scene-layer__list {
  grid-template-columns: repeat(4, 1fr);
}

.moado-scene-layer__item img {
  width: 240px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: 2px;
}

.moado-scene-layer__item span {
  margin-top: -6px;
}

/* =========================
   Fixed Header Adjustment
   ========================= */
.l-fixHeader .c-gnav a img,
.l-fixHeader .c-gnav svg {
  width: 21px;
  height: 21px;
}

.l-fixHeader__logo {
  margin-right: 12px;
}

.l-fixHeader__inner.l-container,
#fix_header .l-fixHeader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#fix_header .l-fixHeader__logo,
#fix_header .l-fixHeader__gnav {
  margin: 0;
  flex: 0 0 auto;
}

#fix_header .l-fixHeader__gnav {
  margin-left: 24px;
}

#fix_header .c-gnav {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
  .moado-category-layer,
  .moado-scene-layer {
    display: none;
  }
}

/* =========================
   投稿ページ調整
   ========================= */
/* 比較表（項目センター）用の揃え方 */

/* 基本ルール：まずは全部「左寄せ」 */
.wp-block-table.is-style-compare-center-item table th,
.wp-block-table.is-style-compare-center-item table td {
  text-align: left;
  vertical-align: middle; /* 縦位置はお好み。中央揃え */
}

/* 1行目は、全部センター揃えにする */
.wp-block-table.is-style-compare-center-item table tr:first-child * {
  text-align: center !important;
}

/* 1行目だけ背景色を付ける */
.wp-block-table.is-style-compare-center-item table tr:first-child th,
.wp-block-table.is-style-compare-center-item table tr:first-child td {
  background-color: #FBDDD3 !important;
}

/* 1行目の罫線を白くする（左・右・下すべて対応） */
.wp-block-table.is-style-compare-center-item table tr:first-child th,
.wp-block-table.is-style-compare-center-item table tr:first-child td {
  border-color: #ffffff !important;
  border-top-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  border-left-color: #ffffff !important;
  border-right-color: #ffffff !important;
}


/* 1行目は細め（余白少なめ） */
.wp-block-table.is-style-compare-center-item table tr:first-child th,
.wp-block-table.is-style-compare-center-item table tr:first-child td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 2行目以降すべてをゆったり余白にする */
.wp-block-table.is-style-compare-center-item table tr:not(:first-child) th,
.wp-block-table.is-style-compare-center-item table tr:not(:first-child) td {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* 比較表：セルの一番下だけ余白が広く見えないように調整 */

/* セル内の最後の段落・リストの下マージンを消す */
.wp-block-table.is-style-compare-center-item table td > *:last-child,
.wp-block-table.is-style-compare-center-item table th > *:last-child {
  margin-bottom: 0;
}

/* 段落・リストの上下マージンを少し整える */
.wp-block-table.is-style-compare-center-item table td p,
.wp-block-table.is-style-compare-center-item table th p,
.wp-block-table.is-style-compare-center-item table td ul,
.wp-block-table.is-style-compare-center-item table th ul {
  margin-top: 0;
  margin-bottom: 0.4em;  /* 好みに応じて 0.3〜0.6em くらいで微調整OK */
}

/* ② 一番左の列（項目の列）をセンター揃えにする */
.wp-block-table.is-style-compare-center-item table th:first-child,
.wp-block-table.is-style-compare-center-item table td:first-child {
  text-align: center;
}

/* 比較表の罫線を確実に太くする：1.8px に変更 */
.wp-block-table.is-style-compare-center-item table th,
.wp-block-table.is-style-compare-center-item table td {
  border-top: 1.8px solid #d9d9d9 !important;
  border-bottom: 1.8px solid #d9d9d9 !important;
  border-left: 1.8px solid #d9d9d9 !important;
  border-right: 1.8px solid #d9d9d9 !important;
}

/* 幅の自動調整（1列目だけ固定で細く、残りを等分） */
.wp-block-table.is-style-compare-center-item table {
  width: 100%;
  table-layout: fixed; /* 残りの列を均等にしてくれる */
}

/* PC：1列目細め */
@media (min-width: 768px) {
  .wp-block-table.is-style-compare-center-item table th:first-child,
  .wp-block-table.is-style-compare-center-item table td:first-child {
    width: 12%; /* お好みで15〜25%くらいに調整可能 */
  }
}

/* SP：1列目は少し広め（読みやすさ優先） */
@media (max-width: 767.98px) {
  .wp-block-table.is-style-compare-center-item table th:first-child,
  .wp-block-table.is-style-compare-center-item table td:first-child {
    width: 22%;
  }
}

/* 比較表：2行目以降 × 2列目以降の左右余白を広げる */
.wp-block-table.is-style-compare-center-item table tr:not(:first-child) td:nth-child(n+2),
.wp-block-table.is-style-compare-center-item table tr:not(:first-child) th:nth-child(n+2) {
  padding-left: 24px;   /* ← お好みで調整可 */
  padding-right: 24px;
}

/* --- H3見出し：SWELLの下線を消す --- */
.post_content h3.wp-block-heading::before {
  content: none !important;
}

/* --- H3見出し：テキスト幅だけ下線をつける --- */
.post_content h3.wp-block-heading {
  display: inline-block;
  padding-bottom: 6px; /* テキストと線の余白 */
  border-bottom: 2px solid #f08a6c; /* 下線の色と太さ */
  position: relative;
}

/* 下線の横幅が親の幅に引っ張られるのを防ぐ */
.post_content h3.wp-block-heading-wrap {
  display: block;
  width: 100%;
}

/* --- H3見出し：文字色と下線色を F49D82 に統一 --- */
.post_content h3.wp-block-heading {
  color: #F49D82 !important;
  border-bottom: 3.0px solid #FFEBE3 !important;
}

/* 目次：丸番号を調整 */
.single.single-post .p-toc__list .toc-num {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 34px;        /* ここを大きくすると丸が大きくなる */
  height: 34px;
  font-size: 1.4rem;  /* 数字の大きさ */
  font-weight: 700;
  color: #fff;
  background-color: #F49D82;
  border-radius: 50%;
  margin-right: 10px; /* 数字とタイトルの間の余白 */
}

/* 目次：タイトル（リンク）の上下余白を均等にする */
.single.single-post .p-toc__list > li > a.p-toc__link {
  display: flex;
  align-items: center;
  padding-top: 8px;     /* 調整ポイント */
  padding-bottom: 8px;  /* 上下均等 */
}

/* タイトルの中のテキスト部分の余白リセット */
.single.single-post .p-toc__list .toc-text {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
}

/* =========================
   投稿ページ：タイトル中央寄せ
   ========================= */
.single h1 {
  text-align: center !important;
}

/* =========================
   投稿ページ：本文の幅（SWELL の --article_size 上書き）
   ========================= */
@media (min-width: 960px) {
  .single.single-post {
    --article_size: 800px; /* デザインに合わせて調整 */
  }
}

/* =========================
   投稿ページ：アイキャッチだけ少し大きく
   ========================= */
@media (min-width: 960px) {
  .single.single-post .p-articleThumb {
    width: calc(100% + 100px);  /* 本文より左右 +50px ずつ広く */
    margin-left: -50px;
    margin-right: -50px;
  }

  .single.single-post .p-articleThumb__img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* =========================
   投稿ページ：目次デザイン（丸番号＋線の幅）
   ========================= */

/* 目次ボックス全体（スマホ基準） */
.single.single-post .p-toc.-simple {
  max-width: 920px;
  margin: 2.5em 1.5em;
  padding: 1.5em 1.5em;
  border: none;
  border-radius: 15px !important;
  background: #FEF5F1 !important;
  box-sizing: border-box;
}

/* 「目次」のタイトル行 */
.single.single-post .p-toc__ttl {
  display: block;
  font-size: 22px;
  font-weight: 600;
  color: #707070;
  border-bottom: 1px solid #F8BFAD !important;
  padding: 0 0 0.9em 0;
  margin: 0;
}

/* タイトル左の三本線アイコンを消す */
.single.single-post .p-toc__ttl::before {
  content: none !important;
}

/* SWELL標準の index ラインを無効化 */
.single.single-post .p-toc__list.is-style-index li::before {
  content: none !important;
}

/* リスト全体をリセット */
.single.single-post .p-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* SWELL標準の li の margin/padding を打ち消し、線のために relative 指定 */
.single.single-post .p-toc__list.is-style-index > li {
  margin-left: 0 !important;
  padding-left: 0 !important;
  position: relative;
}

/* ── 上位見出し（H2）行 ── */
.single.single-post .p-toc__list[data-level="2"] > li {
  padding: 1.1em 0 0.9em 0;  /* 上下だけ余白 */
  border-top: 1px solid #F8BFAD; /* タイトル下の線と同じ幅で引く */
  box-sizing: border-box;
}

/* 1行目だけは線なし（タイトル直下の線だけ） */
.single.single-post .p-toc__list[data-level="2"] > li:first-child {
  border-top: none;
}

/* 丸番号＋テキストを横並び */
.single.single-post .p-toc__list[data-level="2"] > li > a.p-toc__link {
  display: flex;
  align-items: flex-start;
  column-gap: 0.9em;
  text-decoration: none;
  color: #707070;
}

/* JSで作った丸番号 span（「目次」と揃う位置に調整） */
/* ※JS側で toc-num / toc-text に変換している前提 */
.single.single-post .p-toc__list[data-level="2"] .toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F5A78B;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
  line-height: 1;

}

/* 見出しテキスト部分 */
.single.single-post .p-toc__list[data-level="2"] .toc-text {
  display: block;
  line-height: 1.7;
}

.single.single-post .p-toc__list[data-level="2"] > li > a.p-toc__link:hover {
  opacity: 0.8;
}

/* ── 小見出し（H3）行 ── */
.single.single-post .p-toc__childList {
  margin: 0.4em 0 0 1.4em;
  padding: 0;
  list-style: none;
}

.single.single-post .p-toc__childList li {
  padding: 0.15em 0;
  border: none;
}

.single.single-post .p-toc__childList a {
  display: block;
  text-decoration: none;
  color: #707070;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================
   PC（960px〜）だけ、目次ボックスの余白を広くする
   ========================= */
@media (min-width: 960px) {
  .single.single-post .p-toc.-simple {
    max-width: 920px !important;
    margin: 4em auto !important;
    padding: 5em 5em !important;
  }
}

/* =========================
   スマホ（〜767px）の目次調整
   ========================= */
@media screen and (max-width: 767px) {
  .single.single-post .p-toc.-simple {
    max-width: 100% !important;
    margin: 2.5em 1.5em !important;
    padding: 1.5em 1.5em !important;  /* スマホ用の余白 */
    border-radius: 12px !important;
  }

  .single.single-post .p-toc__ttl {
    font-size: 18px !important;
  }

  /* 丸番号が外に出すぎていたら、少し内側に戻す（必要に応じて調整） */
  .single.single-post .p-toc__list[data-level="2"] .toc-num {
    margin-left: 0px;
  }

  .single.single-post .p-toc__childList {
    margin: 0.4em 0 0 1em;
  }
}

/* ★ PC（960px〜）の目次ボックスを“絶対に”広くする最終オーバーライド */
@media (min-width: 960px) {
  body.single.single-post .post_content .p-toc.-simple {
    max-width: 920px !important;
    margin: 4em auto !important;
    padding: 5em 5em !important;
  }
}


/* =========================
   投稿ページ記事タイトル下のSNSフォローアイコン
   ========================= */
.moado-follow-icons {
  display: flex;
  justify-content: center;
  align-items: center;  /* テキストとアイコンの縦位置を中央に */
  gap: 12px;
  margin-bottom: 65px;  /* ← この分だけ下の文章との間隔が広がる！ 好みで30〜48pxくらいに調整OK */
  margin-top: 50px;
}

.moado-follow-icons__label {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #F49D82;
  display: inline-block;
  margin-bottom: 0;
}

.moado-follow-icons__list {
  display: flex;
  gap: 20px;
  margin-bottom: 0 !important; /* インラインstyleの margin-bottom:15px を打ち消す */
}

/* aタグは“画像のラッパー”だけにする */
.moado-follow-icons__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* アイコン画像のサイズを揃える */
.moado-follow-icons__img {
  width: 33px;   /* PCでの表示サイズ */
  height: auto;
  display: block;
}

.moado-follow-icons__item:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .moado-follow-icons__img {
    width: 34px;  /* スマホだけ少し小さく */
  }
}

/* 記事タイトルの上の余白を広くする */
.p-articleHead.c-postTitle {
  margin-top: 65px !important; /* 好きな値に調整：40〜80pxあたりで良い感じ */
}

/* 記事タイトル */
.c-postTitle__ttl {
  color: #888282 !important;
  letter-spacing: 0.05em !important; /* お好みで 0.05〜0.15em に調整 */
}

/* 投稿日をPC/SPともに中央寄せ */
.c-postDate {
  text-align: center;
  width: 100%;
}

/* 記事フッターの横線をカスタム */
.p-articleFoot {
  border-top: 2.0px solid #F4E5E2 !important; /* ★ 太さ＆色（お好みで） */
  width: calc(100% + 200px); /* 左右に100pxずつ広げる */
  margin-left: -100px;
  padding-top: 2em;                         /* 既存の余白は維持 */
  margin-top: 3em;                           /* 少し余白を広げたい時 */
}

/* 「一覧を見る」ボタンの位置と見た目 */
#after_article.l-articleBottom {
  text-align: center;      /* 中央寄せ */
  margin-top: 24px;
  margin-bottom: 40px;
}

#after_article .c-plainBtn {
  display: inline-block;
  padding: 12px 80px;      /* ボタンの大きさ（お好みで調整） */
  border-radius: 5px;    /* 角丸の枠ボタン */
  border: 1px solid #707070;
  color: #707070;          /* 文字色 */
  text-decoration: none;
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

/* ホバー時、ちょっとだけ濃くする（お好みで） */
#after_article .c-plainBtn:hover {
  opacity: 0.8;
}

/* 共通：SNSブロック横並び（タイトル下用） */
.moado-follow-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* 下部用：縦並びにする */
.moado-follow-icons--bottom {
  flex-direction: column;  /* 縦並び */
  align-items: center;
  margin-top: 32px;
  margin-bottom: 40px;
}

/* 下部ラベルの下マージン */
.moado-follow-icons--bottom .moado-follow-icons__label {
  margin-bottom: 6px;
}

.p-articleMetas__termList,
.p-articleMetas__termList .c-categoryList {
  display: none;
}

.p-postList__title {
  color: #888282 !important;
}

@media (min-width: 960px) {
  /* 読み物一覧：横の余白を広くする */
  .p-postListWrap .p-postList.-pc-col3 .p-postList__item {
    width: calc((100% / 3) - 25px); /* 25pxぶん余白を確保 */
  }

  .p-postListWrap .p-postList {
    column-gap: 25px; /* カード同士の横の余白を増やす */
  }
}

/* 画像そのものを強制的に丸くする */
.p-postList__thumb img, 
.c-postThumb img {
  border-radius: 12px !important;
}

/* =========================
 読み物一覧：New バッジ（PHP連動版）
   ========================= */
/* NEWを出すため、PHPで目印(.is-new-badge)がついた時だけはみ出し許可 */
.p-postListWrap .p-postList__item.is-new-badge .p-postList__thumb {
  position: relative;
  overflow: visible !important;
}

/* ① SWELL標準のサムネオーバーレイ (::before) は使わない */
.p-postList__thumb::before {
  content: none !important;
}

/* ② サムネ画像の左上に New を表示（PHPの目印がある時だけ） */
.p-postListWrap .p-postList__item.is-new-badge .p-postList__thumb {
  position: relative;
}
.p-postListWrap .p-postList__item.is-new-badge .p-postList__thumb::after {
  content: ' ';
  display: block;
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100px;
  height: 45px;
  transform: translate(-14px, -18px);
  background: url('https://www.moado.jp/apps/note/wp-content/uploads/2025/12/New.png') no-repeat center / contain;
  pointer-events: none;
}

/* 最終調整 */
.p-postList__new-badge {
  position: absolute;
  top: -30px;
  left: -20px;     /* ← 内側に入れる */
  z-index: 10000;
  width: 90px;  
  height: auto;
  pointer-events: none;
}

.p-postList__new-badge img {
  width: 100%;
  height: auto;
  display: block;
}

/* NEWバッジの時だけ切り抜き解除 */
.p-postList__item.is-new-badge .c-postThumb__figure {
  overflow: visible !important;
}

/* 読み物一覧：サムネイルの影を完全に消す */
.p-postList__thumb,
.p-postList__thumb img {
  box-shadow: none !important;
}

/* 読み物一覧：カード下のタグ並びを左寄せ＆余白つける */
.p-postList__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.p-postList__tags .p-postList__tag {
  margin: 0;
}

/* 読み物一覧：カード下のタグ並びを左寄せ & 余白調整 */
.p-postList__body {
  text-align: left !important;   /* テキスト左寄せ */
  margin-left: 0 !important;     /* 中央寄せの auto を打ち消す */
  margin-right: 0 !important;
  width: 100%;                   /* カード幅いっぱい使う */
}

.p-postList__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.p-postList__tags .p-postList__tag {
  margin: 0;
}

/* === 読み物一覧：タグ左寄せを強制オーバーライド === */

/* 本文ブロック自体を左寄せ ＋ 中央寄せマージンを打ち消し */
.p-postListWrap .p-postList__body {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* タグの束を左寄せ＆余白つきで並べる（親テーマの center を上書き） */
.p-postListWrap .p-postList__tags {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 各タグ（こころ・季節…）の余計な margin はリセット */
.p-postListWrap .p-postList__tags .p-postList__tag {
  margin: 0;
}

/* --- タグの左寄せを確実に適用 --- */
.p-postListWrap .p-postList__tags {
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.p-postListWrap .p-postList__body {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- タグ行の背景部分はクリック不可にする（pillのみクリック可） --- */
.p-postList__tags {
  position: relative;
  z-index: 10;
  pointer-events: none; /* ← タグ行全体はクリック無効 */
}

.p-postList__tags .p-postList__tag {
  pointer-events: auto; /* ← タグ pill はクリック可能 */
  position: relative;
  z-index: 20;
}

/* 読み物一覧：記事タイトルの文字色を統一 */
.p-postList__title a {
  color: #888282 !important;
  font-weight: 500 !important;
}

/* hoverした時の色を変えたくない場合 */
.p-postList__title a:hover {
  color: #888282 !important;
  opacity: 0.8; /* お好みで */
}

/* 読み物一覧：カード同士の“縦の余白”を広げる */
.p-postListWrap .p-postList.-pc-col3 .p-postList__item {
  margin-bottom: 80px !important; /* 好きな余白：30〜60px くらいが綺麗 */
}

/* パーツ-投稿一覧：本文上の余白を消す */
.-type-big .p-postList__body,
.-type-card .p-postList__body {
  padding-top: 0 !important;
}

/* =========================
   読み物一覧：SPは縦1カラム
   ========================= */
@media screen and (max-width: 767px) {

  /* 一覧全体：横並びを解除 */
  .p-postListWrap .p-postList {
    display: block !important;
  }

  /* 各カードを100%幅に */
  .p-postListWrap .p-postList__item {
    width: 100% !important;
    margin-bottom: 56px; /* カード同士の縦余白（お好みで調整） */
  }
}	
/* =========================
   読みものバナー（SP調整）
   ========================= */
@media screen and (max-width: 767px) {

  .wp-block-cover {
    min-height: 150px !important;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0 !important;
  }

  .wp-block-cover__inner-container {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .wp-block-cover__image-background,
  .wp-block-cover__video-background {
    object-fit: cover;
  }
}
/* =========================
   読み物一覧：投稿日（タイトル下）
   ========================= */
.p-postList__date {
  font-size: 12px;
  color: #A0A0A0;
  letter-spacing: 0.06em;
  margin-top: 6px;   /* ← タイトルとの間 */
}

@media (max-width: 767px) {
  .p-postList__date {
    font-size: 11px;
    margin-top: 4px;
  }
}

/* =========================
   特集タグカラー（最終版）
   ========================= */

.c-tagList__item a.tag-campaign,
.p-postList__tag.tag-campaign {
  background-color: #E9B7B7 !important;
}

.c-tagList__item a.tag-feature,
.p-postList__tag.tag-feature {
  background-color: #C9D8C5 !important;
}

.c-tagList__item a.tag-backstory,
.p-postList__tag.tag-backstory {
  background-color: #C8CDE8 !important;
}

.c-tagList__item a.tag-nagaoka_fireworks,
.p-postList__tag.tag-nagaoka_fireworks {
  background-color: #F2C1A8 !important;
}

/* 読みもの・特集 共通：バナー（post_content）下の余白を統一 */
.page-template-page-reading-list .post_content,
.page-template-page-feature-list .post_content {
  margin-bottom: 36px; /* ← お好みで 32〜48px */
}

/* タグ一覧：上下余白を固定 */
.c-tagList {
  margin-top: 0 !important;
  margin-bottom: 45px;
}

/* =====================================================
   読み物一覧：ページネーション
   （商品一覧 .c-pager-list 風 / 最終版）
===================================================== */

/* -----------------------------
   全体ラッパー
----------------------------- */
nav.c-pagination {
  margin: 40px 0 60px;
  text-align: center;
  display: block;
  font-size: 0; /* inline-block の隙間対策 */
}

/* SWELL 由来の影・背景を完全リセット */
nav.c-pagination,
nav.c-pagination * {
  box-shadow: none !important;
  background-image: none !important;
}

/* -----------------------------
   リスト（UL）
----------------------------- */
nav.c-pagination ul.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: transparent;
}

nav.c-pagination ul.page-numbers li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -----------------------------
   ページネーションボタン（共通）
   ※ 数字 / prev / next 全部これ
----------------------------- */
nav.c-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  padding: 0;

  border-radius: 50%;
  box-sizing: border-box;

  font-size: 20px;
  font-weight: 600;
  text-decoration: none;

  color: #F49D82;
  background-color: #ffffff;
  border: 1px solid transparent;
}

/* -----------------------------
   現在ページ
----------------------------- */
nav.c-pagination .page-numbers.current {
  background-color: #F49D82;
  color: #ffffff;
}

/* current hover（商品一覧と挙動を揃える） */
nav.c-pagination .page-numbers.current:hover {
  background-color: #ffffff;
  color: #F49D82;
  border-color: #F49D82;
}

/* -----------------------------
   省略記号（…）
----------------------------- */
nav.c-pagination .page-numbers.dots {
  width: auto;
  background: transparent;
  border: none;
  pointer-events: none;
}

/* -----------------------------
   Prev / Next
----------------------------- */
nav.c-pagination .page-numbers.prev,
nav.c-pagination .page-numbers.next {
  background-color: #EEE4E1;
  border-radius: 4px;
  margin-top: 20px;

  /* テキストは非表示（矢印のみ） */
  color: transparent;
  font-size: 0;

  position: relative;
}

/* hover */
nav.c-pagination .page-numbers.prev:hover,
nav.c-pagination .page-numbers.next:hover {
  background-color: #E4D7D2;
}

/* 矢印（共通） */
nav.c-pagination .page-numbers.prev::before,
nav.c-pagination .page-numbers.next::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
}

/* 左矢印 */
nav.c-pagination .page-numbers.prev::before {
  border-width: 7px 11px 7px 0;
  border-color: transparent #ffffff transparent transparent;
}

/* 右矢印 */
nav.c-pagination .page-numbers.next::before {
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #ffffff;
}

/* -----------------------------
   無効状態（1ページ目 / 最終ページ）
----------------------------- */
nav.c-pagination .page-numbers[aria-disabled="true"] {
  margin-top: 20px;
  opacity: 0.4;
  pointer-events: none;
}


/* ============================
   特設イベント一覧 c-eventList
   3カラム & 正方形サムネイル
============================ */

/* PC時は3カラム */
.l-content .c-eventList {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* 念のため、子要素の幅指定をリセット */
.c-eventList__item {
  width: auto !important;
}

/* カラム調整（タブレット・スマホ） */
@media (max-width: 960px) {
  .l-content .c-eventList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 600px) {
  .l-content .c-eventList {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
  }
}

/* 正方形サムネイル */
.c-eventList__thumb {
  position: relative;
  width: 100%;
  padding-top: 100%;   /* 正方形 */
  overflow: hidden;
  border-radius: 0 !important;
}

/* 画像を正方形にトリミング */
.c-eventList__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

/* ============================================
   TOPページ：最新3件にNewバッジを表示
============================================ */

/* 1. 外枠：バッジを出すためにはみ出しを許可する */
.p-postListWrap .p-postList__item:nth-child(-n+3) .p-postList__thumb {
    overflow: visible !important;
}

/* 2. バッジの画像・位置設定 */
.p-postListWrap .p-postList__item:nth-child(-n+3) .p-postList__thumb::after {
    content: '' !important;
    position: absolute;
    z-index: 10;
    top: -18px;    /* 上下位置 */
    left: -14px;   /* 左右位置 */
    width: 100px;
    height: 45px;
    background-image: url('https://moado.shop-pro.jp/apps/note/wp-content/uploads/2025/12/New.png');
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

/* ============================================
   ホバー拡大時も角丸を維持する【最終解決策】
============================================ */

/* 1. 画像の直上の親(figure)を「切り抜き専用の枠」にする */
/* これにより、外枠(thumb)がはみ出し許可でも、ここで画像が切り抜かれます */
.c-postThumb__figure {
    border-radius: 12px !important;
    overflow: hidden !important;
    /* 拡大アニメーション時のガタつきを防ぐおまじない */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    position: relative;
    z-index: 1;
}

/* 2. 中の画像が拡大しても、figureの角丸からはみ出さないように設定 */
.c-postThumb__img {
    border-radius: 12px !important;
    will-change: transform;
}

/* 3. マウスを置いた時も強制的に角丸の形を維持 */
.p-postList__link:hover .c-postThumb__figure {
    border-radius: 12px !important;
}

/* =====================================================
   Header : Global / PC
===================================================== */

/* グローバルナビ内のアイコン画像サイズ（SWELL上書き） */
.l-header .c-gnav .menu-item img {
  height: 22px !important;
  width: auto !important;
}

 
/* PC：ヘッダーメニュー間隔 */ 
/*
@media (min-width: 960px) {
  .l-header .c-gnav a,
  #fix_header .c-gnav a {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  
  .l-header .c-gnav li.menu-icon > a,
  #fix_header .c-gnav li.menu-icon > a {
    padding-left: 25px !important;
    padding-right: 22px !important;
  }
}
*/ 



/* =====================================================
   Header : SP（〜960px）
===================================================== */

@media (max-width: 960px) {

  /* ---------- 非表示 ---------- */

  /* SWELL標準の検索・SPカスタムボタンを無効化 */
  .l-header__searchBtn,
  .l-header__customBtn_sp {
    display: none !important;
  }

  /* ---------- ヘッダー全体 ---------- */

  .l-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
  }

  body {
    padding-top: 85px !important; /* ヘッダー固定分 */
  }

  .l-header__inner {
    min-height: 85px;
    padding-left: 0 !important;
    padding-right: 9px;
  }

  /* ロゴ */
  .l-header__logo,
  .l-header__logo .c-headLogo__img {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .l-header__logo img {
    max-height: 48px;
    width: auto;
  }	

  /* ---------- アイコンエリア共通 ---------- */

  .l-header-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    margin-left: 0 !important;
  }

  .l-help-navi-list__item,
  .l-header-cart {
    flex: 1;
    text-align: center;
  }

  /* 38×60 の固定タップ領域 */
  .l-help-navi-list__link,
  .l-header-cart a,
  .menu-btn {
    width: 38px;
    height: 60px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* ← 余白調整（今回の要点） */
    background: transparent;
    border: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
  }

  /* フォーカス時の青枠除去（iOS対策） */
  .menu-btn:focus {
    outline: none;
  }

  /* ---------- アイコン ---------- */

  .l-header-search img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    opacity: .85;
  }

  /* ---------- ラベル ---------- */

  .l-header-search .icon-text {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    color: #888282;
    white-space: nowrap;
  }

  /* メニューボタンだけ文字を少し詰める */
  .menu-btn .icon-text {
    letter-spacing: -0.05em;
  }

  /* ---------- ハンバーガー / × ---------- */

  .menu-icon {
    width: 26px;
    height: 26px;
    position: relative;
    display: flex;
    align-items: center;       /* ← 追加 */
    justify-content: center;
  }

  .menu-line {
    position: absolute;
    width: 26px;
    height: 2px;
    background: #888282;
  }

  .menu-line:nth-child(1) { transform: translateY(-6px); }
  .menu-line:nth-child(2) { transform: translateY(6px); }

  html[data-spmenu="opened"] .menu-line:nth-child(1) {
    transform: rotate(45deg);
  }
  html[data-spmenu="opened"] .menu-line:nth-child(2) {
    transform: rotate(-45deg);
  }

  /* ---------- SPメニュー本体 ---------- */

  .cm-sp-nav {
    display: none !important;
    position: fixed;
    top: 85px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 85px);
    background: #fff;
    z-index: 9998;
    overflow-y: auto;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    padding: 10px 0;
  }

  html[data-spmenu="opened"] .cm-sp-nav {
    display: block !important;
  }

  /* 管理バー対応 */
  .admin-bar .cm-sp-nav {
    top: calc(85px + 46px);
  }

  /* SWELL標準ドロワー無効化 */
  .p-spMenu {
    display: none !important;
  }

  /* ---------- SPメニュー中身 ---------- */

  .cm-sp-nav__box {
    padding: 25px 45px;
  }

  .cm-sp-nav__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #888282;
    margin-bottom: 10px;
  }

  .cm-sp-nav__title img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .cm-sp-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cm-sp-nav li a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    color: #888282;
    text-decoration: none;
    border-top: 1px dotted #eee;
    position: relative;
  }

  .cm-sp-nav li:first-child a {
    border-top: none;
  }

  .cm-sp-nav li a::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-top: 1.5px solid #ccc;
    border-right: 1.5px solid #ccc;
  }

  .side-banner {
    padding: 25px 45px 100px;
  }

  .side-banner a {
    display: block;
    margin-bottom: 20px;
  }

  .side-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
  }
}

/* =====================================
   PCでは SP専用要素を完全に非表示
  （SPの見た目は一切変更しない）
===================================== */
@media (min-width: 961px) {

  /* SP用ナビ（ドロワー） */
  .cm-sp-nav {
    display: none !important;
  }

  /* SP用検索エリア */
  .l-header-search {
    display: none !important;
  }

}
/* =====================================
   PCでは SPドロワーを完全に非表示
===================================== */
@media screen and (min-width: 961px) {
  nav.cm-sp-nav {
    display: none !important;
  }
}

/* =====================================
  検索調整
===================================== */
.l-header-search__contents {
  display: none;
}

.l-header-search__contents.is-open {
  display: block;
}
/* PC/SP共通：ヘッダー直下に出す */
.l-header-search__contents {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* PC時だけ中央寄せ */
@media screen and (min-width: 961px) {
  .l-header-search__box {
    width: 960px;
    margin: 0 auto;
  }
}

/* =====================================
 ヘッダー調整
===================================== */
@media (min-width: 960px) {
  .-parallel-bottom .l-header__inner {
    padding-top: 68px !important;
  }
  .-parallel-bottom .l-header__logo {
    padding: 0 !important;
    margin-bottom: 15px !important;
  }
  .c-headLogo {
    max-width: 240px;
    margin: 0 auto;
    word-break: break-all;
    height: auto !important;
  }
  .c-headLogo__img {
    max-width: 220px;
    width: 100%;
    max-height: 150px;
  }
  .-parallel .l-header__gnav .c-gnav {
    align-items: center;
    max-width: 880px;
    margin: auto;
    height: 60px;
  }
  .-parallel .l-header__gnav .c-gnav>li>a {
    padding: 15px 40px 15px 30px;
  }
  .l-header .c-gnav li.menu-icon > a,
  #fix_header .c-gnav li.menu-icon > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .menu-icon.menu-account {
    width: 70px;
  }
  .menu-icon.menu-cart {
    width: 42px;
  }
  .menu-icon.menu-search {
    margin-left: 15px;
    width: 42px;
  }
  #fix_header .c-headLogo__img {
    max-width: 140px !important;
    width: 100%;
    height: auto;
  }
}