@charset "UTF-8";

/* ============================================================
   ヨハクさん 公式サイト
   書体は手書き一本（Yomogi）。線が細いぶん、
   色の濃さ・文字の大きさ・わずかな縁取りで可読性を確保する。
   ============================================================ */

:root {
  --bg:        #FBF9F5;   /* 生成りの白 */
  --bg-alt:    #F4EFE5;   /* すこし沈めた背景 */
  --bg-friend: #F8E2C6;   /* なかまの背景（ここだけ色を変える） */

  --ink:       #2E2118;
  --ink-soft:  #55412F;
  --ink-faint: #8A755D;

  --accent:    #E08526;   /* 座椅子のオレンジ */
  --accent-dp: #A65E12;
  --accent-bg: #FBE5C9;
  --line:      #E0D5C3;
  --white:     #FFFFFF;

  --hand: "Yomogi", "Hiragino Maru Gothic ProN", "Klee One", sans-serif;

  --wrap: 1060px;
  --pad: clamp(1.4rem, 6vw, 4rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 手書きの細い線をほんの少しだけ太らせる */
  -webkit-text-stroke: .014em currentColor;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0; }

.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 意味のかたまり。この中では改行させない（日本語の変な折り返し対策） */
.nb { display: inline-block; }

::selection { background: var(--accent-bg); }

/* ============================================================
   スクロールで現れる — 方向は data-from、順番は data-delay
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1);
}

.reveal[data-from="left"]  { transform: translate(-38px, 14px); }
.reveal[data-from="right"] { transform: translate( 38px, 14px); }

.reveal.is-visible { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }
.reveal[data-delay="5"] { transition-delay: .60s; }

/* ============================================================
   ヘッダー
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--pad);
  transition: background-color .6s ease, backdrop-filter .6s ease, border-color .6s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  background: rgba(251, 249, 245, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}

.wordmark {
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: .1em;
  text-decoration: none;
  padding-right: .1em;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

.wordmark:hover { transform: rotate(-2.5deg) scale(1.04); }

.site-nav {
  display: flex;
  gap: clamp(.9rem, 2.6vw, 1.9rem);
  font-size: .88rem;
  color: var(--ink-soft);
}

.site-nav a {
  text-decoration: none;
  position: relative;
  padding-bottom: .2em;
  transition: color .4s ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }

@media (max-width: 760px) {
  .site-nav { display: none; }
}

/* ============================================================
   ヒーロー
   スクロールに合わせて、ヨハクさんがタイトルの後ろから
   ぐいーんとせり上がる。手元のおしらせも一緒に上がってくる。
   ============================================================ */

.hero {
  position: relative;
  /* 高さは main.js が「中身に必要なぶん＋助走」に合わせて上書きします */
  height: 195svh;
  /* ヨハクさんを画面幅より少し広くしているので、はみ出しをここで閉じる。
     hidden にすると中の position:sticky が効かなくなるため clip を使う。 */
  overflow-x: clip;
  /* 舞台より下に余る帯。次のセクションと同じ地色にして、
     ヨハクさんの手がその境目に乗って見えるようにする */
  background: var(--bg-alt);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  background:
    radial-gradient(120% 70% at 50% 100%, #F7EDDD 0%, rgba(247,237,221,0) 64%),
    var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* タイトルは画面の上に。ヨハクさんが下から、その裏へせり上がってくる */
  justify-content: flex-start;
  padding-top: clamp(9svh, 12svh, 14svh);
  overflow: hidden;
}

/* --- タイトル ---
   ヨハクさんの前に「貼ってある」ように見せる。
   ぶ厚い生成りのフチ＋オレンジの影で、シールのような立体感を出す。
   （偶然かぶって見えないように、あえてのデザインとして成立させる） */
.hero__title {
  position: relative;
  z-index: 3;
  margin-bottom: 0;
  font-weight: 700;
  font-size: clamp(3rem, 15.5vw, 9.4rem);
  line-height: 1.2;
  letter-spacing: .07em;
  padding-left: .07em;
  color: var(--ink);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  rotate: -1.8deg;

  -webkit-text-stroke: .095em var(--bg);
  paint-order: stroke fill;
  text-shadow: none;
  filter:
    drop-shadow(0 5px 0 rgba(224, 133, 38, .45))
    drop-shadow(0 15px 20px rgba(46, 33, 24, .22));
}

/* 1文字ずつ、書かれていくように */
.hero__title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotate(-8deg);
  animation: writeIn 1s cubic-bezier(.34,1.4,.64,1) forwards;
}

.hero__title .ch:nth-child(1) { animation-delay: .20s; }
.hero__title .ch:nth-child(2) { animation-delay: .34s; }
.hero__title .ch:nth-child(3) { animation-delay: .48s; }
.hero__title .ch:nth-child(4) { animation-delay: .62s; }
.hero__title .ch:nth-child(5) { animation-delay: .76s; }
.hero__title .ch:nth-child(n+6) { animation-delay: .9s; }

@keyframes writeIn {
  from { opacity: 0; transform: translateY(30px) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(-5px) rotate(1.8deg); }
  to   { opacity: 1; transform: none; }
}

/* --- せり上がってくるヨハクさん ---
   --peek は main.js がスクロール量から px で書き込みます。 */
.hero__peeker {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  /* この絵は左右に約10%ずつ透明余白があるので、その分だけ広げてよい。
     絵そのものの幅は、下の値のおよそ79%になります。 */
  width: min(124vw, 1180px, 118svh);
  transform: translateX(-50%) translateY(var(--peek, 100%));
  will-change: transform;
}

.hero__figure { position: relative; z-index: 1; }

.hero__figure img {
  width: 100%;
  animation: breathe 7.5s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-1.2deg); }
}

