/*
 Theme Name:   Chic Lite Child
 Template:     chic-lite
 Description:  子テーマ。ラブリーなお問い合わせフォーム対応。
 Author:       あなたのお名前
 Version:      1.0
*/

/* 必要に応じて、ここにカスタムCSSを追加してください */


/* =========================================
   🌸 最新のときめき記録セクション
   セラピーページのピンク世界観になじむカード
   （HTML側：.latest-posts-section ～）
========================================= */

/* --- セクション全体の箱 --- */
.latest-posts-section {
  max-width: 1000px;
  margin: 50px auto 60px;
  padding: 30px 20px 35px;
  border-radius: 24px;
  background: radial-gradient(circle at top left, #ffe6f3 0%, #fff5fb 40%, #ffffff 100%);
  box-shadow: 0 12px 30px rgba(255, 182, 213, 0.35);
  position: relative;
  overflow: hidden;
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ふんわり背景のきらめき飾り */
.latest-posts-section::before,
.latest-posts-section::after {
  content: "♡ ✨ ♡";
  position: absolute;
  font-size: 1.2rem;
  opacity: 0.18;
  pointer-events: none;
}

.latest-posts-section::before {
  top: 10px;
  left: 18px;
}

.latest-posts-section::after {
  bottom: 8px;
  right: 18px;
}

/* --- 見出しまわり --- */
.latest-posts-header {
  text-align: center;
  margin-bottom: 22px;
}

.latest-posts-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #ff69b4;
  text-shadow: 0 0 8px rgba(255, 153, 204, 0.6);
  letter-spacing: 0.06em;
}

.latest-posts-sub {
  font-size: 0.9rem;
  color: #cc6fa1;
  line-height: 1.8;
}

/* --- カードを並べるグリッド --- */
.latest-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* --- 各カード本体 --- */
.latest-post-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(255, 179, 213, 0.25);
  position: relative;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.latest-post-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* --- サムネイル部分（背景画像） --- */
.latest-post-thumb {
  width: 100%;
  padding-top: 60%; /* 縦横比：横長 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- カード内テキスト部分 --- */
.latest-post-body {
  padding: 12px 12px 14px;
}

.latest-post-date {
  display: inline-block;
  font-size: 0.8rem;
  color: #ff7fb5;
  margin-bottom: 6px;
}

.latest-post-heading {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

/* ホバーすると、ふわっと浮く */
.latest-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(255, 153, 204, 0.35);
}

/* --- 「もっと見る」リンク --- */
.latest-posts-more {
  text-align: center;
  margin-top: 20px;
}

.latest-posts-more-link {
  display: inline-block;
  font-size: 0.9rem;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9ecb, #ff7bbd);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 140, 193, 0.45);
  position: relative;
}

.latest-posts-more-link::after {
  content: "🪽";
  margin-left: 6px;
}

/* ホバー時のふわっと */
.latest-posts-more-link:hover {
  box-shadow: 0 9px 22px rgba(255, 120, 190, 0.55);
  transform: translateY(-1px);
}

/* =========================================
   🔁 レスポンシブ対応
========================================= */

/* タブレットサイズ：2列表示 */
@media (max-width: 900px) {
  .latest-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* スマホサイズ：1列表示＆少しコンパクトに */
@media (max-width: 640px) {
  .latest-posts-section {
    margin: 40px auto 45px;
    padding: 24px 16px 28px;
    border-radius: 20px;
  }

  .latest-posts-title {
    font-size: 1.3rem;
  }

  .latest-posts-sub {
    font-size: 0.85rem;
  }

  .latest-posts-grid {
    grid-template-columns: 1fr;
  }

  .latest-post-card {
    max-width: 420px;
    margin: 0 auto;
  }
}




/* =========================================
   💗 LovelyStyleの世界観：装飾CSS（固定ページ）
   対象：.lovelyworld-wrap 以下のみ
   ========================================= */

.lovelyworld-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 34px;
}

/* --- Hero --- */
.lovelyworld-hero{
  position: relative;
  padding: 26px 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 105, 180, .22);
  background: linear-gradient(135deg,
    rgba(255, 192, 203, .35),
    rgba(255, 240, 246, .75),
    rgba(234, 221, 255, .55)
  );
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  overflow: hidden;
}

/* ふわきら背景（控えめ） */
.lovelyworld-hero::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto -60px;
  height: 220px;
  background:
    radial-gradient(circle at 20% 35%, rgba(255,105,180,.18) 0 42%, transparent 45%),
    radial-gradient(circle at 55% 25%, rgba(255,182,193,.22) 0 36%, transparent 39%),
    radial-gradient(circle at 82% 45%, rgba(221,160,221,.18) 0 35%, transparent 38%);
  filter: blur(1px);
  pointer-events:none;
}

