/* =========================================================
   アトリエ・ノエル — Design C「手作りのぬくもり・クラフト」
   配色: クラフト紙 / テラコッタ / オリーブ / 墨
   書体: Yomogi(手書きアクセント) + Zen Maru Gothic(本文) + Zen Kaku Gothic New(補足)
   ========================================================= */

:root{
  --paper:      #efe6d6;   /* クラフト紙背景 */
  --paper-lt:   #f6efe2;   /* 明るい紙（カード面） */
  --paper-dk:   #e4d7c0;   /* 影の紙 */
  --terra:      #c4623e;   /* テラコッタ */
  --terra-dk:   #a04a2c;   /* 焼き色 */
  --olive:      #7a7a4e;   /* オリーブ */
  --olive-dk:   #5f5f3b;
  --sumi:       #3a2f28;   /* 墨 */
  --sumi-soft:  #5c4f45;
  --line:       #cdbfa6;
  --tape:       rgba(196,98,62,.20);
  --tape-olive: rgba(122,122,78,.22);

  --maxw: 1120px;
  --r-card: 6px;

  --f-hand: "Yomogi", cursive;
  --f-body: "Zen Maru Gothic", system-ui, sans-serif;
  --f-util: "Zen Kaku Gothic New", system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--sumi);
  line-height:1.95;
  font-size:16px;
  background-color:var(--paper);
  /* 紙のテクスチャ：細かな繊維のような点 */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(122,122,78,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(196,98,62,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(58,47,40,.04) 0 1px, transparent 1px);
  background-size: 13px 13px, 19px 19px, 23px 23px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }

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

/* ---- Skip / focus ---- */
.skip-link{
  position:absolute; left:1rem; top:-3rem;
  background:var(--sumi); color:var(--paper-lt);
  padding:.6rem 1rem; border-radius:4px; z-index:100;
  transition:top .2s;
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline:3px dashed var(--terra);
  outline-offset:3px;
  border-radius:2px;
}

/* =======================================================
   手書きアクセント（一点投入：見出しの一語）
   ======================================================= */
.hand{
  font-family:var(--f-hand);
  color:var(--terra);
  font-weight:400;
  position:relative;
  white-space:nowrap;
}
/* 手描きの下線 */
.hand::after{
  content:"";
  position:absolute; left:-2%; right:-2%; bottom:-.12em;
  height:.34em;
  background:
    radial-gradient(ellipse 50% 60% at 50% 0%, var(--tape) 60%, transparent 62%);
  background-repeat:no-repeat;
  border-radius:50%;
  z-index:-1;
}

/* =======================================================
   マスキングテープ
   ======================================================= */
.tape{
  position:absolute;
  width:84px; height:26px;
  background:var(--tape);
  border-left:1px dashed rgba(160,74,44,.3);
  border-right:1px dashed rgba(160,74,44,.3);
  box-shadow:0 1px 2px rgba(58,47,40,.08);
  z-index:3;
}
.tape::before{ /* テープの縞 */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.18) 6px 7px);
}
.tape-tl{ top:-12px; left:14px; transform:rotate(-7deg); }
.tape-tr{ top:-12px; right:14px; transform:rotate(6deg); }
.tape-br{ bottom:-12px; right:18px; transform:rotate(5deg); background:var(--tape-olive); }
.tape-tc{ top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg); }

/* スタンプ印（消印風） */
.seal{
  display:inline-grid; place-items:center;
  width:1.9em; height:1.9em; margin-right:.5em;
  border:1.5px solid var(--terra);
  border-radius:50%;
  color:var(--terra);
  font-family:var(--f-util);
  font-size:.72em; font-weight:500;
  transform:rotate(-6deg);
  flex:0 0 auto;
}

