@charset "UTF-8";
/* 赤ちゃんモデルを目指す前に（ina.tokyo）— ひだまりの育児日記 */

@font-face {
  font-family: "Yomogi";
  src: url("/craft/yomogi.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #faf5ec;
  --paper: #fffdf8;
  --text: #3d2f28;
  --sub: #75645a;
  --main: #9a5b3e;
  --pista: #a8bf7a;
  --pista-deep: #8aa45c;
  --pista-pale: #eef3e2;
  --peach: #f6e4da;
  --peach-deep: #e8b9a3;
  /* 小石形（不ぞろいな角丸） */
  --pebble-a: 26% 34% 30% 22% / 32% 26% 36% 28%;
  --pebble-b: 34% 24% 28% 32% / 26% 34% 28% 36%;
  --pebble-c: 22% 30% 34% 28% / 36% 28% 30% 24%;
  --pebble-d: 30% 28% 22% 34% / 28% 36% 26% 32%;
  --cloud: 40px 26px 44px 24px;
  --hand: "Yomogi", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
  font-size: 1.0625rem;
  line-height: 2.1;
  letter-spacing: 0.02em;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--main); text-underline-offset: 0.2em; }
a:hover { color: #7a4429; }
:focus-visible { outline: 3px solid var(--pista-deep); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }

.とばす {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 8px 16px;
  background: var(--paper);
  border-radius: var(--cloud);
}
.とばす:focus { top: 12px; }

.はば, .まんなか {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ヘッダー：水玉模様の帯 */
.あたま {
  background-color: var(--bg);
  background-image: radial-gradient(circle, #e2eacd 2.5px, transparent 3px);
  background-size: 22px 22px;
  padding: 18px 0;
}
.あたま .なまえ {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 14px;
  background: var(--bg);
  border-radius: var(--cloud);
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}
.あたま .ふたば { width: 40px; flex: none; }
.あたま .おもて { display: block; font-family: var(--hand); font-size: 1.5rem; }
.あたま .ほそく { display: block; font-size: 0.78rem; color: var(--sub); }

/* 水玉3つの区切り */
.みずたま {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 64px auto;
}
.みずたま span { width: 10px; height: 10px; border-radius: 50%; background: var(--pista); }
.みずたま span:nth-child(2) { background: var(--peach-deep); transform: translateY(-5px); }
.みずたま span:nth-child(3) { background: #c99b80; }

/* TOP冒頭 */
.ひだまり {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  align-items: center;
}
.ひだまり .うたいもんく {
  font-family: var(--hand);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.5;
  color: var(--main);
}
.ひだまり h1 {
  margin-top: 14px;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.6;
}
.ひだまり h1 span { display: block; }
.ひだまり h1 .ほそく { font-size: 1rem; color: var(--sub); }
.ひだまり .あんない { margin-top: 16px; font-size: 0.95rem; color: var(--sub); line-height: 2; }
.ひだまり .しゃしん { width: 100%; max-width: 460px; justify-self: center; border-radius: var(--pebble-b); }
@media (min-width: 760px) {
  .ひだまり { grid-template-columns: 1.05fr 1fr; gap: 48px; margin-top: 56px; }
  .ひだまり .しゃしん { justify-self: end; }
}

/* 一覧のまとまり */
.まとまり > .みだし, .おすすめ > .みだし {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 32px;
  line-height: 1.5;
}

.ならび {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 48px 36px;
}
@media (min-width: 760px) { .ならび { grid-template-columns: 1fr 1fr; } }

.ひとつ a, .ひろびろ a { display: block; color: inherit; text-decoration: none; }
.ひとつ .しゃしん, .ひとつ .えほん { width: 100%; max-width: 460px; border-radius: var(--pebble-a); }
.ひとつ:nth-child(2) .しゃしん, .ひとつ:nth-child(2) .えほん { border-radius: var(--pebble-b); }
.ひとつ:nth-child(3) .しゃしん, .ひとつ:nth-child(3) .えほん { border-radius: var(--pebble-c); }
.ひとつ:nth-child(4) .しゃしん, .ひとつ:nth-child(4) .えほん { border-radius: var(--pebble-d); }

.ひづけ { margin-top: 14px; font-size: 0.85rem; color: var(--sub); line-height: 1.6; }

.ならび .だいめい, .ひろびろ .だいめい {
  margin-top: 4px;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.6;
}
.ひとつ a:hover .だいめい, .ひろびろ a:hover .だいめい { color: var(--main); }

.あらすじ {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--sub);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 記事5（レッスン）の横長の枠 */
.ひろびろ a {
  display: grid;
  gap: 20px;
  padding: 24px;
  background: var(--pista-pale);
  border-radius: var(--cloud);
}
.ひろびろ .しゃしん { width: 100%; max-width: 360px; border-radius: var(--pebble-c); }
.ひろびろ .ひづけ { margin-top: 0; }
@media (min-width: 760px) {
  .ひろびろ a { grid-template-columns: 360px 1fr; gap: 36px; padding: 32px; align-items: center; }
}

.ちゅうき { margin-top: 6px; font-size: 0.75rem; line-height: 1.5; color: var(--sub); text-align: right; }
.ひろびろ .ちゅうき { max-width: 360px; }

/* 写真のない記事の図柄 */
.えほん {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background-color: var(--pista-pale);
  background-image:
    radial-gradient(circle, rgba(168, 191, 122, 0.55) 5px, transparent 6px),
    radial-gradient(circle, rgba(232, 185, 163, 0.6) 4px, transparent 5px);
  background-size: 44px 44px, 44px 44px;
  background-position: 0 0, 22px 22px;
}
.えほん .ふたば {
  width: 26%;
  padding: 4%;
  box-sizing: content-box;
  background: var(--paper);
  border-radius: 50%;
}
.えほん.おおきい { width: 100%; max-width: 640px; margin: 0 auto; border-radius: var(--pebble-a); }

/* パンくず */
.みちしるべ { max-width: 660px; margin: 28px auto 0; font-size: 0.8rem; line-height: 1.8; color: var(--sub); }
.みちしるべ ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.みちしるべ li { display: inline-flex; align-items: center; }
.みちしるべ li + li::before {
  content: "";
  width: 9px;
  height: 6px;
  margin: 0 10px;
  background: var(--pista-deep);
  border-radius: 0 80%;
  transform: rotate(-20deg);
}

/* 記事 */
.きじ { max-width: 660px; margin: 0 auto; }
.かしら { margin-top: 24px; }
.かしら .だいめい {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(1.55rem, 4.6vw, 2rem);
  line-height: 1.55;
}
.かしら .ひづけ { display: flex; align-items: center; gap: 10px; }
.かしら .ひづけ span {
  padding: 0 12px;
  background: var(--pista-pale);
  border-radius: 14px 9px 12px 8px;
  font-size: 0.75rem;
}

.めいん { margin: 28px auto 0; max-width: 640px; }
.めいん .しゃしん { width: 100%; border-radius: var(--pebble-a); }

/* もくじ */
.もくじ {
  margin-top: 40px;
  padding: 24px 26px 26px;
  background: var(--pista-pale);
  border-radius: var(--cloud);
  line-height: 1.7;
}
.もくじ .みだし { font-family: var(--hand); font-size: 1.35rem; }
.もくじ ol { list-style: none; padding: 0; margin: 0; }
.もくじ > ol { margin-top: 10px; }
.もくじ a { color: var(--text); text-decoration: none; }
.もくじ a:hover { color: var(--main); text-decoration: underline; }
.もくじ .おや { position: relative; padding-left: 26px; margin-top: 10px; }
.もくじ .おや::before, .もくじ .おや::after {
  content: "";
  position: absolute;
  top: 0.55em;
  width: 9px;
  height: 6px;
  border-radius: 0 80%;
}
.もくじ .おや::before { left: 2px; background: var(--pista); transform: rotate(-25deg); }
.もくじ .おや::after { left: 10px; background: var(--pista-deep); transform: scaleX(-1) rotate(-25deg); }
.もくじ .こ { position: relative; padding-left: 18px; margin-top: 4px; font-size: 0.9rem; }
.もくじ .こ::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--peach-deep);
}

/* 本文 */
.ほんぶん { margin-top: 12px; }
.ほんぶん p { margin-top: 1.15em; }
.ほんぶん h2 {
  position: relative;
  isolation: isolate;
  margin-top: 64px;
  padding: 4px 0 4px 14px;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.55;
}
.ほんぶん h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  width: 78px;
  height: 52px;
  transform: translateY(-50%) rotate(-6deg);
  background: var(--peach);
  border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
}
.ほんぶん h3 {
  position: relative;
  margin-top: 40px;
  padding-left: 24px;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--main);
}
.ほんぶん h3::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 13px;
  height: 9px;
  background: var(--pista-deep);
  border-radius: 0 80%;
  transform: rotate(-25deg);
}
.ほんぶん h2 + p, .ほんぶん h3 + p { margin-top: 0.7em; }
.ほんぶん a { overflow-wrap: anywhere; }

