/* =========================================================
   Quark-DIY  共通スタイル
   薄茶系・ラフな雰囲気のDIY趣味サイト
   ---------------------------------------------------------
   色を変えたいときは下の :root の変数をいじればOK
   ========================================================= */

:root {
  --bg:        #f3ead9;   /* 全体の背景（薄茶・クリーム） */
  --paper:     #fffdf8;   /* カード/本文の紙色 */
  --wood:      #a5794f;   /* 木材っぽい茶色（アクセント） */
  --wood-dark: #7a5533;   /* 濃い茶（見出し・枠線） */
  --wood-soft: #e6d5bd;   /* 薄い茶（区切り線・帯） */
  --ink:       #4a3b2a;   /* 本文の文字色（こげ茶） */
  --link:      #2b6cb0;   /* 青いリンク */
  --link-hover:#1a4a80;
  --shadow:    0 2px 10px rgba(122, 85, 51, .12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ギリシャ文字（Ω＝オーム, μ＝マイクロ 等）を欧文フォントで表示させる。
   和文フォントの太字だとΩが化ける（反転Nのように見える）のを防ぐ。 */
@font-face {
  font-family: "GreekFix";
  src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
  unicode-range: U+0370-03FF, U+2126; /* ギリシャ文字ブロック ＋ Ω(オーム)記号 */
}

body {
  margin: 0;
  font-family: "GreekFix", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Segoe UI",
               system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  /* うっすら木目/紙っぽいテクスチャ */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(165,121,79,.035) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.5), transparent 60%);
  line-height: 1.9;
  font-size: 16px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- ヘッダー / バナー ---------- */
.site-header {
  border-bottom: 4px solid var(--wood);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.banner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 20px;   /* 本文(.layout)の左右パディングと揃える */
  display: flex;
  align-items: center;
  gap: 18px;
}
.banner svg { flex: 0 0 auto; }
.site-title {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--wood-dark);
  letter-spacing: .04em;
}
.site-title small {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--wood);
  letter-spacing: .02em;
  margin-top: 2px;
}

/* ---------- 全体レイアウト（3カラム） ---------- */
.layout {
  max-width: 1400px;
  margin: 24px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 190px 1fr 220px;
  gap: 26px;
  align-items: start;
}

/* ---------- サイドバー（リンク集） ---------- */
.sidebar {
  background: var(--paper);
  border: 1px solid var(--wood-soft);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 16px;
  text-align: center;
}
.sidebar h2 {
  font-size: 1rem;
  color: var(--wood-dark);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--wood-soft);
}
/* 「お知らせ」など、見出しと同じ見た目のリンク（茶色＋破線下線） */
.sidebar h2.sidebar-link { margin-top: 18px; }
.sidebar h2.group { margin-top: 18px; }
.sidebar h2 a { color: var(--wood-dark); text-decoration: none; }
.sidebar h2 a:hover { color: var(--wood); text-decoration: none; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 8px 0; }
/* リンク下のQRコード */
.sidebar .link-qr li { margin: 10px 0 14px; }
.sidebar .qr {
  display: block;
  width: 88px;
  height: auto;
  margin: 5px auto 0;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--wood-soft);
  border-radius: 6px;
}

/* 特別枠：オリジナルソフト（メニュー直下に強調表示） */
.side-tools {
  margin: 6px 0 18px;
  padding: 12px 12px 14px;
  background: linear-gradient(160deg, #fbf3e4, #f3e6cf);
  border: 1px solid var(--wood);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.side-tools-title {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--wood-dark);
  text-transform: uppercase;
}
.side-tool-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  margin: 8px 0;
  padding: 9px 11px;
  background: var(--wood);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: background .15s, transform .1s;
}
.side-tool-btn:hover {
  color: #7df9e9;
  text-shadow: 0 0 8px rgba(60,245,225,.95), 0 0 16px rgba(60,245,225,.6);
  text-decoration: none;
}
.side-tool-btn .ic { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }

