/* nocka サイト共通スタイル
   ページごとの見た目はデザインどおり各要素の style に入っている。
   ここには、全ページ共通の土台・スマホ用の調整・ホバーだけを置く。 */
body { margin: 0; background: #FCFBF7; }
  a { color: #2F6B5C; text-decoration: none; }
  a:hover { color: #235246; }
  @keyframes morph {
    0%,100% { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; }
    33% { border-radius: 42% 58% 62% 38% / 44% 60% 40% 56%; }
    66% { border-radius: 50% 50% 38% 62% / 62% 36% 64% 38%; }
  }
  @keyframes drift { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(16px,-24px,0) rotate(5deg); } }
  @keyframes driftS { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-10px,-14px,0); } }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img { max-width: 100%; }
#news, #ages { scroll-margin-top: 90px; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid #2F6B5C; outline-offset: 3px; border-radius: 12px; }

/* ヘッダー：年齢別のドロップダウン */
.dd-menu { display: none; }
.dd:hover .dd-menu, .dd.open .dd-menu, .dd:focus-within .dd-menu { display: flex; }
.logo:hover { color: #24241F; }

/* スマホ用ヘッダー（767px以下で表示） */
.sp-actions, .burger, .sp-menu { display: none; }
.burger { all: unset; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; cursor: pointer; }
.burger i { width: 20px; height: 1.5px; background: #24241F; display: block; transition: transform .2s; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.sp-line { background: #2F6B5C; color: #fff !important; border-radius: 999px; padding: 9px 16px; font-size: 12px; letter-spacing: .04em; }

/* 月齢タブ・年齢の絞り込み */
[data-month], [data-rage] { user-select: none; }

/* 読みもの（note）一覧：読み込み中・記事がないとき */
.reads-msg { grid-column: 1 / -1; border: 1px dashed #D5CFBF; border-radius: 24px; padding: 48px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 14px; line-height: 2; color: #4B4840; }
.reads-msg .blob { width: 48px; height: 48px; background: #E7E3D9; display: block; animation: morph 16s ease-in-out infinite; }
.reads-msg a { font-size: 13px; }

/* 運営者情報・規約などの本文 */
.doc { font-size: 15px; line-height: 2.1; color: #3C3A33; }
.doc h2 { font-size: 20px; font-weight: 500; line-height: 1.7; margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid #EDE9DF; color: #24241F; }
.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 1.4em; }
.doc li { margin-bottom: 4px; }
.doc dl { display: grid; grid-template-columns: 180px 1fr; margin: 0; border-top: 1px solid #EDE9DF; }
.doc dt, .doc dd { margin: 0; padding: 18px 0; border-bottom: 1px solid #EDE9DF; }
.doc dt { font-weight: 500; color: #24241F; }
.doc .note { font-size: 13px; color: #6A675E; }
.doc .todo { background: #FFF6D6; border-radius: 6px; padding: 0 6px; }
.doc .form-wrap { margin-top: 8px; border-radius: 16px; overflow: hidden; background: #FCFBF7; border: 1px solid #EDE9DF; }
.doc .form-wrap iframe { display: block; width: 100%; height: 1200px; border: 0; }
.doc .btn { display: inline-block; background: #2F6B5C; color: #fff; border-radius: 999px; padding: 14px 30px; font-size: 14px; letter-spacing: .06em; }
.doc .btn:hover { background: #235246; color: #fff; }
.doc a:not(.btn) { border-bottom: 1px solid #86B6A3; }

@media (min-width: 768px) { .nw { white-space: nowrap; } }

@media (max-width: 767px) {
  .hd-in { padding: 14px 20px !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .logo > span:first-child { width: 22px !important; height: 22px !important; }
  .logo > span:last-child { font-size: 22px !important; }
  .hd-nav { display: none !important; }
  .sp-actions { display: flex; align-items: center; gap: 10px; }
  .burger { display: flex; }
  .sp-menu { display: block; border-top: 1px solid #EDE9DF; padding: 8px 20px 20px; font-size: 15px; max-height: calc(100vh - 72px); overflow-y: auto; }
  .sp-menu a { display: flex; align-items: center; gap: 12px; min-height: 48px; color: #3C3A33; border-bottom: 1px solid #EDE9DF; }
  .sp-menu a[aria-current="page"] { color: #2F6B5C; }
  .sp-menu .spb { width: 20px; height: 20px; display: block; animation: morph 14s ease-in-out infinite; }
  .sp-menu .k { font-family: Outfit, sans-serif; font-size: 11px; letter-spacing: .2em; color: #6A675E; margin: 14px 0 2px; }

  /* 2列固定のレイアウトは1列に */
  [style*="minmax(0, 4fr)"], [style*="minmax(0, 8fr)"] { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 64px !important; }
  [style*="minmax(0, 8fr) minmax(0, 4fr)"] > [style*="order: 2"] { order: 0 !important; }
  [style*="minmax(0, 8fr) minmax(0, 4fr)"] > [style*="order: 1"] { justify-self: stretch !important; }
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: 1fr 1fr"] { gap: 12px !important; }
  [style*="grid-template-columns: 1fr 1fr"] > a { padding: 20px 16px !important; gap: 10px !important; }

  /* LINE登録の帯：QRはスマホでは出さない */
  #news .qr { display: none !important; }
  #news [style*="min-width: 220px"] { min-width: 0 !important; width: 100%; }
  #news h3 br { display: none; }

  h1, h2, h3, p[style*="font-weight: 500"] { text-wrap: balance; }
  .doc { padding: 32px 22px !important; font-size: 14px; }
  .doc dl { grid-template-columns: 1fr; }
  .doc dt { padding-bottom: 0; border-bottom: 0; }
  .doc dd { padding-top: 4px; }
  .doc .form-wrap iframe { height: 1400px; }
}

/* style-hover（デザインのホバー） */
.h1:hover{background: #F4F2EA !important}
.h2:hover{color: #2F6B5C !important}
.h3:hover{background: #235246 !important}
.h4:hover{border-color: #2F6B5C !important}
.h5:hover{transform: translateY(-5px) !important; box-shadow: 0 10px 24px rgba(52,48,40,.1) !important}
.h6:hover{background: #E9F1EC !important}
.h7:hover{transform: translateY(-3px) !important}
.h8:hover{transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(52,48,40,.1) !important}