/* ===============================================
   フロントページ専用CSS
   ターゲット: #87スタイル（クリーム×ゴールド）
   =============================================== */

/* Cocoonのサイドバーをフロントページで非表示 */
.front-top-page #container > .content > .content-in > .sidebar,
.front-top-page .sidebar,
.home.blog .sidebar {
  display: none !important;
}

/* フロントページのmain幅をフル幅に */
.front-top-page .main,
.home.blog .main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* content-inのpadding削除（フル幅化） */
.front-top-page #content-in,
.home.blog #content-in {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ---- ヒーロー ---- */
.fp-hero-wrap {
  width: 100%;
  background-color: #FAF7F0;
}
.fp-hero {
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  min-height: 260px;
  display: flex;
  align-items: center;
  padding: 60px 5%;
}
.fp-hero__title {
  font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝","Yu Mincho",serif;
  font-size: 2em;
  color: #3A2E25;
  line-height: 1.55;
  margin: 0 0 14px;
  font-weight: 700;
}
.fp-hero__title span {
  font-size: 0.76em;
  color: #6B5A46;
  display: block;
  margin-top: 6px;
}
.fp-hero__desc {
  font-size: 0.88em;
  color: #7A6A5A;
  line-height: 1.9;
  margin: 0;
  font-family: sans-serif;
}

/* ---- カテゴリグリッド ---- */
.fp-cats-wrap {
  width: 100%;
  background: #fff;
  border-top: 1px solid #EDE6DA;
  border-bottom: 1px solid #EDE6DA;
  padding: 24px 0;
}
.fp-cats__inner {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 16px;
}
.fp-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 1px solid #EDE6DA;
  border-radius: 10px;
  padding: 18px 12px 12px;
  flex: 1;
  max-width: 120px;
  background: #FDFAF6;
  transition: all 0.2s;
}
.fp-cat-item:hover {
  border-color: #C4974A;
  background: #FDF8EE;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(196,151,74,0.15);
  text-decoration: none;
}
.fp-cat-item__icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.fp-cat-item__icon img { width: 50px; height: 50px; object-fit: contain; }
.fp-cat-item__name { font-size: 0.9em; font-weight: 700; color: #3A2E25; font-family: sans-serif; }
.fp-cat-item__link { font-size: 0.72em; color: #C4974A; font-family: sans-serif; }

/* ---- メインボディ（2カラム） ---- */
.fp-body-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px 16px 60px;
}
.fp-main-col { min-width: 0; }

/* ---- セクション ---- */
.fp-section { margin-bottom: 40px; }
.fp-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #C4974A;
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.fp-section__title {
  font-family: "ヒラギノ明朝 Pro","游明朝",serif;
  font-size: 1.05em;
  color: #3A2E25;
  margin: 0;
}
.fp-section__more { font-size: 0.82em; color: #C4974A; text-decoration: none; font-family: sans-serif; }
.fp-section__more:hover { text-decoration: underline; }

/* ---- 記事グリッド（4列） ---- */
.fp-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.fp-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.fp-card:hover { text-decoration: none; }
.fp-card:hover .fp-card__title { color: #C4974A; }
.fp-card__thumb {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #EDE6DA;
  margin-bottom: 8px;
}
.fp-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-card__no-img { width: 100%; height: 100%; background: linear-gradient(135deg,#F5ECD7,#EDE0C8); }
.fp-card__cat {
  position: absolute;
  top: 8px; left: 8px;
  background: #C4974A;
  color: #fff;
  font-size: 0.68em;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: sans-serif;
}
.fp-card__title { font-size: 0.83em; color: #3A2E25; line-height: 1.5; font-family: sans-serif; margin-bottom: 4px; transition: color 0.2s; }
.fp-card__date { font-size: 0.74em; color: #9C8672; font-family: sans-serif; }

.fp-empty { color: #9C8672; font-size: 0.9em; font-family: sans-serif; padding: 20px 0; }

/* ---- バナー ---- */
.fp-banner {
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #F5ECD7;
  margin-bottom: 40px;
}
.fp-banner__inner { padding: 28px 36px; }
.fp-banner__tag { display: inline-block; background: #C4974A; color: #fff; font-size: 0.72em; padding: 2px 10px; border-radius: 3px; font-family: sans-serif; margin-bottom: 8px; }
.fp-banner__copy { font-family: "ヒラギノ明朝 Pro","游明朝",serif; font-size: 1.05em; color: #3A2E25; margin: 0 0 4px; }
.fp-banner__sub { font-size: 0.82em; color: #6B5A46; font-family: sans-serif; margin: 0; }

/* ---- サイドバー ---- */
.fp-side-col { min-width: 0; }
.fp-widget { background: #fff; border: 1px solid #EDE6DA; border-radius: 10px; padding: 20px; margin-bottom: 24px; }
.fp-widget__ttl { font-family: "ヒラギノ明朝 Pro","游明朝",serif; font-size: 0.93em; color: #3A2E25; border-bottom: 2px solid #C4974A; padding-bottom: 8px; margin-bottom: 14px; font-weight: 700; }
.fp-widget__sub { font-size: 0.78em; color: #9C8672; font-family: sans-serif; margin: -6px 0 10px; }
.fp-empty-sm { font-size: 0.83em; color: #9C8672; font-family: sans-serif; }

.fp-rank { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F2EDE4; text-decoration: none; color: inherit; }
.fp-rank:last-child { border-bottom: none; }
.fp-rank:hover .fp-rank__ttl { color: #C4974A; }
.fp-rank__n { min-width: 22px; height: 22px; background: #C4974A; color: #fff; font-size: 0.76em; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: sans-serif; font-weight: 700; flex-shrink: 0; }
.fp-rank__img { width: 56px; height: 42px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.fp-rank__img img { width: 100%; height: 100%; object-fit: cover; }
.fp-rank__ttl { font-size: 0.81em; color: #3A2E25; line-height: 1.5; font-family: sans-serif; transition: color 0.2s; }

.fp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-tags a { font-size: 0.76em !important; background: #F5ECD7; color: #6B5A46 !important; border: 1px solid #EDE6DA; border-radius: 20px; padding: 3px 12px; text-decoration: none; font-family: sans-serif; transition: all 0.2s; }
.fp-tags a:hover { background: #C4974A !important; color: #fff !important; border-color: #C4974A; }

/* ===============================================
   レスポンシブ
   =============================================== */
@media screen and (max-width: 1023px) {
  .fp-body-wrap { grid-template-columns: 1fr; }
  .fp-side-col { display: none; }
}
@media screen and (max-width: 834px) {
  .fp-hero { padding: 40px 5%; min-height: 200px; }
  .fp-hero__title { font-size: 1.5em; }
  .fp-grid4 { grid-template-columns: repeat(2,1fr); }
  .fp-cats__inner { flex-wrap: wrap; }
  .fp-cat-item { min-width: 80px; max-width: 22%; }
}
@media screen and (max-width: 480px) {
  .fp-hero__title { font-size: 1.2em; }
  .fp-cat-item { max-width: 44%; }
}