/* ---------- メイン ---------- */
.main {
  background: var(--paper);
  border: 1px solid var(--wood-soft);
  border-radius: 12px;
  padding: 22px 28px;
  box-shadow: var(--shadow);
}
.lead {
  font-size: 1.05rem;
  color: var(--wood-dark);
  background: var(--wood-soft);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 20px;
}

/* セクション見出し（＝記事カテゴリ） */
.section-title {
  font-size: 1.25rem;
  color: var(--wood-dark);
  margin: 26px 0 8px;
  padding-left: 12px;
  border-left: 6px solid var(--wood);
}
.section-title:first-of-type { margin-top: 4px; }

/* リンクのリスト（ここに <li> を足すだけで増やせる） */
.link-list { list-style: none; margin: 0 0 6px; padding: 0; }
.link-list li {
  margin: 4px 0;
  padding-left: 4px;
}

/* ---------- カテゴリカードは縦1列に積む ---------- */
/* カードは全幅で縦に並べ、記事は各カード内で左右2列に振り分ける */
.cat-grid {
  display: block;
}
/* カテゴリを紙色のカードで囲む（コールアウト風の区切り） */
.cat {
  background: var(--paper);
  border: 1px solid var(--wood-soft);
  border-radius: 10px;
  padding: 16px 20px 14px;
  margin: 0 0 18px;
  break-inside: avoid;
}
.cat .section-title { margin-top: 0; }
/* カテゴリ見出し直下に置くオリジナルソフトの特別ボタン */
.cat-tool-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 13px;
  background: linear-gradient(160deg, var(--wood), var(--wood-dark));
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform .1s, filter .15s;
}
.cat-tool-btn:hover {
  color: #7df9e9;
  text-shadow: 0 0 8px rgba(60,245,225,.95), 0 0 16px rgba(60,245,225,.6);
  text-decoration: none;
}
.cat-tool-btn .ic { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
/* 「クリックできる」と分かる白いCTAバッジ（右寄せ） */
.cat-tool-btn .cta {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 800;
  color: var(--wood-dark);
  background: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.cat-tool-btn:hover .cta { color: var(--wood-dark); text-shadow: none; }
/* タイトル横の説明テキスト（ホバーで本体と一緒に青緑発光する） */
.cat-tool-btn .sub { font-size: .82rem; font-weight: 600; opacity: .95; }
/* 全幅で下に配置するセクション（過去サイト掲載作品・記事一覧） */
.cat-full { column-span: all; margin-top: 20px; }
/* 一覧を2列で表示（行方向＝左→右→左→右の順に埋まる。記事を足しても変な余白ができない） */
.link-list.cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-content: start;
}
.sub-title {
  font-size: .95rem;
  color: var(--wood-dark);
  margin: 16px 0 6px;
  padding-left: 10px;
  border-left: 4px solid var(--wood-soft);
}
.link-list li::before {
  content: "・";
  color: var(--wood);
}
.link-list a { font-size: 1.02rem; }
.link-list li.prep { color: #b3a793; }
.link-list li.prep::before { color: #cbbfa6; }
.link-list .soon {
  display: inline-block;
  font-size: .72rem;
  color: #8a7a5f;
  background: #efe5d3;
  border-radius: 4px;
  padding: 0 7px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* 自作アプリ・ソフトで実現できる機能の紹介 */
.app-capabilities {
  margin-top: 18px;
  padding: 16px 18px 18px;
  background: #fffaf0;
  border: 1px solid var(--wood-soft);
  border-radius: 10px;
}
.app-capabilities h3 {
  margin: 0 0 5px;
  color: var(--wood-dark);
  font-size: 1rem;
}
.app-capabilities > p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
}
.app-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.app-capability-card {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5d3b7;
  border-radius: 8px;
}
.app-capability-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  background: #f3e4c9;
  border-radius: 50%;
  font-size: 1rem;
}
.app-capability-card h4 {
  margin: 0 0 3px;
  color: var(--wood-dark);
  font-size: .92rem;
}
.app-capability-card p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
}
/* 自作アプリ・ソフトの購入・相談案内 */
.app-sales-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffaf0, #f3e4c9);
  border: 1px solid var(--wood);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(91, 62, 35, .12);
}
.app-sales-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--wood);
  border-radius: 50%;
  font-size: 1.35rem;
}
.app-sales-content h3 {
  margin: 0 0 5px;
  color: var(--wood-dark);
  font-size: 1rem;
}
.app-sales-content p {
  margin: 4px 0;
  font-size: .88rem;
  line-height: 1.55;
}
.app-sales-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 184px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #bc7a32, var(--wood-dark));
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(91, 62, 35, .25);
  transition: transform .1s, filter .15s;
}
.app-sales-btn:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- 右カラム（アフィリ枠） ---------- */
.aff-col { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.aff-box {
  background: var(--paper);
  border: 1px dashed var(--wood);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.aff-box h3 {
  margin: 0 0 4px;
  font-size: .95rem;
  color: var(--wood-dark);
}
.pr-label {
  display: inline-block;
  font-size: .7rem;
  background: var(--wood);
  color: #fff;
  border-radius: 4px;
  padding: 1px 7px;
  margin-bottom: 8px;
  letter-spacing: .05em;
}
.aff-slot {
  min-height: 90px;
  border: 1px dashed var(--wood-soft);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
    rgba(165,121,79,.05) 0 8px, transparent 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #b09b82;
  font-size: .8rem;
  padding: 8px;
}

/* ---------- アフィリエイトのボタン ---------- */
/* 商品名を書いて href を差し替えるだけで使える。amazon / rakuten でクラスを付ける */
.aff-item { margin: 0 0 10px; }
.aff-item p {
  margin: 0 0 6px;
  font-size: .85rem;
  color: var(--ink);
  line-height: 1.4;
}
.aff-btn {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.aff-btn:hover { text-decoration: none; opacity: .9; }
.aff-btn.amazon  { background: #ff9900; color: #1a1a1a; }
.aff-btn.rakuten { background: #bf0000; color: #fff; }

/* 楽天の貼り付けHTML（幅504px固定・table入れ子）を枠内に収める。貼ったHTMLは触らず外側から効かせる */
.aff-rakuten { width: 100%; overflow-x: hidden; }
.aff-rakuten table { width: 100% !important; table-layout: fixed; }
.aff-rakuten td { width: auto !important; vertical-align: top; }
.aff-rakuten div[style*="504px"] { width: auto !important; max-width: 100% !important; box-sizing: border-box; }
.aff-rakuten img { max-width: 100% !important; height: auto !important; }
.aff-rakuten a, .aff-rakuten p { word-break: break-word; }

/* ---------- 記事ページ本文 ---------- */
.article { max-width: none; } /* ホームと同じくカラム幅いっぱいに広げる（本文とアフィリ枠の余白解消） */
.article h1 {
  font-size: 1.7rem;
  color: var(--wood-dark);
  border-bottom: 3px solid var(--wood);
  padding-bottom: 8px;
  margin-top: 0;
}
.article .meta { color: var(--wood); font-size: .85rem; margin-top: -6px; }
.article h2 {
  font-size: 1.25rem;
  color: var(--wood-dark);
  border-left: 6px solid var(--wood);
  padding-left: 10px;
  margin-top: 30px;
}
.article img { max-width: 100%; border-radius: 10px; }
/* 旧サイト移行記事：小さい元画像を等倍以下で表示して粗さを目立たせない（2枚横並び） */
.article.oldimg img {
  max-width: 250px;
  margin: 6px 10px 6px 0;
  vertical-align: top;
}
/* 元画像がとても小さい記事はさらに控えめに */
.article.oldimg.sm img { max-width: 200px; }
/* 高解像度の写真はやや大きめに */
.article.oldimg.lg img { max-width: 330px; }
/* ---------- 印刷難易度の星 ---------- */
.tool-diff {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--wood-dark);
  margin: 0 0 12px;
}
.tool-diff .stars { color: #d9a441; letter-spacing: 2px; font-size: 1rem; }

/* ---------- 注意事項ボックス ---------- */
.notice {
  margin: 30px 0 0;
  padding: 18px 22px;
  background: #fbf3e4;
  border: 1px solid var(--wood-soft);
  border-left: 6px solid var(--wood);
  border-radius: 10px;
}
.notice h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--wood-dark); }
.notice p { margin: 0 0 8px; font-size: .88rem; line-height: 1.75; color: var(--ink); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- ご意見・ご感想フォーム ---------- */
.feedback {
  margin: 40px 0 12px;
  padding: 24px 26px;
  background: #fffdf8;
  border: 1px solid var(--wood-soft);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.feedback h2 {
  margin: 0 0 4px;
  font-size: 1.3rem;
  color: var(--wood-dark);
  border-left: 6px solid var(--wood);
  padding-left: 10px;
}
.feedback .fb-lead { font-size: .88rem; color: var(--ink); margin: 0 0 16px; }
.fb-row { display: flex; gap: 16px; flex-wrap: wrap; }
.fb-field { flex: 1; min-width: 160px; margin-bottom: 14px; }
.fb-field.full { flex-basis: 100%; }
.feedback label { display: block; font-size: .82rem; font-weight: 700; color: var(--wood-dark); margin-bottom: 5px; }
.feedback input,
.feedback select,
.feedback textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--wood-soft);
  border-radius: 8px;
  background: #fff;
  font-size: .92rem; font-family: inherit; color: var(--ink);
}
.feedback textarea { min-height: 100px; resize: vertical; }
.feedback input:focus, .feedback select:focus, .feedback textarea:focus {
  outline: none; border-color: var(--wood);
}
.fb-submit {
  background: var(--wood); color: #fff; font-weight: 700;
  border: none; padding: 11px 30px; border-radius: 999px;
  cursor: pointer; font-size: .98rem;
  transition: background .2s ease;
}
.fb-submit:hover { background: var(--wood-dark); }
.fb-note { font-size: .76rem; color: var(--wood); margin-top: 10px; }

/* ---------- 右カラムなしレイアウト（一覧ページ用） ---------- */
.layout.no-aff { grid-template-columns: 190px 1fr; }
@media (max-width: 860px) { .layout.no-aff { grid-template-columns: 1fr; } }

/* ---------- オリジナルソフト：カードギャラリー ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
.tool-card {
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid var(--wood-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(122,85,51,.2); }
.tool-thumb { display: block; width: 100%; height: auto; background: #f6eede; border-bottom: 1px solid var(--wood-soft); }
.works-grid .tool-thumb {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.tool-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.tool-body h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--wood-dark); }
.tool-body p { margin: 0 0 14px; font-size: .86rem; color: var(--ink); line-height: 1.6; flex: 1; }
.tool-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--wood); color: #fff; font-weight: 700; font-size: .92rem;
  padding: 9px 20px; border-radius: 999px; text-decoration: none;
  transition: background .2s ease;
}
.tool-btn:hover { background: var(--wood-dark); color: #fff; text-decoration: none; }
.tool-btn .ico { font-size: 1rem; }

/* ---------- STLなどのダウンロードボックス ---------- */
.download-box {
  margin: 26px 0;
  padding: 20px;
  background: #fbf6ec;
  border: 1px solid var(--wood-soft);
  border-radius: 12px;
  text-align: center;
}
.download-box h3 {
  margin: 0 0 6px;
  color: var(--wood-dark);
  font-size: 1.15rem;
}
.download-box .dl-note {
  font-size: .82rem;
  color: var(--wood);
  margin: 0 0 14px;
  line-height: 1.6;
}
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wood);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 13px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(122, 85, 51, .3);
  transition: background .2s ease, transform .2s ease;
}
.dl-btn:hover {
  background: var(--wood-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.dl-btn .ico { font-size: 1.25rem; line-height: 1; }
.dl-btn + .dl-btn { margin-left: 10px; }
.download-box .dl-size {
  display: block;
  margin-top: 12px;
  font-size: .78rem;
  color: #8a7a5f;
}

/* 特定の1枚を大きめ・中央に */
.article.oldimg img.feature {
  max-width: 480px;
  width: 100%;
  display: block;
  margin: 12px auto;
}
.article-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 20px;
}
.article-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--wood-soft);
  border-radius: 10px;
  background: #f6eede;
}
@media (max-width: 600px) {
  .article.oldimg img { max-width: 100%; margin: 6px 0; }
  .article-gallery { grid-template-columns: 1fr; }
}
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: .88rem;
}
.article th, .article td {
  border: 1px solid var(--wood-soft);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.article thead th { background: var(--wood); color: #fff; }
.article tbody tr:nth-child(even) { background: rgba(165,121,79,.06); }
.article figure { margin: 16px 0; }
.article figcaption { font-size: .85rem; color: var(--wood); margin-top: 6px; }
.breadcrumb { font-size: .85rem; margin-bottom: 10px; }
.breadcrumb a { color: var(--wood); }

/* ---------- メールボタン（お問い合わせ） ---------- */
.mail-btn {
  display: inline-block;
  background: var(--wood);
  color: #fff;
  font-size: 1.05rem;
  padding: 12px 26px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.mail-btn:hover { background: var(--wood-dark); color: #fff; text-decoration: none; }
.mail-note { color: var(--wood); font-size: .9rem; }

/* ---------- フッター ---------- */
.site-footer {
  text-align: center;
  color: var(--wood);
  font-size: .8rem;
  padding: 30px 20px 40px;
}

/* ---------- スマホ対応 ---------- */
@media (max-width: 860px) {
  /* スマホでは横方向のはみ出しを完全に抑え、画面幅ぴったりに収める。
     この幅ではサイドバーが static なので sticky を壊さない */
  html, body { overflow-x: hidden; }
  .layout { grid-template-columns: 1fr; }
  .main { order: 1; }
  .sidebar { order: 2; }
  .aff-col { order: 3; }
  .sidebar, .aff-col { position: static; }
  .site-title { font-size: 1.7rem; }
  .link-list.cols2 { grid-template-columns: 1fr; }
  .topic-card-grid, .topic-link-grid { grid-template-columns: 1fr; }

  /* オリジナルソフトの特別ボタン：狭い画面でタイトルや説明文が
     1文字ずつ縦積みになる崩れを防ぐ。説明とCTAをそれぞれ独立した行に落として、
     タイトルが1行分の幅をフルに使えるようにする */
  .cat-tool-btn { flex-wrap: wrap; align-items: center; }
  .cat-tool-btn .sub { flex-basis: 100%; }   /* 説明を独立した行に */
  .cat-tool-btn .cta { margin-left: 0; }      /* CTAバッジを左寄せで次の行に */
  .app-capability-grid { grid-template-columns: 1fr; }
  .app-sales-box { grid-template-columns: auto 1fr; }
  .app-sales-btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 520px) {
  .topic-card { min-height: 118px !important; }
  .topic-card img { width: 36% !important; min-width: 118px !important; }
  .topic-card-body { padding: 13px 14px 12px !important; }
  .topic-card-title { font-size: 1.05rem !important; }
  .topic-card-desc { font-size: .76rem !important; }
  .topic-card-cta { margin-top: 7px !important; }
}

/* ---------- TOPページ：個別記事の小型カード ---------- */
.main > .cat-grid .link-list.cols2 {
  gap: 12px;
  margin: 0 0 16px;
}
.main > .cat-grid .link-list.cols2 li {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #fffdf8;
  border: 1px solid var(--wood-soft);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.main > .cat-grid .link-list.cols2 li::before { display: none; }
.main > .cat-grid .link-list.cols2 li:hover {
  transform: translateY(-2px);
  border-color: var(--wood);
  box-shadow: 0 6px 14px rgba(122,85,51,.16);
}
.main > .cat-grid .link-list.cols2 li a {
  position: relative;
  display: block;
  min-height: 48px;
  padding: 14px 42px 14px 16px;
  color: #1769aa;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
}
.main > .cat-grid .link-list.cols2 li a::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--wood);
  font-size: 1.2rem;
  font-weight: 400;
}
.main > .cat-grid .link-list.cols2 li.prep {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 14px 16px;
  color: #9b8a70;
  font-size: .96rem;
  line-height: 1.55;
  background: #faf6ee;
  box-shadow: none;
}

/* ---------- DIYお役立ち情報：カテゴリカード ---------- */
.diy-topic-section { margin-top: 34px; }
.topic-section-heading { margin-bottom: 16px; }
.topic-section-heading .section-title { margin-bottom: 8px; }
.topic-section-heading p { margin: 0; color: var(--wood); font-size: .92rem; }
.topic-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.topic-card { display: flex; align-items: stretch; min-height: 148px; overflow: hidden; color: var(--ink); text-decoration: none; background: #fffdf8; border: 1px solid var(--wood-soft); border-radius: 14px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.topic-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(122,85,51,.2); border-color: var(--wood); }
.topic-card img { width: 42%; min-width: 150px; object-fit: cover; background: #f6eede; }
.topic-card-body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 16px 16px 14px; }
.topic-card-title { color: var(--wood-dark); font-size: 1.18rem; font-weight: 700; line-height: 1.35; }
.topic-card-desc { margin-top: 6px; font-size: .82rem; line-height: 1.55; color: var(--ink); }
.topic-card-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--wood); font-size: .84rem; font-weight: 700; }
.topic-card-cta b { font-size: 1.3rem; font-weight: 400; line-height: 1; }
.topic-page { max-width: 980px; }
.topic-page h1 { margin: 0 0 6px; color: var(--wood-dark); font-size: 1.75rem; border-bottom: 3px solid var(--wood); padding-bottom: 8px; }
.topic-page .topic-lead { margin: 0 0 22px; color: var(--ink); line-height: 1.75; }
.topic-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 28px; }
.topic-link-card { display: block; padding: 17px 18px; color: var(--ink); text-decoration: none; background: #fffdf8; border: 1px solid var(--wood-soft); border-radius: 10px; box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease; }
.topic-link-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-2px); border-color: var(--wood); }
.topic-link-card strong { display: block; color: #1769aa; font-size: 1rem; line-height: 1.55; }
.topic-link-card span { display: block; margin-top: 5px; font-size: .82rem; color: var(--wood); line-height: 1.5; }
.topic-back { display: inline-flex; align-items: center; gap: 6px; color: var(--wood); font-weight: 700; text-decoration: none; }
.topic-back:hover { color: var(--wood-dark); text-decoration: underline; }

/* ---------- Modern craft refresh ---------- */
:root {
  --bg: #f4f6f5;
  --paper: #ffffff;
  --wood: #b66a2f;
  --wood-dark: #21313a;
  --wood-soft: #dce4e2;
  --ink: #41515a;
  --link: #176f8a;
  --link-hover: #0f5369;
  --shadow: 0 8px 24px rgba(24, 43, 50, .08);
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(circle at 8% 0%, rgba(24,169,153,.08), transparent 25%), radial-gradient(circle at 92% 6%, rgba(214,134,59,.10), transparent 23%);
  font-family: "GreekFix", "Yu Gothic UI", "Segoe UI", system-ui, sans-serif;
}
.site-header {
  position: relative;
  border-bottom: 1px solid rgba(33,49,58,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 18px rgba(24,43,50,.06);
}
.site-header::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #18a999, #d6863b); }
.banner { min-height: 100px; padding: 18px 24px; gap: 14px; }
.banner > svg,
.banner > img { display: none; }
.banner::before { content: ""; width: 64px; height: 64px; flex: 0 0 64px; background: url("images/quark-diy-mark.svg") center / contain no-repeat; }
.site-title { font-size: 2rem; letter-spacing: .015em; color: #21313a; }
.site-title a { color: inherit !important; }
.site-title small { margin-top: 3px; color: #71818a; font-size: .82rem; letter-spacing: .04em; }
.global-nav {
  display: flex;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 14px 102px;
}
.global-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  color: #53636b;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.global-nav a:hover { color: #0b6e69; background: #e7f3f1; text-decoration: none; }
.global-nav a span { color: #b66a2f; font-size: .8rem; }
.main, .sidebar, .aff-col .aff-box { border-color: rgba(33,49,58,.11); box-shadow: var(--shadow); }
.main, .sidebar { border-radius: 16px; }
.sidebar { background: rgba(255,255,255,.86); }
.sidebar h2 { color: #21313a; border-bottom-style: solid; border-bottom-color: #dce4e2; }
.lead { background: linear-gradient(90deg, #e7f3f1, #f5f0e8); color: #41515a; border-radius: 12px; }
.cat { border-color: rgba(33,49,58,.10); border-radius: 14px; }
.section-title { color: #21313a; border-left-color: #18a999; }
.topic-card, .topic-link-card, .main > .cat-grid .link-list.cols2 li { border-color: rgba(33,49,58,.12); box-shadow: 0 5px 16px rgba(24,43,50,.07); }
.topic-card:hover, .topic-link-card:hover, .main > .cat-grid .link-list.cols2 li:hover { border-color: #18a999; box-shadow: 0 10px 24px rgba(24,43,50,.12); }
.topic-card-title, .topic-page h1 { color: #21313a; }
.topic-card-cta, .topic-link-card span { color: #b66a2f; }
.cat-tool-btn, .side-tool-btn { background: linear-gradient(135deg, #21313a, #314751); }
.cat-tool-btn:hover, .side-tool-btn:hover { background: linear-gradient(135deg, #0b6e69, #18a999); color: #fff; text-shadow: none; }
.back-to-top { background: #21313a; }
.back-to-top:hover { background: #18a999; }

@media (max-width: 640px) {
  .banner { min-height: 82px; padding: 13px 16px; }
  .banner::before { width: 48px; height: 48px; flex-basis: 48px; }
  .site-title { font-size: 1.55rem; }
  .site-title small { font-size: .72rem; }
  .global-nav { gap: 4px; padding: 0 12px 10px; overflow-x: auto; }
  .global-nav a { flex: 0 0 auto; padding: 6px 9px; font-size: .75rem; }
}

/* ---------- TOPへ戻るボタン ---------- */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  background-color: var(--wood);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(122, 85, 51, 0.35);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease, background-color 0.2s ease;
  z-index: 1000;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background-color: var(--wood-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-3px);
}
/* 中央「本文」カラムの右下に沿わせて追従（広告レール分を差し引く）。
   3カラム=右端から 20(余白)+220(広告)+26(gap)=266px が本文右端。そこから16px内側に配置 */
@media (min-width: 861px) {
  .back-to-top { right: calc(max(0px, (100vw - 1400px) / 2) + 282px); }
  /* 広告カラムなしページ（.layout.no-aff）は本文が右端まで広がるので補正 */
  body:has(.layout.no-aff) .back-to-top { right: calc(max(0px, (100vw - 1400px) / 2) + 36px); }
}

@media (max-width: 600px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 0.7rem;
  }
}

/* ---------- サイト内検索 ---------- */
.site-search{position:absolute;right:28px;bottom:12px;display:flex;align-items:center;gap:6px;width:min(320px,26vw);padding:5px 6px 5px 10px;background:#fff;border:1px solid #dce4e2;border-radius:999px;box-shadow:0 3px 10px rgba(24,43,50,.08);z-index:10}.site-search input{min-width:0;flex:1;border:0;outline:0;color:#21313a;font:inherit;font-size:.8rem;background:transparent}.site-search button{border:0;border-radius:999px;padding:5px 10px;background:#21313a;color:#fff;font:700 .72rem inherit;cursor:pointer}.site-search-results{position:absolute;top:calc(100% + 8px);right:0;width:100%;max-height:420px;overflow:auto;padding:6px;background:#fff;border:1px solid #dce4e2;border-radius:12px;box-shadow:0 12px 30px rgba(24,43,50,.18)}.site-search-results a{display:block;padding:10px;color:#21313a;text-decoration:none;border-radius:8px}.site-search-results a:hover{background:#e7f3f1}.site-search-results strong,.site-search-results span{display:block}.site-search-results strong{font-size:.82rem}.site-search-results span{margin-top:3px;color:#71818a;font-size:.72rem;line-height:1.4}.site-search-results p{margin:10px;color:#71818a;font-size:.8rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:700px){.site-search{position:relative;right:auto;bottom:auto;width:calc(100% - 24px);margin:0 12px 12px}.site-search-results{width:100%}}