/* ピヨちゃん＆ハート（さりげなく） */
.lovelyworld-hero::after{
  content:"🐥  ✦  💗  ✦  🐥";
  position:absolute;
  right: 16px;
  top: 14px;
  font-size: 15px;
  opacity: .55;
  letter-spacing: 4px;
  pointer-events:none;
}

/* ミニラベル */
.lovelyworld-mini{
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,105,180,.18);
  font-size: 13px;
}

/* H1（光のタイトル） */
.lovelyworld-title{
  margin: 6px 0 8px;
  line-height: 1.25;
  font-size: clamp(24px, 4.2vw, 38px);
  letter-spacing: .02em;
  text-shadow: 0 8px 22px rgba(255,105,180,.16);
  position: relative;
}

/* 下線リボン風（ふわっと） */
.lovelyworld-title::after{
  content:"";
  display:block;
  width: min(520px, 92%);
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,105,180,.10),
    rgba(255,182,193,.28),
    rgba(221,160,221,.16)
  );
}

/* H2（サブタイトル） */
.lovelyworld-subtitle{
  margin: 0 0 14px;
  font-size: clamp(14px, 2.2vw, 18px);
  opacity: .92;
}

/* リード */
.lovelyworld-lead{
  margin-top: 12px;
  padding: 14px 14px 6px;
  border-radius: 18px;
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,105,180,.14);
}

.lovelyworld-lead p{
  margin: 0 0 10px;
  line-height: 1.9;
}

/* --- Cards --- */
.lovelyworld-main{
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.lovelyworld-card{
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,105,180,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
}

/* カードの左上きらめき */
.lovelyworld-card::before{
  content:"✦";
  position:absolute;
  left: 14px;
  top: 12px;
  font-size: 12px;
  opacity: .35;
  transform: rotate(10deg);
}

/* 見出し */
.lovelyworld-h2{
  margin: 0 0 10px;
  line-height: 1.35;
  font-size: clamp(16px, 2.6vw, 20px);
  letter-spacing: .01em;
}

/* 本文 */
.lovelyworld-body p{
  margin: 0 0 10px;
  line-height: 1.95;
}

.lovelyworld-body strong{
  font-weight: 700;
}

/* 箇条書き */
.lovelyworld-list{
  margin: 8px 0 12px 1.2em;
  padding: 0;
}
.lovelyworld-list li{
  margin: 4px 0;
  line-height: 1.8;
}

/* 引用（心が止まるところ） */
.lovelyworld-quote{
  margin: 12px 0;
  padding: 12px 14px;
  border-left: 4px solid rgba(255,105,180,.55);
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255,192,203,.22),
    rgba(255,255,255,.60)
  );
}

/* --- Closing --- */
.lovelyworld-closing{
  margin-top: 6px;
  padding: 18px 16px 16px;
  border-radius: 22px;
  border: 1px solid rgba(221,160,221,.18);
  background: linear-gradient(135deg,
    rgba(255,240,246,.85),
    rgba(234,221,255,.55)
  );
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.lovelyworld-closecopy{
  margin: 0 0 14px;
  line-height: 1.9;
}

/* CTAボタン */
.lovelyworld-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 8px;
}

.lovelyworld-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(255,105,180,.22);
  background: linear-gradient(135deg,
    rgba(255,105,180,.22),
    rgba(255,182,193,.32),
    rgba(221,160,221,.22)
  );
  box-shadow: 0 10px 22px rgba(255,105,180,.14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.lovelyworld-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(255,105,180,.18);
}

.lovelyworld-btn.sub{
  background: rgba(255,255,255,.78);
}