/* ゆらゆら（キャラ共通） */
@keyframes sway {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(1.3deg); }
}

/* ============================================================
   セクション共通
   ============================================================ */

.section {
  padding: clamp(4.5rem, 13vh, 8.5rem) var(--pad);
  position: relative;
}

.wrap { max-width: var(--wrap); margin-inline: auto; }

.section__label {
  font-weight: 700;
  font-size: clamp(1.6rem, 5.8vw, 2.4rem);
  letter-spacing: .02em;
  line-height: 1.45;
  margin-bottom: 1rem;
}

.section__label::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--accent);
  margin-bottom: 1.3rem;
}

.section__label--center { text-align: center; }
.section__label--center::before { margin-inline: auto; }

.section__note {
  font-size: .96rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: clamp(2.4rem, 6.5vh, 3.8rem);
}

.section__note--center { text-align: center; }

/* ============================================================
   おしらせ（ヒーローのすぐ下）
   ============================================================ */

.news-head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.5vw, 2.2rem);
  margin-bottom: clamp(2rem, 5.5vh, 3rem);
}

.news-head .section__note { margin-bottom: 0; }

.news-head__img {
  width: clamp(96px, 24vw, 148px);
  flex: none;
  animation: shout 5.5s ease-in-out infinite;
  transform-origin: 60% 80%;
}

@keyframes shout {
  0%, 70%, 100% { transform: rotate(0deg)    translateY(0); }
  78%           { transform: rotate(-3.5deg) translateY(-5px); }
  86%           { transform: rotate(1.8deg)  translateY(0); }
}

.news-list { border-top: 2px dotted var(--line); }

.news-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .4rem clamp(1rem, 3.5vw, 2.4rem);
  padding: clamp(1.3rem, 3.4vh, 1.8rem) 0;
  border-bottom: 2px dotted var(--line);
}

.news-item time {
  font-size: .86rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.news-item p {
  font-weight: 700;
  font-size: clamp(1rem, 3.2vw, 1.12rem);
  line-height: 1.7;
}

.news-item a {
  font-size: .88rem;
  color: var(--accent-dp);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .4s ease;
}

.news-item a:hover { border-bottom-color: var(--accent-dp); }

@media (max-width: 620px) {
  .news-item { grid-template-columns: 1fr; gap: .45rem; }
  .news-item a { justify-self: start; }
}

/* 6件目から先は、たたんでおく。
   .news-item が display:grid なので、hidden 属性だけでは消えてくれない */
.news-item[hidden] { display: none; }

.news-more {
  display: block;
  margin: clamp(1.4rem, 3.6vh, 2rem) auto 0;
  padding: .6em 2em;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  color: var(--accent-dp);
  background: var(--white);
  border: 2px dotted var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .4s ease, transform .4s cubic-bezier(.34,1.4,.64,1);
}

.news-more:hover { border-color: var(--accent-dp); transform: translateY(-2px); }
.news-more:focus-visible { outline: 2px solid var(--accent-dp); outline-offset: 3px; }

/* ============================================================
   ABOUT
   ============================================================ */

.section--about { background: var(--bg-alt); }

.about__body { max-width: 40em; }

.about__lead {
  font-weight: 700;
  font-size: clamp(1.5rem, 5.8vw, 2.3rem);
  line-height: 1.5;
  letter-spacing: .01em;
  margin-bottom: clamp(1.5rem, 4vh, 2.2rem);
}

.about__text {
  font-size: clamp(1rem, 3.2vw, 1.08rem);
  line-height: 1.9;
  letter-spacing: .01em;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.about__figure {
  margin: clamp(2.6rem, 7vh, 4rem) 0 0;
  text-align: center;
}

.about__figure img {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  animation: sway 10s ease-in-out infinite;
}

.about__figure figcaption {
  margin-top: 1.2rem;
  font-weight: 700;
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  color: var(--accent-dp);
  rotate: -1.6deg;
}

/* ============================================================
   WORDS — 左右にずらして、リズムをつける
   ============================================================ */

.section--words { background: var(--bg-alt); }

.words {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 3.2vh, 1.8rem);
  margin-block: clamp(2.2rem, 6vh, 3.6rem);
}

.words li {
  font-weight: 700;
  font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  letter-spacing: .01em;
  line-height: 1.55;
  position: relative;
  padding-left: 1.4em;
}

.words li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 2.5px solid var(--accent);
}

