/* スコープ */
.custom-homepage {
  --accent: #ff7fa1;
  --ink: #63515b;
  --bg: #fffaf0;
  color: var(--ink);
  background-color: var(--bg);
  font-family: "M PLUS Rounded 1c", sans-serif;
  padding: 20px;
  box-sizing: border-box;
}
.custom-homepage *, .custom-homepage *::before, .custom-homepage *::after {
  box-sizing: inherit;
}

/* ヘッダー */
.custom-homepage header {
  position: relative;
  background-image: url('https://ouhi-spirituel.com/wp-content/uploads/2025/01/IMG_1525-1.jpeg'); /* ←好きな写真URL */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 240px;                /* 高さ調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  padding: 0;                   /* 上下padding不要（中央寄せにするため） */
  text-align: center;
  color: #fff;                  /* 文字は白 */
}

/* 半透明オーバーレイ */
.custom-homepage header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* background: rgba(0, 0, 0, 0.4); 黒の半透明 */
  z-index: 0;
}

/* タイトル */
.custom-homepage header h1 {
  position: relative;
  z-index: 1;                  /* オーバーレイの上に表示 */
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.05em;
  color: #fff;                  /* 白文字固定 */
}

/* セクションタイトル */
.custom-homepage section h2 {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  margin-bottom: 16px;
}

/* ===== お知らせ：シンプル版 ===== */
.custom-homepage .news-section { margin: 32px 0 20px; }
.custom-homepage .news-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.custom-homepage .news-list__item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed #f1d2dc;
  font-size: 2.0rem;
}
.custom-homepage .news-list__item:last-child {
  border-bottom: none;
}
.custom-homepage .news-list__date {
  color: #8b5e3c;
  font-size: 1.92rem;
  white-space: nowrap;
  min-width: 6.5em; /* 2025.08.01 程度 */
}
.custom-homepage .news-list__title {
  color: var(--ink);
  text-decoration: underline;
  line-height: 1.5;
}
.custom-homepage .news-list__title:hover {
  color: var(--accent);
}

/* もっと見る */
.custom-homepage .news-more { text-align: center; margin-top: 8px; }
.custom-homepage .news-more__button {
  display: inline-block;
  background-color: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: bold;
}
.custom-homepage .news-more__button:hover { background-color: #e06f92; }

/* プロフィール（既存の2カラム） */
.custom-homepage #profile { display: block; margin-bottom: 40px; }
.custom-homepage #profile .profile-wrap {
  display: grid; grid-template-columns: 1fr 5fr; gap: 20px; align-items: start; margin-top: 20px;
}
.custom-homepage #profile .profile-image { min-width: 0; text-align: center; }
.custom-homepage #profile .profile-image img {
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 50%; border: 5px solid var(--accent); height: auto;
}
.custom-homepage #profile .profile-text { line-height: 1.8; }
.custom-homepage #profile .profile-text p { margin: 10px 0; }
@media (max-width: 768px) {
  .custom-homepage #profile .profile-wrap {
    grid-template-columns: minmax(72px, 30%) 1fr; column-gap: 12px; row-gap: 8px; margin-top: 12px;
  }
  .custom-homepage #profile .profile-image img { width: clamp(64px, 28vw, 120px); height: auto; max-width: none; }
  .custom-homepage #profile .profile-text { line-height: 1.7; }
}
@media (max-width: 360px) {
  .custom-homepage #profile .profile-wrap { grid-template-columns: 1fr; }
  .custom-homepage #profile .profile-image img { width: 120px; margin: 0 auto; }
}

/* セッション内容 */
.custom-homepage #sessions p { margin: 10px 0; }

/* セッション内容のリストにピンクの点を適用 */
.custom-homepage #sessions ul {
  margin-top: 20px;
  padding-left: 1.2em;
  list-style: disc; /* 丸点 */
}

.custom-homepage #sessions ul li::marker {
  color: var(--accent); /* 既存のピンク変数を使用 */
  font-size: 1.1em;     /* 点を少し大きくする（任意） */
}

/* サービスメニュー */
.custom-homepage #services { margin-top: 20px; }
.custom-homepage #services .services-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.custom-homepage #services .service-card {
  text-align: center; background-color: var(--bg); border: 2px solid var(--accent);
  border-radius: 12px; padding: 12px; flex: 1 1 calc(33.333% - 20px); box-sizing: border-box;
}
.custom-homepage #services .service-card img {
  width: 100%; height: 200px; object-fit: cover; border-radius: 6px; display: block; margin: 0 auto 8px;
}
@media (max-width: 768px) { .custom-homepage #services .service-card { flex: 1 1 100%; } }

/* 予約案内 */
.custom-homepage #booking { text-align: center; margin-top: 40px; margin-bottom: 20px; }
.custom-homepage #booking a { color: var(--accent); text-decoration: underline; }

/* フローティングCTA */
.custom-homepage .floating-cta {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
  background-color: rgba(255,255,255,.95); padding: 14px 24px; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 14px; min-width: 280px;
}
.custom-homepage .floating-cta .cta-button {
  display: inline-block; background-color: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: 8px; text-decoration: none; font-weight: bold; white-space: nowrap; width: 100%; text-align: center;
}
.custom-homepage .floating-cta .socials { display: flex; gap: 16px; justify-content: center; }
.custom-homepage .floating-cta .socials a {
  display: flex; align-items: center; justify-content: center; background-color: var(--accent);
  color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 22px; transition: background-color .2s ease;
}
.custom-homepage .floating-cta .socials a:hover { background-color: #e06f92; }
.custom-homepage .page-bottom-spacer { height: 100px; }

/* SNS別カラー */
.custom-homepage .floating-cta .socials a.instagram {
  background-color: #E4405F; /* Instagram */
}
.custom-homepage .floating-cta .socials a.facebook {
  background-color: #1877F2; /* Facebook */
}
/* Amebaボタン（文字バージョン） */
.custom-homepage .floating-cta .socials a.ameba {
  background-color: #2ECC71; /* Amebaの緑 */
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}
.custom-homepage .floating-cta .socials a.ameba:hover {
  background-color: #27ae60; /* hover時の濃い緑 */
}
.custom-homepage .floating-cta .socials a.line {
  background-color: #00B900; /* LINE */
}

/* hover時は少し暗くする */
.custom-homepage .floating-cta .socials a.instagram:hover {
  background-color: #C13584;
}
.custom-homepage .floating-cta .socials a.facebook:hover {
  background-color: #145dbf;
}
.custom-homepage .floating-cta .socials a.ameba:hover {
  background-color: #27ae60;
}
.custom-homepage .floating-cta .socials a.line:hover {
  background-color: #009a00;
}