/* =========================================================
   はらっぱ LP — style.css
   カラフル × 洗練 / 白・クリーム基調＋差し色を効かせる / 写真主役
   ========================================================= */

:root{
  --green:#3E9B5F;
  --green-deep:#2E5A3E;
  --yellow:#F2B12E;
  --orange:#F0814A;
  --sky:#46B8CE;
  --coral:#F2675F;
  --cream:#FBF7EF;
  --paper:#FFFFFF;
  --ink:#3A332C;
  --sub:#7C7468;
  --line:#ECE5D7;
  --shadow:0 16px 44px rgba(58,51,44,.08);
  --maru:"Zen Maru Gothic", system-ui, sans-serif;
  --mincho:"Zen Old Mincho", serif;
  --serif:"Cormorant Garamond", serif;
  --sans:"Noto Sans JP", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);
  line-height:1.85;-webkit-font-smoothing:antialiased;text-size-adjust:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--maru);font-weight:700;line-height:1.4;margin:0;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}

.container{width:100%;max-width:1080px;margin:0 auto;padding:0 26px;}
.container.narrow{max-width:740px;}
.section{padding:46px 0;}
.pc-br{display:none;}

/* ---- buttons ---- */
.btn{
  display:inline-block;font-family:var(--maru);font-weight:700;
  padding:14px 30px;border-radius:999px;font-size:15px;line-height:1.3;letter-spacing:.02em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-cta{background:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(240,129,74,.34);}
.btn-cta:hover{background:#e3712f;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8);}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}
.btn-lg{font-size:17px;padding:17px 40px;}

/* ---- section heading（絵文字バッジ廃止・英字ラベル風の上品なeyebrow） ---- */
.sec-head{margin-bottom:22px;}
.sec-head.center{text-align:center;}
.sec-badge{display:none;}            /* 絵文字の丸バッジは廃止 */
.sec-eyebrow{
  font-family:var(--maru);font-weight:700;font-size:12px;letter-spacing:.22em;
  color:var(--green);margin:0 0 12px;display:inline-flex;align-items:center;gap:10px;
  text-transform:uppercase;
}
.sec-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--green);display:inline-block;}
.sec-head.center .sec-eyebrow::after{content:"";width:26px;height:1.5px;background:var(--green);display:inline-block;}
.sec-title{font-size:28px;color:var(--ink);line-height:1.4;letter-spacing:.01em;}
.sec-sub{margin:10px auto 0;max-width:640px;color:var(--sub);font-size:15px;text-wrap:balance;}

/* =========================================================
   Header
   ========================================================= */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:50;transition:background .3s ease, box-shadow .3s ease;}
.site-header.scrolled{background:rgba(251,247,239,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(58,51,44,.06);}
.header-inner{max-width:1180px;margin:0 auto;padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--maru);font-weight:900;font-size:20px;color:var(--green);letter-spacing:.02em;}
.logo-mark{width:30px;height:30px;min-width:30px;display:block;border-radius:7px;flex-shrink:0;}
.logo-text{white-space:nowrap;}
.site-header:not(.scrolled) .logo{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4);}
.nav{display:none;}
.header-cta{padding:9px 20px;font-size:13px;}

/* =========================================================
   FV（写真主役・全幅・最小限のテキスト）
   ========================================================= */
.fv{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:80px 26px 48px;}
.fv-media{position:absolute;inset:0;z-index:0;}
.fv-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;}
.fv-tint{position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,14,8,.18) 0%, rgba(20,14,8,0) 26%, rgba(20,14,8,.6) 100%),
    linear-gradient(90deg, rgba(20,14,8,.36) 0%, rgba(20,14,8,0) 42%, rgba(20,14,8,.34) 100%);
}
.fv-garland{position:absolute;top:0;left:0;width:100%;height:6px;z-index:1;
  background:repeating-linear-gradient(90deg,var(--yellow) 0 32px,var(--orange) 32px 64px,var(--sky) 64px 96px,var(--coral) 96px 128px,var(--green) 128px 160px);opacity:.92;}
.fv-copy{position:relative;z-index:1;color:#fff;max-width:620px;}
.fv-badge{display:inline-block;font-family:var(--maru);font-weight:700;font-size:9px;letter-spacing:.02em;background:rgba(62,155,95,.95);padding:3.5px 10px;border-radius:999px;margin-bottom:14px;box-shadow:0 1px 8px rgba(0,0,0,.25);}
.fv-title{font-size:37px;font-weight:900;line-height:1.32;letter-spacing:0;white-space:nowrap;text-shadow:0 2px 28px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.4);}
.fv-lead{margin-top:18px;font-size:15px;line-height:2;text-shadow:0 1px 16px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5);}
.fv-actions{margin-top:26px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}

