/*
Theme Name: XWRITE child
Version: 1.0.0
Template: xwrite
*/

/* =========================================
   投稿ページ：アイキャッチ（切らない・中央寄せ）
========================================= */
.single-post .post-thumbnail,
.single-post .featured-image {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.single-post .post-thumbnail img,
.single-post .featured-image img {
  display: block;
  width: 100%;
  height: auto;         /* 比率維持 */
  object-fit: contain;  /* 画像を切らない */
}

/* =========================================
   一覧・関連記事：行間を揃えつつ“切らない”
========================================= */

/* グリッド間隔を統一（トップ/一覧/関連記事） */
.articleList.articleListGrid,
.articleList.articleListRelation {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px 20px !important;  /* 行間×列間 */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* カードのレイアウトを安定させる */
.articleList .articleList__item,
.articleFooter__relation .articleList__item {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
}

/* サムネ枠：高さ固定（行の高さを揃える） */
.articleList .articleList__item--fig,
.articleFooter__relation .articleList__item--fig {
  width: 100%;
  height: 220px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #fff;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}
.articleList .articleList__item--fig::before,
.articleFooter__relation .articleList__item--fig::before {
  content: none !important;
}

/* サムネ画像：切らずに収める（中央） */
.articleList .articleList__item--fig img,
.articleFooter__relation .articleList__item--fig img {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* スマホ時の高さ調整 */
@media (max-width: 767px) {
  .articleList .articleList__item--fig,
  .articleFooter__relation .articleList__item--fig {
    height: 160px;
  }
}

/* カード内のテキスト余白 */
.xw-article-media__body,
.articleList .xw-article-media__body {
  margin-top: 6px !important;
}
.xw-article-media__body--title,
.articleList__item--title {
  margin: 4px 0 !important;
  line-height: 1.4;
}
.article-meta {
  margin-top: 4px !important;
}

/* 関連イラスト見出しと下のカードの間隔 */
.articleFooter__relation {
  margin-top: 20px !important;
  padding-top: 0 !important;
}
.articleFooter__relation .caption {
  margin-bottom: 8px !important;
}

/* 記事ページの「前へ/次へ」プレビューも切らない */
.articlePager__body--fig {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}
.articlePager__body--fig > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =========================================
   トップ・一覧の“最初の行の上”余白を抑える
========================================= */
.home .site-main,
.archive .site-main,
.blog .site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.home .site-main > *:first-child,
.archive .site-main > *:first-child,
.blog .site-main > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================
   サイドバー：カテゴリ一覧（中央寄せ・カード風）
========================================= */
.sozai_category ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sozai_category ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.sozai_category ul li a:hover {
  border-color: #cfd4da;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.sozai_category ul li img {
  display: block;
  height: auto;
  transition: opacity .2s ease;
}
.sozai_category ul li a:hover img { opacity: .8; }

/* =========================================
   サイドバー：外部リンク／ご利用案内
========================================= */
.sozai_links,
.sozai_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sozai_links img,
.sozai_info img {
  display: block;
  height: auto;
  transition: opacity .2s ease;
}
.sozai_links a:hover img,
.sozai_info a:hover img {
  opacity: .8;
}

/* =========================================
   タグクラウド（中央寄せ）
========================================= */
.widget_tag_cloud .tagcloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}
.widget_tag_cloud .tagcloud a {
  display: inline-block;
  line-height: 1.2;
  text-decoration: none;
}


/* =====================================================
   Download Monitor ボタン化（修正版：本文中央寄せ解除版）
===================================================== */

/* ボタン本体 */
a.download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 12px 20px;
  border-radius: 9999px;
  background: #e38187 !important;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  border: none;
  line-height: 1.2;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: filter .2s, transform .02s;
  text-align: center;
  margin: 0 auto;
}

/* アイコン */
a.download-link::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f019";
  margin-right: .4em;
}

/* ホバー反応 */
a.download-link:hover { filter: brightness(.95); }
a.download-link:active { transform: translateY(1px); }

/* ↓↓↓ 修正箇所 ↓↓↓ */

/* 本文を中央寄せしない */
.articleBody {
  text-align: inherit !important;
}

/* ボタンのみ中央配置 */
.articleBody a.download-link {
  display: block;
  width: max-content;
  margin: 0 auto;
}

/* 固定ページの本文は常に左寄せ */
.page .articleBody {
  text-align: left !important;
}

/* スマホ時：ボタン幅いっぱい */
@media (max-width: 768px) {
  a.download-link {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    background: #e38187 !important;
    color: #fff !important;
  }
}








/* =========================================
   Contact Form 7 スタイル＋レスポンシブ最適化
   （全体トーンを薄いグレー基調に統一）
========================================= */

.contact-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  font-size: clamp(15px, 2.2vw, 16px);
  line-height: 1.7;
  color: #333;
}

