@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/************************************
** 子テーマ用スタイル
************************************/

/* ------------------------------------
   SNS シェア／フォロー 完全非表示
------------------------------------ */
.share-buttons,
.sns-share,
.sns-share-area,
.sns-follow,
.follow-buttons,
.share-button,
.entry-footer .sns-share,
.footer .sns-follow,
.header .sns-follow,
.sharedaddy,
.sd-sharing-enabled,
.sd-block,
#header .sns,
#navi .sns {
  display: none !important;
}


/* ------------------------------------
   PC・タブレットでヘッダーメニューを非表示
   （モバイルのみハンバーガー表示）
------------------------------------ */
@media (min-width: 1025px) {
  #navi,
  .navi,
  .global-nav,
  .menu-header,
  .header .menu,
  #header .menu,
  #navi-in,
  .navi-in {
    display: none !important;
  }
}


/* ------------------------------------
   クイックナビ（トップ用ボタン画像）
   ※使っていなければこのブロックごと削除OK
------------------------------------ */
.quicknav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.quicknav a {
  display: block;
  width: 180px;
  text-align: center;
  text-decoration: none;
  color: #4C4138;
  transition: transform .2s ease, box-shadow .2s ease;
}

.quicknav a img {
  width: 100%;
  border-radius: 10px;
  transition: transform .2s ease;
}

.quicknav a:hover img {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.quicknav a span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
}


/* ------------------------------------
   カテゴリーグリッド（sozaiページなどのカテゴリ一覧）
------------------------------------ */
.category-grid {
  margin: 0 auto;
  max-width: 1100px;
  padding: 20px;
  background: #ffffff;
}

.category-grid h2 {
  color: #4C4138;
  border-left: 5px solid #CBBDA3;
  padding-left: 12px;
  margin-top: 50px;
  margin-bottom: 25px;
  font-size: 20px;
  font-weight: 600;
}

.cat-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  margin-bottom: 50px;
}