/* FV右の1日タイムライン（写真の上・シャドウで可読） */
.fv-timeline{position:relative;z-index:1;list-style:none;margin:28px 0 0;padding:0;color:#fff;max-width:560px;}
.fv-timeline li{display:flex;gap:14px;padding-bottom:14px;}
.ft-time{font-family:var(--serif);font-size:15px;flex-shrink:0;width:46px;padding-top:2px;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.ft-body h3{font-size:15px;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5);}
.ft-body p{font-size:12px;line-height:1.7;margin-top:2px;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.8);}

/* =========================================================
   特徴バー（カラフルを線と文字で・ベタ塗りしない）
   ========================================================= */
.stats{background:var(--paper);border-bottom:1px solid var(--line);}
.stats-list{list-style:none;margin:0;padding:30px 0;display:grid;grid-template-columns:1fr 1fr;gap:26px 8px;text-align:center;}
.stats-list li{position:relative;}
.stats-list li:not(:last-child)::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:var(--line);}
.stat-num{display:block;font-family:var(--maru);font-weight:700;font-size:16px;color:var(--ink);}
.stat-num b{color:var(--green);}
.stat-label{display:block;font-size:12px;color:var(--sub);margin-top:4px;letter-spacing:.02em;}

/* =========================================================
   お店のこと
   ========================================================= */
.about{background:var(--cream);}
.about-lead{text-align:center;font-size:17px;line-height:2;margin:0 auto 28px;max-width:680px;color:var(--ink);text-wrap:balance;}
.cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cross-item{background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.ci-photo{margin:0;}
.ci-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.ci-body{padding:12px 10px 16px;text-align:center;}
.cross-label{font-family:var(--maru);font-weight:700;font-size:13px;color:var(--ink);line-height:1.4;}
.cross-desc{font-size:11px;color:var(--sub);margin-top:6px;line-height:1.7;}

/* =========================================================
   メニュー
   ========================================================= */
.menu{background:var(--paper);}
.menu-hero{margin:0 auto 14px;max-width:820px;}
.menu-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.menu-tabs{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0;margin:0 0 32px;font-family:var(--mincho);}
.menu-tabs .sep{color:var(--green);font-size:9px;flex-shrink:0;}
.menu-tab{background:none;border:none;font-family:var(--mincho);font-size:12px;color:var(--ink);cursor:pointer;padding:6px 6px;position:relative;letter-spacing:.02em;transition:color .2s;white-space:nowrap;flex-shrink:0;}
.menu-tab:hover{color:var(--green);}
.menu-tab.is-on{color:var(--green);font-weight:700;}
.menu-tab.is-on::after{content:"";position:absolute;left:6px;right:6px;bottom:-4px;height:2px;background:var(--green);}
.menu-panels{max-width:330px;margin:0 auto;min-height:200px;}
.menu-panel{display:none;list-style:none;margin:0;padding:0;}
.menu-panel.is-on{display:block;animation:menuFade .3s ease;}
@keyframes menuFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.menu-list li{display:flex;justify-content:space-between;gap:12px;padding:13px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line);}
.menu-list li:last-child{border-bottom:none;}
.menu-list .price{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--sub);white-space:nowrap;}
.menu-note{text-align:center;margin-top:30px;font-size:13px;color:var(--sub);}

/* 写真を手描きの大きく波打つ輪郭でマスク（明確に紙をちぎったような形に） */
.organic img, .split-photo img{
  border-radius:0;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="none"><path d="M70,120 C250,52 430,108 600,74 C770,40 940,118 1080,68 C1150,44 1182,96 1150,170 C1196,300 1140,470 1172,590 C1192,680 1130,742 1030,724 C840,766 640,712 460,752 C300,786 160,724 110,758 C44,732 40,654 72,548 C30,400 78,250 56,180 C46,140 56,128 70,120 Z" fill="black"/></svg>') no-repeat center/100% 100%;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="none"><path d="M70,120 C250,52 430,108 600,74 C770,40 940,118 1080,68 C1150,44 1182,96 1150,170 C1196,300 1140,470 1172,590 C1192,680 1130,742 1030,724 C840,766 640,712 460,752 C300,786 160,724 110,758 C44,732 40,654 72,548 C30,400 78,250 56,180 C46,140 56,128 70,120 Z" fill="black"/></svg>') no-repeat center/100% 100%;}

/* =========================================================
   ギャラリー（コラージュ）
   ========================================================= */
