/* =========================================
   Home (固定フロント) 共通設定
========================================= */
:root {
  --tw-text: #3f1f07;
  --tw-heading-color: #3f1f07;
  --tw-home-font-size: 1rem;
  --tw-home-line-height: 1.7;
  --tw-lead-font-size: 0.90rem;
  --tw-lead-line-height: 1.9;
}

/* ヒーローと本文エリアの基本文字設定 */
body.home :is(.top-hero, .front-content) {
  color: var(--tw-text) !important;
  font-size: var(--tw-home-font-size) !important;
  line-height: var(--tw-home-line-height) !important;
}

/* 見出し色 */
body.home :is(.top-hero, .front-content) :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  color: var(--tw-heading-color) !important;
}

/* Gutenberg の文字色指定を本文色へ戻す */
body.home :is(.top-hero, .front-content) :is(.has-text-color, .has-link-color) {
  color: var(--tw-text) !important;
}

/* Gutenberg のサイズユーティリティを等倍化 */
body.home :is(.top-hero, .front-content)
  :is(.has-small-font-size, .has-medium-font-size, .has-large-font-size, .has-x-large-font-size) {
  font-size: 1em !important;
}

/* 通常リンクは本文色を継承 */
body.home :is(.top-hero, .front-content) a {
  color: inherit !important;
  text-decoration: underline;
}

/* ボタン文字だけ白を維持 */
body.home :is(.top-hero, .front-content)
  :is(.wp-block-button__link, .wp-element-button, .button, [class*="button"]) {
  color: #fff !important;
}

/*ボタン*/
body.front-page .dictionary-buttons {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin: 1.5em auto;
}

body.front-page .dictionary-btn {
  display: block;
  text-decoration: none;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

body.front-page .dictionary-btn:hover {
  background-color: #e0e0e0;
}

/* =========================================
   Home タイル（ナビゲーション）
========================================= */

.dictionary-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  margin: 1.2rem 0 1.8rem;
}

.dictionary-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  text-decoration: none;
  min-height: 95px;
}

.dictionary-btn .tw-tile-title {
  font-weight: 700;
  line-height: 1.5;
}

.dictionary-btn .tw-tile-desc {
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.6;
  font-weight: 400 !important;
  opacity: 0.88;
}

/* =========================================
   Home: Welcome直下の導入文
   .lead-intro を段落・グループどちらに付けても効くようにする
========================================= */
body.home :is(.front-content, .entry-content) .lead-intro {
  font-size: var(--tw-lead-font-size) !important;
  line-height: var(--tw-lead-line-height) !important;

  /* 変数ベースのテーマ対策 */
  --wp--preset--font-size--small: var(--tw-lead-font-size);
  --wp--preset--font-size--medium: var(--tw-lead-font-size);
  --wp--preset--font-size--large: var(--tw-lead-font-size);
  --wp--preset--font-size--x-large: var(--tw-lead-font-size);
}

/* .lead-intro 内の代表的要素も親に揃える */
body.home :is(.front-content, .entry-content) .lead-intro :is(
  p,
  li,
  a,
  strong,
  em,
  .wp-block-group__inner-container p
) {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* .lead-intro 内の Gutenberg サイズ指定も無効化 */
body.home :is(.front-content, .entry-content) .lead-intro :is(
  .has-small-font-size,
  .has-medium-font-size,
  .has-large-font-size,
  .has-x-large-font-size
) {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* =========================
   Front Page layout fix
   ========================= */

.content-area.with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;

  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}

.content-area.with-sidebar > #main-content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.content-area.with-sidebar > #secondary,
.content-area.with-sidebar > .widget-area,
.content-area.with-sidebar > aside,
.content-area.with-sidebar > .sidebar {
  width: 280px;
  max-width: 280px;
  min-width: 0;
  margin: 0;
}

.content-area.with-sidebar img,
.content-area.with-sidebar iframe,
.content-area.with-sidebar table {
  max-width: 100%;
}