/* =======================================================
   Header
   ======================================================= */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(239,230,214,.88);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1.5px dashed var(--line);
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--sumi); }
.brand-stamp{
  display:grid; place-items:center;
  width:42px; height:42px;
  border:2px solid var(--terra);
  border-radius:50%;
  color:var(--terra);
  font-family:var(--f-hand);
  font-size:1.3rem;
  transform:rotate(-8deg);
  background:var(--paper-lt);
}
.brand-stamp.small{ width:34px; height:34px; font-size:1.05rem; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-ja{ font-weight:700; font-size:1.02rem; letter-spacing:.02em; }
.brand-en{ font-family:var(--f-hand); font-size:.78rem; color:var(--olive); }

.head-nav{ display:flex; align-items:center; gap:1.4rem; }
.head-nav a{ text-decoration:none; color:var(--sumi-soft); font-size:.92rem; transition:color .2s; }
.head-nav a:hover{ color:var(--terra); }
.nav-cta{
  background:var(--terra); color:var(--paper-lt)!important;
  padding:.5rem 1.1rem; border-radius:999px;
  font-weight:500;
  box-shadow:0 2px 0 var(--terra-dk);
}
.nav-cta:hover{ background:var(--terra-dk); }

@media (max-width:760px){
  .head-nav a:not(.nav-cta){ display:none; }
}

/* =======================================================
   Buttons
   ======================================================= */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:999px;
  transition:transform .15s, background .2s, box-shadow .15s;
  border:none;
}
.btn-primary{
  background:var(--terra); color:var(--paper-lt);
  box-shadow:0 3px 0 var(--terra-dk);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--terra-dk); }
.btn-primary:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--terra-dk); }
.btn-sm{ padding:.6rem 1.2rem; font-size:.92rem; }
.btn-text{
  color:var(--sumi); background:transparent;
  text-decoration:underline; text-decoration-color:var(--olive);
  text-underline-offset:5px; text-decoration-thickness:2px;
  padding:.85rem .5rem;
}
.btn-text:hover{ color:var(--terra); }
.btn-line{
  background:var(--olive); color:var(--paper-lt);
  box-shadow:0 3px 0 var(--olive-dk);
}
.btn-line:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--olive-dk); }
.btn-ghost{
  background:transparent; color:var(--paper-lt);
  border:1.5px dashed rgba(246,239,226,.7);
}
.btn-ghost:hover{ background:rgba(246,239,226,.12); }
@media (prefers-reduced-motion: reduce){
  .btn:hover,.btn:active{ transform:none; }
}

/* =======================================================
   共通：写真カード（テープ留め・ポラロイド風）
   ======================================================= */
.photo-card{
  position:relative;
  background:var(--paper-lt);
  padding:14px 14px 10px;
  border-radius:var(--r-card);
  box-shadow:0 10px 30px rgba(58,47,40,.14), 0 2px 6px rgba(58,47,40,.08);
}
.photo-card.small{ max-width:280px; }
.tilt-r{ transform:rotate(1.6deg); }
.tilt-l{ transform:rotate(-1.8deg); }
.photo-frame{
  aspect-ratio:4/3;
  border-radius:3px;
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg, var(--paper-dk) 0 10px, #e9dcc4 10px 20px);
  border:1px solid var(--line);
  color:var(--olive-dk);
}
.photo-frame.portrait{ aspect-ratio:3/4; }
.photo-emo{ font-family:var(--f-hand); font-size:1rem; letter-spacing:.04em; opacity:.7; }
.photo-cap{
  font-family:var(--f-util); font-size:.74rem; color:var(--sumi-soft);
  margin:.55rem .15rem .1rem; line-height:1.5;
}

/* =======================================================
   Hero
   ======================================================= */