.gallery{background:var(--cream);}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.collage figure{margin:0;border:6px solid #fff;border-radius:4px;box-shadow:0 12px 30px rgba(58,51,44,.16);overflow:hidden;}
.collage figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.collage .c1{grid-column:1 / -1;}

/* =========================================================
   split（子連れ / 食卓）写真を大きく主役に
   ========================================================= */
.family{background:var(--paper);}
.table{background:var(--cream);}
.split{display:flex;flex-direction:column;gap:30px;}
.split-photo{margin:0;}
.split-photo img{width:100%;height:auto;aspect-ratio:4/3.4;object-fit:cover;}
.split.reverse .split-photo img{
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="none"><path d="M64,170 C34,310 96,470 60,600 C40,690 110,748 214,726 C420,768 640,712 824,752 C980,786 1120,720 1146,612 C1188,460 1132,300 1166,176 C1184,96 1120,52 1016,76 C820,38 620,98 444,66 C290,38 140,96 96,62 C44,84 40,160 64,170 Z" fill="black"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" preserveAspectRatio="none"><path d="M64,170 C34,310 96,470 60,600 C40,690 110,748 214,726 C420,768 640,712 824,752 C980,786 1120,720 1146,612 C1188,460 1132,300 1166,176 C1184,96 1120,52 1016,76 C820,38 620,98 444,66 C290,38 140,96 96,62 C44,84 40,160 64,170 Z" fill="black"/></svg>');}
.split-lead{font-size:15px;color:var(--sub);line-height:2;margin-bottom:20px;}
.dot-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.dot-list li{position:relative;padding-left:26px;font-size:15px;}
.dot-list li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--green);}
.info-dl{margin:18px 0 0;border-top:1px solid var(--line);}
.info-dl>div{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);}
.info-dl dt{font-family:var(--maru);font-weight:700;color:var(--green);width:74px;flex-shrink:0;font-size:14px;}
.info-dl dd{margin:0;font-size:15px;}

/* =========================================================
   1日の流れ（タイムライン）
   ========================================================= */
.day{background:var(--paper);}
.timeline{list-style:none;margin:0;padding:0;position:relative;}
.timeline::before{content:"";position:absolute;left:13px;top:10px;bottom:10px;width:1.5px;background:var(--line);}
.timeline li{position:relative;padding:0 0 22px 46px;}
.timeline li::before{content:"";position:absolute;left:7px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--orange);}
.tl-time{font-family:var(--maru);font-weight:700;color:var(--green);font-size:14px;letter-spacing:.04em;}
.tl-body h3{font-size:17px;margin:3px 0 5px;color:var(--ink);}
.tl-body p{font-size:14px;color:var(--sub);line-height:1.9;}

/* =========================================================
   こだわり
   ========================================================= */
.safe{background:var(--cream);}
.safe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.safe-item{background:var(--paper);border-radius:14px;padding:18px 16px;box-shadow:var(--shadow);}
.safe-item>span{font-size:24px;display:block;margin-bottom:6px;}
.safe-item h3{font-size:14px;color:var(--ink);margin:0 0 5px;}
.safe-item p{font-size:12px;color:var(--sub);line-height:1.8;}

/* =========================================================
   お客さまの声
   ========================================================= */
.voices{background:var(--paper);}
.voices-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.voice-card{margin:0;background:var(--cream);border-radius:16px;padding:28px 26px;}
.voice-card p{font-size:15px;line-height:2;}
.voice-card footer{margin-top:14px;font-family:var(--maru);font-weight:700;font-size:13px;color:var(--green);}
.voices-note{text-align:center;margin-top:20px;font-size:12px;color:var(--sub);}

/* =========================================================
   FAQ
   ========================================================= */
.faq{background:var(--cream);}
.faq-list{list-style:none;margin:0;padding:0;}
.faq-list li{background:transparent;border-bottom:1px solid var(--line);padding:22px 0;}
.faq-list li:first-child{border-top:1px solid var(--line);}
.faq-list .q{font-family:var(--maru);font-weight:700;font-size:16px;color:var(--ink);position:relative;padding-left:28px;}
.faq-list .q::before{content:"Q";position:absolute;left:0;top:0;color:var(--orange);font-weight:900;}
.faq-list .a{font-size:14px;color:var(--sub);margin-top:10px;padding-left:28px;line-height:1.9;}

/* =========================================================
   アクセス・CTA
   ========================================================= */