.contact-form .form-item {
  margin-bottom: 20px;
}

.contact-form label {
  display: inline-block;
  margin-bottom: 6px;
  font-weight: 700;
}

.contact-form .required {
  color: #e35a5a;
  font-size: 0.9em;
  margin-left: 0.3em;
}

/* ----------------------------------------
   入力フィールド（text / email / textarea）
---------------------------------------- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f7f7f7;        /* 背景：薄いグレー */
  color: #333;
  box-sizing: border-box;
  font-size: 1em;
  transition: border-color 0.2s, background-color 0.2s;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: #e38187;
  background: #fff;           /* フォーカス時は白く明るく */
  outline: none;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* ----------------------------------------
   ラジオボタン（カードスタイル）
---------------------------------------- */
.contact-form .wpcf7-radio {
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .contact-form .wpcf7-radio {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-form .wpcf7-list-item {
  margin: 0;
}

.contact-form .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f7f7f7;        /* ← 薄い灰色に変更 */
  color: #333;
  cursor: pointer;
  min-height: 48px;
  transition: 0.2s;
}

/* チェック時の強調 */
@supports selector(label:has(input:checked)) {
  .contact-form .wpcf7-list-item label:has(input:checked) {
    border-color: #e38187;
    background: #fff;          /* 選択時は白くして枠で強調 */
    box-shadow: 0 0 0 2px rgba(227,129,135,0.15) inset;
  }
}

/* フォーカスやホバー時 */
.contact-form .wpcf7-list-item label:hover {
  border-color: #e38187;
  background: #fff;
}

/* ラジオボタン本体 */
.contact-form .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #e38187; /* 対応ブラウザでは枠色反映 */
}

/* ----------------------------------------
   送信ボタン
---------------------------------------- */
.contact-form .form-submit {
  margin-top: 24px;
  text-align: center;
}

.contact-form input[type="submit"] {
  display: inline-block;
  width: min(100%, 360px);
  padding: 14px 18px;
  border: none;
  border-radius: 30px;
  font-size: 1.05em;
  background-color: #e38187;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form input[type="submit"]:hover {
  background-color: #d16c71;
}

/* ----------------------------------------
   スマホ最適化
---------------------------------------- */
@media (max-width: 480px) {
  .contact-form {
    padding: 0 14px;
  }
  .contact-form .form-item {
    margin-bottom: 18px;
  }
  .contact-form input[type="submit"] {
    width: 100%;
  }
}






/* =========================================
   トップメニュー専用フォント（Zen Maru Gothic Bold）
   ※ ローカルフォント使用：外部通信ゼロ
========================================= */

/* フォント宣言 */
@font-face {
  font-family: "Zen Maru Gothic Local";
  src: url("/wp-content/uploads/fonts/ZenMaruGothic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* メニュー全体に適用 */
header#header .gnav .gNavList a,
header#header .gnav .gNavList .menu-item-title {
  font-family: "Zen Maru Gothic Local", "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: #333;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ホバー時・選択中メニューのカラー */
header#header .gnav .gNavList a:hover,
header#header .gnav .gNavList .current-menu-item a {
  color: #e3b500; /* サイトのアクセント色に合わせた黄系 */
}