/* 偶数行は右へ寄せて、視線を左右に振る */
.words li:nth-child(2) { margin-left: auto; color: var(--ink-soft); }
.words li:nth-child(3) { margin-left: 8%; }
.words li:nth-child(4) { margin-left: auto; color: var(--ink-soft); }
.words li:nth-child(5) { margin-left: 4%; }

@media (min-width: 720px) {
  .words li:nth-child(2),
  .words li:nth-child(4) { margin-right: 4%; }
}

.words__close {
  font-weight: 700;
  font-size: clamp(1.08rem, 3.8vw, 1.35rem);
  line-height: 1.75;
  letter-spacing: .01em;
  text-align: center;
  padding-top: clamp(1.4rem, 3.8vh, 2.2rem);
  border-top: 3px dotted var(--line);
}

.words__close em {
  font-style: normal;
  background: linear-gradient(to top, var(--accent-bg) 46%, transparent 46%);
  padding: 0 .12em;
}

/* ============================================================
   なかま — ここだけ背景の色を変える
   ============================================================ */

.section--friends { background: var(--bg-friend); }

/* 上下の境目をやわらかく波打たせる */
.section--friends::before,
.section--friends::after {
  content: "";
  position: absolute;
  left: -2%;
  width: 104%;
  height: 42px;
  background: var(--bg-friend);
  border-radius: 50%;
}

.section--friends::before { top: -21px; }
.section--friends::after  { bottom: -21px; }

.friends {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7.5vh, 5rem);
}

.friend {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

@media (min-width: 760px) {
  .friend {
    grid-template-columns: 370px 1fr;
    align-items: center;
    justify-items: start;
    text-align: left;
  }
  /* 偶数の子は左右を入れ替える */
  .friend--flip { grid-template-columns: 1fr 370px; }
  .friend--flip .friend__circle { order: 2; }
  .friend--flip .friend__body   { order: 1; text-align: right; }
  /* 見出しは右に寄せるが、本文は左揃えのまま右へ寄せる（そのほうが読める） */
  .friend--flip .friend__desc   { margin-left: auto; text-align: left; }
}

.friend__circle {
  width: clamp(240px, 68vw, 360px);
  aspect-ratio: 1;
  /* grid item の自動最小サイズを切る。切らないと縦長の絵で円が楕円に伸びる */
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 20px 44px -26px rgba(46,33,24,.55);
  transition: transform .7s cubic-bezier(.34,1.4,.64,1);
}

.friend:hover .friend__circle { transform: scale(1.035) rotate(-1.5deg); }

/* 円のなかに収める。% は円そのものの大きさに対して効く（padding だと親幅基準になる） */
.friend__circle img {
  max-width: 78%;
  max-height: 78%;
  width: auto;
  animation: sway 9s ease-in-out infinite;
}

.friend:nth-child(2) .friend__circle img { animation-delay: -3s; }
.friend:nth-child(3) .friend__circle img { animation-delay: -6s; }
.friend:nth-child(4) .friend__circle img { animation-delay: -1.5s; }
.friend:nth-child(5) .friend__circle img { animation-delay: -4.5s; }
.friend h3 {
  font-weight: 700;
  font-size: clamp(1.75rem, 6.4vw, 2.35rem);
  letter-spacing: .02em;
  line-height: 1.4;
  margin-bottom: .55rem;
}

.friend__role {
  display: inline-block;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--accent-dp);
  background: rgba(255,255,255,.85);
  padding: .18em 1em;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.friend__desc {
  font-size: clamp(.98rem, 3.1vw, 1.06rem);
  line-height: 1.9;
  letter-spacing: .01em;
  color: #4E3A28;
  max-width: 30em;
}

/* 段落が続くときは、あいだをひと呼吸あける */
.friend__desc + .friend__desc { margin-top: .9em; }

/* ============================================================
   スタンプ・絵文字・着せかえ
   ============================================================ */

.section--shop { background: var(--bg-alt); }

/* スマホは2列、デスクトップは3列（8商品なので 2×4 → 3/3/2 で収まる） */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 2.4vw, 1.6rem);
}