.hero{ position:relative; padding:3.2rem 0 4.8rem; overflow:hidden; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:3rem; align-items:center;
}
.eyebrow{
  font-family:var(--f-util); font-size:.85rem; letter-spacing:.06em;
  color:var(--olive-dk); display:flex; align-items:center; gap:.6rem;
  margin:0 0 1rem;
}
.dash{ width:30px; height:2px; background:var(--terra); display:inline-block; }
.hero-title{
  font-size:clamp(2.1rem, 5.2vw, 3.5rem);
  line-height:1.45; font-weight:700; margin:0 0 1.4rem;
  letter-spacing:.01em;
}
.hero-title .line{ display:block; }
.hero-title .hand{ font-size:1.14em; }
.hero-lead{ font-size:1.06rem; color:var(--sumi-soft); margin:0 0 1.8rem; }
.hero-actions{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.hero-note{ font-family:var(--f-util); font-size:.84rem; color:var(--olive-dk); margin:1.1rem 0 0; }

/* hero 写真 */
.hero-photo{ position:relative; display:flex; justify-content:center; }
.hero-photo .photo-card{ width:min(100%, 400px); }
.stamp-badge{
  position:absolute; bottom:-18px; left:-14px;
  width:96px; height:96px; border-radius:50%;
  background:var(--olive); color:var(--paper-lt);
  display:grid; place-items:center; text-align:center;
  font-family:var(--f-hand); font-size:.92rem; line-height:1.2;
  transform:rotate(-12deg);
  box-shadow:0 4px 12px rgba(58,47,40,.2);
  border:2px dashed rgba(246,239,226,.5);
}
.stamp-badge small{ display:block; font-family:var(--f-util); font-size:.52rem; letter-spacing:.18em; margin-top:.2rem; opacity:.85; }

.paper-edge{
  position:absolute; left:0; right:0; bottom:0; height:14px;
  background:
    repeating-linear-gradient(90deg, var(--paper-dk) 0 14px, transparent 14px 28px);
  mask:linear-gradient(#000,#000);
  opacity:.5;
}

/* =======================================================
   セクション共通の見出し
   ======================================================= */
.sec-label{
  font-family:var(--f-util); font-size:.86rem; letter-spacing:.05em;
  color:var(--olive-dk); display:inline-flex; align-items:center;
  margin:0 0 .9rem;
}
.sec-label.light{ color:var(--paper-dk); }
.sec-label.light .seal{ border-color:var(--paper-lt); color:var(--paper-lt); }
.sec-title{
  font-size:clamp(1.7rem, 4vw, 2.5rem);
  font-weight:700; line-height:1.5; margin:0 0 1rem;
}
.sec-title.light{ color:var(--paper-lt); }
.sec-title.light .hand{ color:#e8a07c; }
.sec-title.light .hand::after{ background:radial-gradient(ellipse 50% 60% at 50% 0%, rgba(232,160,124,.25) 60%, transparent 62%); }
.sec-intro{ max-width:54ch; color:var(--sumi-soft); margin:0 0 2.4rem; }
.sec-intro em{ font-style:normal; color:var(--terra-dk); font-family:var(--f-util); font-size:.92em; }
.sec-head{ margin-bottom:2.6rem; }

/* =======================================================
   About
   ======================================================= */
.about{ padding:4.5rem 0; }
.about-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:3.4rem; align-items:start; }
.about-side{ position:sticky; top:90px; }
.about-side .photo-card{ margin-top:1.2rem; }
.about-voice{ font-size:1.15rem; color:var(--sumi); font-weight:500; margin:0 0 1.2rem; }
.about-body p{ margin:0 0 1.1rem; }
.about-body strong{ color:var(--terra-dk); font-weight:700; }
.sign{ margin-top:2rem; display:flex; align-items:baseline; gap:.8rem; }
.sign-hand{ font-family:var(--f-hand); font-size:1.8rem; color:var(--terra); }
.sign-sub{ font-family:var(--f-util); font-size:.82rem; color:var(--olive-dk); }

/* =======================================================
   Lessons
   ======================================================= */
.lessons{
  padding:4.5rem 0;
  background:var(--paper-dk);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(58,47,40,.04) 0 1px, transparent 1px);
  background-size:16px 16px;
  border-block:2px dashed var(--line);
}
.menu-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.8rem; }
.recipe-card{
  position:relative;
  background:var(--paper-lt);
  border:1.5px solid var(--line);
  border-radius:var(--r-card);
  padding:1.6rem 1.6rem 1.7rem;
  box-shadow:0 4px 14px rgba(58,47,40,.07);
  transition:transform .2s, box-shadow .2s;
}
.recipe-card:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:0 10px 24px rgba(58,47,40,.12); }
@media (prefers-reduced-motion: reduce){ .recipe-card:hover{ transform:none; } }
.card-no{
  position:absolute; top:1.2rem; right:1.4rem;
  font-family:var(--f-hand); color:var(--terra); font-size:1rem;
  transform:rotate(4deg);
}
.card-photo{
  aspect-ratio:16/9; margin-bottom:1.1rem;
  border-radius:4px;
  background:repeating-linear-gradient(45deg, var(--paper-dk) 0 9px, #e9dcc4 9px 18px);
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.card-photo span{ font-family:var(--f-util); font-size:.72rem; color:var(--olive-dk); opacity:.65; }
.recipe-card h3{ font-size:1.3rem; margin:0 0 .6rem; }
.recipe-card p{ font-size:.95rem; color:var(--sumi-soft); margin:0 0 1.2rem; }
.card-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; margin:0; padding-top:1rem; border-top:1.5px dashed var(--line); }
.card-meta div{ display:flex; align-items:baseline; gap:.4rem; }
.card-meta dt{ font-family:var(--f-util); font-size:.72rem; color:var(--olive-dk); }
.card-meta dd{ margin:0; font-weight:500; font-size:.92rem; }

/* 体験カード（強調） */
.recipe-card.trial{
  background:var(--terra);
  color:var(--paper-lt);
  border-color:var(--terra-dk);
  display:flex; flex-direction:column;
}
.recipe-card.trial:hover{ transform:translateY(-4px) rotate(.5deg); }
.trial-tag{
  font-family:var(--f-hand); font-size:1.05rem;
  color:var(--paper-lt); display:inline-block; margin-bottom:.3rem;
}
.recipe-card.trial h3{ color:var(--paper-lt); }
.recipe-card.trial p{ color:rgba(246,239,226,.9); }
.recipe-card.trial .card-meta{ border-top-color:rgba(246,239,226,.4); }
.recipe-card.trial dt{ color:rgba(246,239,226,.75); }
.recipe-card.trial dd{ color:var(--paper-lt); }
.recipe-card.trial .btn{ margin-top:1.3rem; align-self:flex-start; background:var(--paper-lt); color:var(--terra-dk); box-shadow:0 3px 0 var(--paper-dk); }
.recipe-card.trial .btn:hover{ background:#fff; }

/* =======================================================
   Flow
   ======================================================= */
.flow{ padding:4.8rem 0; }
.flow-line{
  list-style:none; margin:0 0 2.6rem; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative;
}
.flow-line::before{ /* 点線でつなぐ */
  content:""; position:absolute; top:34px; left:8%; right:8%;
  border-top:2.5px dashed var(--line); z-index:0;
}
.flow-step{ position:relative; padding:0 .9rem; text-align:center; }
.flow-time{
  position:relative; z-index:1;
  display:inline-grid; place-items:center;
  width:68px; height:68px; margin-bottom:1rem;
  border-radius:50%;
  background:var(--olive); color:var(--paper-lt);
  font-family:var(--f-hand); font-size:.95rem;
  box-shadow:0 4px 0 var(--olive-dk);
  transform:rotate(-4deg);
}
.flow-step:nth-child(even) .flow-time{ background:var(--terra); box-shadow:0 4px 0 var(--terra-dk); transform:rotate(4deg); }
.flow-step h3{ font-size:1.05rem; margin:0 0 .5rem; }
.flow-step p{ font-size:.9rem; color:var(--sumi-soft); margin:0; line-height:1.8; }

.reassure{
  list-style:none; margin:0; padding:1.8rem 2rem;
  background:var(--paper-lt);
  border:1.5px dashed var(--terra);
  border-radius:var(--r-card);
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem 2rem;
}
.reassure li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; }
.check{
  flex:0 0 auto; color:var(--terra); font-weight:700;
  display:inline-grid; place-items:center; width:1.4em; height:1.4em;
  border:1.5px solid var(--terra); border-radius:50%; font-size:.8em;
  transform:rotate(-5deg);
}

/* =======================================================
   Voices
   ======================================================= */
.voices{
  padding:4.8rem 0;
  background:var(--olive);
  background-image:radial-gradient(circle at 80% 10%, rgba(255,255,255,.04) 0 1px, transparent 1px);
  background-size:18px 18px;
}
.voices .sec-label{ color:var(--paper-dk); }
.voices .sec-label .seal{ border-color:var(--paper-lt); color:var(--paper-lt); }
.voices .sec-title{ color:var(--paper-lt); }
.voices .sec-title .hand{ color:#f0d9a8; }
.voices .sec-title .hand::after{ background:radial-gradient(ellipse 50% 60% at 50% 0%, rgba(240,217,168,.28) 60%, transparent 62%); }
.voices .sec-intro{ color:rgba(246,239,226,.88); }
.voices .sec-intro em{ color:#f0d9a8; }

.voice-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.note-card{
  position:relative;
  background:var(--paper-lt);
  padding:2rem 1.5rem 1.4rem;
  border-radius:var(--r-card);
  box-shadow:0 8px 22px rgba(58,47,40,.18);
}
.note-card blockquote{ margin:0 0 1rem; font-size:1rem; line-height:1.95; color:var(--sumi); }
.note-card figcaption{
  font-family:var(--f-util); font-size:.8rem; color:var(--olive-dk);
  border-top:1.5px dashed var(--line); padding-top:.8rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
}
.demo-tag{
  font-family:var(--f-util); font-size:.66rem; letter-spacing:.05em;
  background:var(--terra); color:var(--paper-lt);
  padding:.12rem .5rem; border-radius:999px;
  transform:rotate(-3deg);
}

/* =======================================================
   Contact
   ======================================================= */
.contact{
  padding:5rem 0;
  background:var(--sumi);
  color:var(--paper-lt);
  background-image:radial-gradient(circle at 15% 80%, rgba(196,98,62,.07) 0 1px, transparent 1px);
  background-size:20px 20px;
}
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:3.2rem; align-items:start; }
.contact-lead{ color:rgba(246,239,226,.85); margin:0 0 2rem; max-width:48ch; }
.contact-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.contact-note{ font-family:var(--f-util); font-size:.78rem; color:rgba(246,239,226,.5); margin:1.4rem 0 0; }

.access-card{
  position:relative;
  background:var(--paper-lt); color:var(--sumi);
  padding:1.8rem 1.6rem; border-radius:var(--r-card);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transform:rotate(-1deg);
}
.access-card h3{ font-size:1.2rem; margin:.2rem 0 1rem; }
.map-placeholder{
  aspect-ratio:5/3; border-radius:4px; margin-bottom:1.2rem;
  background:
    repeating-linear-gradient(0deg, var(--paper-dk) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--paper-dk) 0 1px, transparent 1px 22px),
    #ece2cf;
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.map-placeholder span{ font-family:var(--f-util); font-size:.76rem; color:var(--olive-dk); opacity:.7; }
.access-list{ margin:0; }
.access-list div{ display:grid; grid-template-columns:4.5em 1fr; gap:.6rem; padding:.55rem 0; border-bottom:1.5px dashed var(--line); }
.access-list div:last-child{ border-bottom:none; }
.access-list dt{ font-family:var(--f-util); font-size:.82rem; color:var(--olive-dk); }
.access-list dd{ margin:0; font-size:.92rem; }

/* =======================================================
   Footer
   ======================================================= */
.site-foot{ background:var(--paper-dk); padding:2.6rem 0 1.6rem; border-top:2.5px dashed var(--line); }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:.7rem; font-size:.9rem; line-height:1.5; }
.foot-en{ font-family:var(--f-hand); color:var(--olive); font-size:.85rem; }
.foot-nav{ display:flex; gap:1.3rem; flex-wrap:wrap; }
.foot-nav a{ text-decoration:none; color:var(--sumi-soft); font-size:.88rem; }
.foot-nav a:hover{ color:var(--terra); }
.disclaimer{
  text-align:center; font-family:var(--f-util); font-size:.76rem;
  color:var(--sumi-soft); margin:2rem auto 0; max-width:var(--maxw);
  padding-top:1.4rem; border-top:1px dashed var(--line);
  width:min(100% - 2.5rem, var(--maxw));
}

/* =======================================================
   Responsive
   ======================================================= */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .hero-photo{ order:-1; }
  .about-grid{ grid-template-columns:1fr; gap:2rem; }
  .about-side{ position:static; }
  .about-side .photo-card{ max-width:240px; }
  .contact-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .voice-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
}
@media (max-width:680px){
  body{ font-size:15px; }
  .menu-grid{ grid-template-columns:1fr; }
  .flow-line{ grid-template-columns:1fr; gap:1.6rem; }
  .flow-line::before{ display:none; }
  .flow-step{ display:grid; grid-template-columns:68px 1fr; gap:1rem; text-align:left; align-items:start; }
  .flow-time{ margin-bottom:0; }
  .reassure{ grid-template-columns:1fr; padding:1.4rem 1.3rem; }
  .foot-inner{ flex-direction:column; align-items:flex-start; }
  .stamp-badge{ width:78px; height:78px; font-size:.78rem; bottom:-14px; }
}
@media (max-width:400px){
  .hero-title .hand{ white-space:normal; }
}