/* はんなりパラコード LP
   骨組み用のスタイル。デザイン案が決まったら置き換える。
   色・余白・角丸は CSS 変数（デザインシステムのトークン名）で指定する */

:root {
  /* 色 */
  --milk-cream: #FFF8EC;   /* 基本の背景 */
  --sakura-pink: #F8E5E3;  /* やさしい面 */
  --sage-green: #DCE5D4;   /* やさしい面 */
  --linen-beige: #E9DCCB;  /* やさしい面 */
  --rose-pink: #DCA0AA;    /* 線・ふち・差し色（この色の面に文字を載せない） */
  --cocoa-brown: #806957;  /* 見出し・本文 */
  --cocoa-deep: #6A5545;   /* 小さい文字・タグ・名札・主ボタン */
  --lavender: #C9B2CE;     /* 小さな飾りと細い線だけ */
  --gold: #C9A24E;         /* 小さな飾りと細い線だけ */

  /* 文字 */
  --font-base: "Zen Maru Gothic", sans-serif;
  --font-hand: "Klee One", cursive; /* 手書き風の一言だけ（1画面に1〜2か所まで） */

  /* 角丸 */
  --radius-photo: 8px;
  --radius-card: 16px;
  --radius-bubble: 24px;
  --radius-pill: 999px;

  /* 余白 */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: 80px;

  --content-width: 1040px;
}

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

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

body {
  margin: 0;
  background: var(--milk-cream);
  color: var(--cocoa-brown);
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

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

a {
  color: inherit;
}

/* ヘッダー */
.site-header {
  display: flex;
  justify-content: center;
  padding: var(--space-m) var(--space-s) 0;
}

.site-header__logo img {
  width: 200px;
}

/* ファーストビュー */
.hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-m) var(--space-s) var(--space-l);
  text-align: center;
}

.hero__banner {
  margin: 0 auto;
  border-radius: var(--radius-photo);
}

.hero__copy {
  margin: var(--space-m) 0 0;
  font-family: var(--font-hand);
  font-size: clamp(20px, 4vw, 28px);
}

/* セクション共通 */
.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-s);
}

.section__title {
  margin: 0 0 var(--space-s);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 700;
  text-align: center;
}

.section__lead {
  margin: 0 0 var(--space-l);
  text-align: center;
}

/* 作品一覧（カードは works.js が差し込む） */
.works__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-m);
}

/* つむぎとふきだし */
.tsumugi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
  flex-wrap: wrap;
}

.tsumugi__img {
  width: 160px;
}

.bubble {
  position: relative;
  max-width: 320px;
  padding: var(--space-m);
  background: var(--sakura-pink);
  border: 1px dashed var(--rose-pink);
  border-radius: var(--radius-bubble);
}

.bubble__name {
  position: absolute;
  top: -14px;
  left: var(--space-m);
  padding: 0 12px;
  background: var(--cocoa-deep);
  color: var(--milk-cream);
  font-size: 13px;
  border-radius: var(--radius-pill);
}

.bubble__text {
  margin: 0;
  color: var(--cocoa-deep); /* 淡い面の上の小さい文字は cocoa-deep */
}

/* minne・Instagram */
.links__list {
  display: flex;
  justify-content: center;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}

/* ボタン */
.button {
  display: inline-block;
  padding: 10px 28px;
  background: var(--cocoa-deep);
  color: var(--milk-cream);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: opacity 0.4s ease;
}

.button:hover {
  opacity: 0.85;
}

.button--sub {
  background: transparent;
  color: var(--cocoa-deep);
  border: 1px solid var(--cocoa-deep);
}

/* フッター */
.site-footer {
  padding: var(--space-l) var(--space-s);
  background: var(--linen-beige);
  color: var(--cocoa-deep);
  text-align: center;
}

/* 動き：ゆっくり、ふわっと現れる */
.fade-in {
  animation: fade-in 1.2s ease-out both;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 動きを減らす設定のときは止める */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}