/* 関連記事 */
.おすすめ ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
}
@media (min-width: 760px) { .おすすめ ul { grid-template-columns: repeat(4, 1fr); } }
.おすすめ .しゃしん, .おすすめ .えほん { width: 100%; border-radius: var(--pebble-d); }
.おすすめ .だいめい { display: block; margin-top: 10px; font-size: 0.88rem; line-height: 1.7; }
.おすすめ a:hover .だいめい { color: var(--main); }

/* プライバシーポリシー */
.おてがみ {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 36px 24px;
  background: var(--paper);
  border-radius: 44px 28px 48px 26px;
}
@media (min-width: 760px) { .おてがみ { padding: 48px 52px; } }
.おてがみ > .だいめい { font-family: var(--hand); font-weight: 400; font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.5; }
.おてがみ .ほんぶん h2 { margin-top: 48px; font-size: 1.3rem; }
.さだめ {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-size: 0.85rem;
  color: var(--sub);
}
.さだめ .ふたば { width: 22px; }

/* 404 */
.まいご { max-width: 660px; margin: 56px auto 0; }
.まいご > .ふたば { width: 56px; margin: 0 auto; }
.まいご > .だいめい {
  margin-top: 12px;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: center;
}
.まいご > p { margin-top: 16px; }
.まいご .みだし { margin-top: 36px; font-family: var(--hand); font-weight: 400; font-size: 1.25rem; }
.まいご ul { margin-top: 6px; padding-left: 1.2em; line-height: 1.9; }
.まいご li { margin-top: 6px; }
.まいご .もどる { margin-top: 40px; text-align: center; }

/* フッター：上端がゆるやかな弧 */
.あしもと {
  position: relative;
  margin-top: 120px;
  padding: 24px 0 28px;
  background: var(--pista-pale);
  font-size: 0.85rem;
  line-height: 1.9;
}
.あしもと::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -44px;
  height: 90px;
  background: var(--pista-pale);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: -1;
}
.あしもと .はば { display: grid; gap: 20px; }
@media (min-width: 760px) { .あしもと .はば { grid-template-columns: 1fr 1.7fr; gap: 48px; } }
.あしもと .なまえ { display: flex; align-items: center; gap: 8px; font-family: var(--hand); font-size: 1.15rem; }
.あしもと .なまえ .ふたば { width: 28px; }
.あしもと .つなぎ { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.あしもと .ことわり { color: var(--sub); }
.あしもと .うまれび { margin-top: 28px; text-align: center; font-size: 0.75rem; color: var(--sub); }