.access{background:var(--green-deep);color:#fff;}
.access-cta{text-align:center;max-width:660px;margin:0 auto 44px;}
.access-title{font-size:30px;color:#fff;line-height:1.4;}
.access-lead{margin:18px 0 28px;font-size:15px;color:rgba(255,255,255,.88);line-height:2;}
.access .btn-cta{background:var(--yellow);color:var(--green-deep);}
.access .btn-cta:hover{background:#fff;}
.access-info{max-width:660px;margin:0 auto;}
.access-info dl{margin:0;}
.access-info dl>div{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.16);}
.access-info dl>div:last-child{border-bottom:none;}
.access-info dt{font-family:var(--maru);font-weight:700;width:130px;flex-shrink:0;color:#fff;font-size:14px;}
.access-info dd{margin:0;color:rgba(255,255,255,.9);font-size:15px;}
.access-info .muted{font-size:12px;color:rgba(255,255,255,.6);}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:#26342a;color:rgba(255,255,255,.78);padding:52px 0 38px;text-align:center;}
.footer-logo{font-family:var(--maru);font-weight:900;font-size:20px;color:#fff;letter-spacing:.02em;}
.footer-tagline{font-size:13px;margin-top:8px;color:rgba(255,255,255,.7);}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:26px 0;font-size:13px;}
.footer-nav a{color:rgba(255,255,255,.78);}
.footer-nav a:hover{color:#fff;}
.footer-note{font-size:11px;color:rgba(255,255,255,.45);max-width:560px;margin:0 auto;line-height:1.8;}

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

/* =========================================================
   Tablet / PC
   ========================================================= */
@media (min-width:768px){
  .section{padding:62px 0;}
  .pc-br{display:inline;}
  .sec-title{font-size:34px;}
  .nav{display:flex;gap:28px;font-family:var(--maru);font-weight:700;font-size:14px;letter-spacing:.02em;}
  .nav a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3);transition:opacity .2s;}
  .site-header.scrolled .nav a{color:var(--ink);text-shadow:none;}
  .nav a:hover{opacity:.65;}

  .fv{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;padding:96px 72px;min-height:94vh;}
  .fv-copy{max-width:540px;}
  .fv-badge{font-size:12px;letter-spacing:.1em;padding:8px 18px;margin-bottom:20px;}
  .fv-title{font-size:52px;}
  .fv-lead{font-size:17px;}
  .fv-actions{flex-direction:row;align-items:center;}
  .fv-timeline{margin:0 0 6px;max-width:330px;}
  .ft-body p{font-size:12px;}

  .stats-list{grid-template-columns:repeat(4,1fr);gap:8px;}
  .cross-grid{gap:24px;}
  .cross-item{border-radius:18px;}
  .ci-photo img{aspect-ratio:3/2;}
  .ci-body{padding:22px 24px 26px;}
  .cross-label{font-size:18px;}
  .cross-desc{font-size:14px;}
  .menu-tabs{gap:2px;}
  .menu-tab{font-size:15px;padding:6px 16px;letter-spacing:.08em;}
  .menu-tabs .sep{font-size:11px;}
  .menu-tab.is-on::after{left:16px;right:16px;}
  .safe-grid{gap:22px;}
  .safe-item{padding:26px 24px;}
  .safe-item>span{font-size:26px;}
  .safe-item h3{font-size:16px;}
  .safe-item p{font-size:14px;}
  .voices-grid{grid-template-columns:repeat(3,1fr);gap:22px;}
  .timeline{max-width:680px;margin:0 auto;}

  .split{flex-direction:row;align-items:center;gap:56px;}
  .split-photo{flex:1.15;}
  .split-text{flex:1;}
  .split.reverse{flex-direction:row-reverse;}

  /* コラージュ：PCは斜めに重ねて立体的に */
  .collage{display:block;position:relative;height:600px;max-width:1000px;margin:0 auto;}
  .collage figure{position:absolute;border-width:8px;transition:transform .25s ease, box-shadow .25s ease;}
  .collage figure img{width:100%;height:100%;aspect-ratio:auto;}
  .collage figure:hover{transform:scale(1.04) rotate(0deg)!important;box-shadow:0 24px 54px rgba(58,51,44,.26);z-index:10;}
  .collage .c1{width:430px;height:290px;top:150px;left:285px;transform:rotate(-2deg);z-index:5;}
  .collage .c2{width:250px;height:188px;top:18px;left:60px;transform:rotate(-6deg);z-index:3;}
  .collage .c3{width:236px;height:172px;top:0;left:540px;transform:rotate(5deg);z-index:3;}
  .collage .c4{width:256px;height:192px;top:332px;left:38px;transform:rotate(4deg);z-index:4;}
  .collage .c5{width:250px;height:188px;top:360px;left:600px;transform:rotate(-5deg);z-index:4;}
  .collage .c6{width:214px;height:214px;top:152px;left:738px;transform:rotate(8deg);z-index:2;}
  .collage .c7{width:222px;height:160px;top:62px;left:332px;transform:rotate(3deg);z-index:2;}
}

@media (min-width:1024px){
  .fv-title{font-size:68px;}
}