.cat-item {
  display: block;
  text-align: center;
  color: #4C4138;
  text-decoration: none;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cat-item img {
  width: 100%;
  aspect-ratio: 4 / 3;  /* A4に近い比率で安定 */
  object-fit: cover;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.cat-item span {
  display: block;
  padding: 6px 6px 10px; /* ちょっと詰めた余白 */
  font-weight: 600;
  font-size: 15px;
  color: #4C4138;
}

.cat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.cat-item:hover img {
  transform: scale(1.03);
}

.cat-item:hover span {
  color: #a87b4f;
}

/* スマホベース（sozaiはこのあと個別に上書き） */
@media (max-width: 600px) {
  .cat-section {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
  }
  .cat-item span {
    font-size: 14px;
  }
}


/* ------------------------------------
   検索結果グリッド（illust専用）
   ※ search.php や archive-illust.php で使用
------------------------------------ */
.search-grid {
  list-style: none;
  margin: 24px auto 32px;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.search-card a {
  display: block;
  text-decoration: none;
}

.search-card img,
.search-card .no-thumb {
  width: 100%;
  aspect-ratio: 800 / 567; /* A4寄り比率 */
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #f6f4f1;
}

.search-card a:hover img,
.search-card a:hover .no-thumb {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.no-thumb {
  display: block;
}

/* ★スマホでも検索結果は3列表示 */
@media (max-width: 600px) {
  .search-grid {
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
  }

  .search-card img,
  .search-card .no-thumb {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
}


/* ------------------------------------
   トップページ検索窓（通常サイズ・角丸・アイコン付き）
------------------------------------ */
:root {
  --hy-text:   #4C4138;
  --hy-border: #DDD4C9;
  --hy-bg:     #FFFFFF;
  --hy-hover:  #6a5f54;
}

.home .wp-block-search,
.home .search-form {
  max-width: 420px;
  margin: 20px auto;
}

.home .wp-block-search__inside-wrapper,
.home .search-form {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--hy-border);
  border-radius: 30px;
  background: var(--hy-bg);
  padding: 6px 8px 6px 36px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.home .wp-block-search__inside-wrapper:focus-within,
.home .search-form:focus-within {
  border-color: var(--hy-text);
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.home .wp-block-search__input,
.home .search-field {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--hy-text);
  background: transparent;
  padding: 6px 0;
}

.home .wp-block-search__input::placeholder,
.home .search-field::placeholder {
  color: #9a8f84;
}

.home .wp-block-search__button,
.home .search-submit {
  border: none;
  background: var(--hy-text);
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.home .wp-block-search__button:hover,
.home .search-submit:hover {
  background: var(--hy-hover);
}

/* 虫眼鏡アイコン */
.home .wp-block-search__inside-wrapper::before,
.home .search-form::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234C4138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center/contain;
  opacity: 0.7;
}

@media (max-width: 480px) {
  .home .wp-block-search,
  .home .search-form {
    max-width: 90%;
  }
  .home .wp-block-search__button,
  .home .search-submit {
    font-size: 12px;
    padding: 6px 10px;
  }
}


/* ------------------------------------
   トップ4項目ポータル（イラスト／壁面／教材／ショップ）
   - デフォルト：横4つで1行表示
   - iPhone縦向き：2列×2行
   - 枠・角丸・影・テキストあり
------------------------------------ */
.home .top-portal {
  max-width: 1100px;
  margin: 24px auto 40px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* デフォルトで4列 */
  gap: 24px;
}

.home .top-portal .portal-item {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4C4138;
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home .top-portal .portal-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.28s ease;
}

.home .top-portal .portal-item span {
  display: block;
  padding: 12px 8px 14px;
  font-weight: 600;
  font-size: 15px;
  color: #4C4138;
}

.home .top-portal .portal-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.home .top-portal .portal-item:hover img {
  transform: scale(1.03);
}

/* iPhone縦向きだけは2列×2行 */
@media screen and (max-width: 600px) and (orientation: portrait) {
  .home .top-portal {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .home .top-portal .portal-item span {
    font-size: 14px;
    padding: 8px 6px 10px;
  }
}


/* ------------------------------------
   日付表示の制御
   - 基本：全ページで日付非表示
   - ブログ個別記事（post の single）のみ表示
------------------------------------ */
.entry-date,
.post-date,
.date-tags,
.updated,
.entry-meta .posted-on,
.entry-meta .updated,
.date-tags .fa-clock-o {
  display: none !important;
}

body.single.post .entry-date,
body.single.post .post-date,
body.single.post .date-tags,
body.single.post .entry-meta .posted-on,
body.single.post .date-tags .fa-clock-o {
  display: inline-block !important;
}


/* ------------------------------------
   トップページ用ロゴ
------------------------------------ */
.home .top-logo {
  text-align: center;
  margin: 16px auto 8px;
}

.home .top-logo-wrap {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.home .top-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ------------------------------------
   固定ページ：投稿者名などを非表示
------------------------------------ */
.page .author-info,
.page .author,
.page .entry-author,
.page .author-name,
.page .post-author,
.page .entry-footer,
.page .author-box {
  display: none !important;
}


/* ------------------------------------
   月別などカテゴリーカード全体の背景を真っ白に
------------------------------------ */
.category-grid,
.category-grid .cat-section {
  background: #ffffff !important;
}


/* ------------------------------------
   sozaiページ専用：カテゴリカードのグリッド調整
   （ページスラッグが sozai 前提）
------------------------------------ */
.page-slug-sozai .cat-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.page-slug-sozai .cat-item span {
  font-size: 13px;
  padding: 4px 4px 8px !important;
}

/* スマホ縦でもカードを詰める */
@media (max-width: 600px) {
  .page-slug-sozai .cat-section {
    gap: 10px;
  }
}

/* スマホ横：sozaiページで4列 */
@media screen and (max-width: 900px) and (orientation: landscape) {
  .page-slug-sozai .cat-section {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
}


/************************************
** 新着イラストスライダー
************************************/
.hy-illust-slider {
  position: relative;
  max-width: 1100px;
  margin: 24px auto 40px;
  padding: 0 32px;  /* 矢印分の左右余白 */
  box-sizing: border-box;
  background: #ffffff;  /* スライダー全体の背景を白にする */
}

/* 横スクロール領域 */
.hy-illust-track {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 8px;
  scrollbar-width: none;           /* Firefox スクロールバー非表示 */
}
.hy-illust-track::-webkit-scrollbar {
  display: none;                   /* Chrome / Safari スクロールバー非表示 */
}

/* 各サムネイル */
.hy-illust-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  box-sizing: border-box;
}

/* デフォルト幅（PC想定）：約7枚見えるイメージ */
.hy-illust-item {
  width: 14.285%;  /* 100 / 7 ≒ 14.29% */
}

/* 画像 */
.hy-illust-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background: #f6f4f1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hy-illust-item:hover img {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ナビゲーション矢印ボタン */
.hy-illust-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #4C4138;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.hy-illust-prev { left: 4px; }
.hy-illust-next { right: 4px; }

.hy-illust-nav:hover {
  background: #f0ebe5;
}

/* ブレイクポイント */

/* スマホ縦：4枚見える（幅25%） */
@media (max-width: 599px) {
  .hy-illust-slider {
    margin: 16px auto 28px;
    padding: 0 28px;
  }
  .hy-illust-item {
    width: 25%;   /* 4枚見える */
  }
  .hy-illust-nav {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
}

/* スマホ横〜タブレット：5枚程度見える（幅20%） */
@media (min-width: 600px) and (max-width: 1023px) {
  .hy-illust-item {
    width: 20%;   /* 5枚見える */
  }
}


/* =========================================================
 * テキストカテゴリーリンク一覧（イラストAC風）
 * =======================================================*/
.hy-category-text-links {
  max-width: 900px;
  margin: 20px auto 32px;
  padding: 0 16px;
  font-size: 15px;
  color: #4C4138;
}

.hy-category-text-links h2 {
  font-size: 16px;         /* 本文サイズと同じ程度 */
  margin: 24px 0 8px;
  font-weight: normal;
  padding-bottom: 4px;
  border-bottom: 1px solid #d0d0d0;
  background: none !important;
}

.hy-category-text-links p {
  margin: 4px 0 12px;
  line-height: 1.9;
}

.hy-category-text-links a {
  color: #7a7268;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
}

.hy-category-text-links a:hover {
  background: #f5f2ee;
  color: #4C4138;
  text-decoration: underline;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .hy-category-text-links {
    font-size: 14px;
  }
  .hy-category-text-links h2 {
    font-size: 16px;
  }
}


/* トップページだけアイキャッチを消す */
.home .eyecatch,
.home .entry-eyecatch,
.home .entry-header .eye-catch {
  display: none !important;
}


/************************************
** イラスト素材 個別ページのセンタリング調整
************************************/
body.single-illust #main,
body.single-illust #main .main {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

body.single-illust .entry-content {
  text-align: center;
}

body.single-illust .entry-content p {
  text-align: left;
}

body.single-illust .entry-content img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/************************************
** イラスト素材：アイキャッチだけ中央寄せ
************************************/
body.single-illust .eye-catch {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

body.single-illust .eye-catch img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/****************************************
 * イラストカテゴリー一覧（illust-grid用）
 * - 親・子カテゴリー共通で使える想定
 * - PC：自動で列数増える
 * - iPhone縦：3列表示
 ****************************************/

/* 基本のグリッドレイアウト */
.archive.category .illust-archive .illust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 16px auto 32px;
  padding: 0 8px;
  box-sizing: border-box;
}

/* 各サムネイルリンク */
.archive.category .illust-archive .illust-item {
  display: block;
}

/* 画像をカードっぽく */
.archive.category .illust-archive .illust-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background: #f6f4f1;
}

/* 📱 iPhone縦：3列固定 */
@media (max-width: 600px) {
  .archive.category .illust-archive .illust-grid {
    grid-template-columns: repeat(3, 1fr);  /* ← 3列に固定 */
    gap: 8px;
    padding: 0 4px;
  }
}




/************************************
 * ページネーション 共通調整（フルリセット版）
 * 横並びセンタリング＋丸ボタン
 ************************************/

/* ▼ まず Cocoon 側の装飾を全部リセット */
.pagination,
.pagination .nav-links,
.page-numbers,
.pagination *,
.pagination .nav-links *,
.page-numbers * {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background-image: none !important;
}

/* ▼ 横並び＆中央寄せ */
.pagination,
.pagination .nav-links,
.page-numbers {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 8px;
  margin: 24px auto 32px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* li がある場合のリセット */
.page-numbers li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ▼ 丸ボタンの見た目（数字・現在ページ・前後ボタンすべて） */
.page-numbers a,
.page-numbers span {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  color: #4C4138;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}

/* ▼ 念のため、擬似要素も完全無効化 */
.page-numbers a::before,
.page-numbers a::after,
.page-numbers span::before,
.page-numbers span::after {
  content: none !important;
  display: none !important;
}

/* ▼ 現在ページだけ色を変える */
.page-numbers .current,
.page-numbers span.current {
  background: #f7eee3;
  font-weight: 600;
}

/* ▼ ホバー（PC用） */
.page-numbers a:hover {
  background: #f3e8da;
}

/* ▼ …（ドット）が出る場合用 */
.page-numbers .dots {
  background: transparent !important;
}

/* ▼ スマホでは少し余白を詰める */
@media (max-width: 768px) {
  .pagination,
  .pagination .nav-links,
  .page-numbers {
    margin: 16px auto 24px !important;
  }
}


/************************************
 * FAQ（よくある質問） 丸デザイン
************************************/

/* FAQ 全体のコンテナ */
.faq-list {
  max-width: 900px;
  margin: 30px auto 40px;
  padding: 0 16px;
}

/* 1つ1つのQ&Aカード */
.faq-item {
  display: block !important;          /* ← 横並び防止（テーマのflex/gridを上書き） */
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid #f2ece6;
}

/* 質問部分（クリック範囲） */
.faq-question {
  width: 100%;
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: none;
  outline: none;
  font-size: 15px;
  color: #4C4138;
  text-align: left;
  box-sizing: border-box;
}

/* 左側：Q. の丸ラベル */
.faq-q-label {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f3e7d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #4C4138;
  margin-right: 4px;
}

/* 質問テキスト */
.faq-q-text {
  flex: 1 1 auto;
  font-weight: 600;
}

/* 右側：∨ / ∧ アイコン */
.faq-toggle-icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: #b3a293;
}

/* 質問ホバー時（PC） */
.faq-question:hover {
  background: #fdf8f2;
}

/* 回答部分（必ず「下」に出す） */
.faq-answer {
  display: none;                      /* 初期は非表示。JSで block に切り替え */
  padding: 0 18px 14px;
  font-size: 14px;
  color: #4C4138;
  line-height: 1.8;
  background: #ffffff;
  border-top: 0px dashed #ecdccd;
  box-sizing: border-box;
}

/* 開いているときのカード強調（お好みで） */
.faq-item.is-open {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

/* スマホ調整 */
@media (max-width: 600px) {
  .faq-list {
    margin: 20px auto 32px;
    padding: 0 12px;
  }
  .faq-question {
    padding: 12px 14px;
    font-size: 14px;
  }
  .faq-answer {
    padding: 0 14px 12px;
    font-size: 13px;
  }
}

/************************************
 * FAQページ内検索ボックス
************************************/
.faq-search-wrap {
  max-width: 480px;
  margin: 16px auto 24px;
  text-align: center;
}

.faq-search-wrap input[type="text"] {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #ddd2c4;
  background: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
  color: #4C4138;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.faq-search-wrap input[type="text"]::placeholder {
  color: #b3a9a0;
}

.faq-search-wrap input[type="text"]:focus {
  outline: none;
  border-color: #4C4138;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}



/* 回答のA. マーク（○ / × / △ など） */
.faq-a-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 50%;
  color: #fff;
}

/* OK（○） */
.faq-a-mark.ok {
  background-color: #8ec97a;   /* 緑 */
}

/* だめ（×） */
.faq-a-mark.ng {
  background-color: #e38b8b;   /* 赤 */
}

/* どちらとも言えない（△） */
.faq-a-mark.triangle {
  background-color: #e2c37b;   /* 黄色 */
}




/************************************
 * Contact Form 7 フォーム丸デザインセット
 ************************************/

/* ▼ フォーム全体をカード風にする（好みなら外せる） */
.wpcf7 form {
  background: #ffffff;
  padding: 24px 20px;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.06);
  border: 1px solid #f2ece6;
  max-width: 680px;
  margin: 0 auto;
}

/* ▼ テキスト入力欄・メール入力欄・テキストエリア */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #ddd2c4;
  padding: 12px 14px;
  background: #fffdf9;
  font-size: 15px;
  color: #4C4138;
  box-sizing: border-box;
  margin-bottom: 14px;
  transition: 0.2s ease;
}

/* フォーカス時（クリックした時） */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 textarea:focus {
  border-color: #c8b8a6;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(210,198,183,0.2);
}

/* ▼ 送信ボタン */
.wpcf7 input[type="submit"] {
  background: #4C4138;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin-top: 10px;
  transition: background 0.25s, transform 0.15s;
}

/* ホバー時（PC） */
.wpcf7 input[type="submit"]:hover {
  background: #6a5a4d;
  transform: translateY(-1px);
}

/* クリック時 */
.wpcf7 input[type="submit"]:active {
  transform: translateY(1px);
}

/* ▼ Placeholders（プレースホルダー文字色） */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: #b8afa8;
}

/* ▼ フォームのラベル（項目名） */
.wpcf7 label {
  font-weight: 600;
  color: #4C4138;
  margin-bottom: 6px;
  display: block;
}

/************************************
 * 入力エラーも柔らかくする
 ************************************/
/* エラー枠（赤を優しいピンクに） */
.wpcf7-not-valid {
  border-color: #f2c7c7 !important;
  background: #fff7f7 !important;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: #b85c5c !important;
  font-size: 13px !important;
}

/************************************
 * 送信後のメッセージ（前に作ったやつ）
 ************************************/
.wpcf7-response-output {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  border-width: 2px !important;
  color: #4C4138 !important;
}

/* 成功 */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #eadfd2 !important;
  background: #fffaf5 !important;
}

/* エラー */
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: #f2c7c7 !important;
  background: #fff4f4 !important;
  color: #b85c5c !important;
}





/************************************
 * イラストカードの比率をそろえる
 * （トップの新着スライダー＋カテゴリーページ共通）
************************************/

/* 枠（横：縦 = 4:3 で固定） */
.hy-illust-item,
.archive.category .illust-archive .illust-item {
  position: relative;
  aspect-ratio: 4 / 3;        /* A4横に近い比率で固定 */
  background: #f6f4f1;
  border-radius: 10px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

/* 画像は枠の中に「収まる」ように（トリミングしない） */
.hy-illust-item img,
.archive.category .illust-archive .illust-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;   /* 画像を切らずに全体を表示 */
  display: block;
  border-radius: 0;      /* 角丸は枠側に任せる */
  box-shadow: none;      /* 影も枠側に任せる */
  background: transparent;
}

/* ホバー時の少し浮く感じ（お好みで） */
.hy-illust-item:hover,
.archive.category .illust-archive .illust-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}