@media (min-width: 820px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shop-card a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  background: var(--white);
  border: 2.5px solid var(--line);
  border-radius: 22px;
  padding: clamp(1rem, 2.6vw, 1.3rem);
  text-decoration: none;
  transition: transform .6s cubic-bezier(.34,1.4,.64,1), box-shadow .6s ease, border-color .6s ease;
}

.shop-card a:hover {
  transform: translateY(-7px) rotate(-.8deg);
  border-color: var(--accent);
  box-shadow: 0 20px 40px -24px rgba(46,33,24,.55);
}

.shop-card__thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.shop-card__thumb img {
  max-width: 88%;
  max-height: 88%;
  width: auto;
  transition: transform .6s cubic-bezier(.34,1.4,.64,1);
}

.shop-card a:hover .shop-card__thumb img { transform: scale(1.07) rotate(2deg); }

.shop-card__tag {
  font-size: .78rem;
  letter-spacing: .02em;
  padding: .2em .95em;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-dp);
}

.shop-card__tag--emoji { background: #DFEDD3; color: #3F5C2A; }
.shop-card__tag--theme { background: #D7E9F1; color: #2A596E; }

.shop-card h3 {
  font-weight: 700;
  font-size: clamp(1rem, 3.1vw, 1.1rem);
  line-height: 1.6;
  flex: 1;
}

/* 折り返しても矢印が置いていかれないよう、inline で文字に沿わせる */
.shop-card__cta {
  display: inline;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  transition: color .4s ease;
}

.shop-card__cta i {
  display: inline-block;
  margin-left: .45em;
  font-style: normal;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.shop-card a:hover .shop-card__cta { color: var(--accent-dp); }
.shop-card a:hover .shop-card__cta i { transform: translateX(6px); }

/* ============================================================
   フォロー — アイコンは各社の公式ロゴ・公式カラー
   ============================================================ */

.sns {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.8rem, 2vw, 1.2rem);
}

@media (min-width: 760px) {
  .sns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sns__item {
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: clamp(.9rem, 2.4vw, 1.2rem);
  padding: clamp(1.2rem, 3.2vw, 1.5rem);
  background: var(--white);
  border: 2.5px solid var(--line);
  border-radius: 22px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .6s cubic-bezier(.34,1.4,.64,1), border-color .6s ease, box-shadow .6s ease;
}

a.sns__item:hover {
  transform: translateY(-6px) rotate(-.6deg);
  border-color: var(--accent);
  box-shadow: 0 20px 40px -24px rgba(46,33,24,.55);
}

.sns__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--bg-alt);
}

.sns__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  transition: transform .6s cubic-bezier(.34,1.5,.64,1);
}

/* 公式のブランドカラー */
.sns__icon--ig svg { fill: url(#ig-grad); }
.sns__icon--th svg { fill: #000000; }
.sns__icon--tt svg { fill: #000000; }
.sns__icon--yt svg { fill: #FF0000; }
.sns__icon--ln svg { fill: #06C755; }

a.sns__item:hover .sns__icon svg { transform: scale(1.15) rotate(-6deg); }

.sns__body { min-width: 0; }

.sns__name {
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.5;
  margin-bottom: .3rem;
}

.sns__desc {
  display: block;
  font-size: .86rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

.sns__soon {
  flex: none;
  font-weight: 400;
  font-size: .68rem;
  color: var(--ink-faint);
  padding: .1em .7em;
  border: 2px solid var(--line);
  border-radius: 999px;
}

/* ============================================================
   フッター
   ============================================================ */

.site-footer {
  padding: clamp(3.5rem, 11vh, 6.5rem) var(--pad) clamp(2.2rem, 6vh, 3.2rem);
  text-align: center;
  background: var(--bg);
}

.site-footer__img {
  width: clamp(120px, 30vw, 170px);
  margin: 0 auto 1.8rem;
  animation: sway 11s ease-in-out infinite;
}

.site-footer__msg {
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  letter-spacing: .04em;
  padding-left: .04em;
  margin-bottom: 2rem;
}

.site-footer__copy {
  font-size: .8rem;
  color: var(--ink-faint);
}

/* ============================================================
   アクセシビリティ
   ============================================================ */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 動きが苦手な人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* ぐいーんは無し。ふつうの1画面ヒーローにする */
  .hero { height: auto; }
  .hero__stage { position: static; height: auto; padding: 24svh 0 0; }
  .hero__peeker { position: static; width: min(92vw, 460px); margin: 2rem auto 0; transform: none; }
  .hero__title .ch { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}