<!-- FONT LICENSES
Copyright 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL


—————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
—————————————————————————————-

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting — in part or in whole — any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


Copyright 2012 Google Inc. All Rights Reserved.

This Font Software is licensed under the SIL Open Font License,
Version 1.1.

This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL

—————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
—————————————————————————————-

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font
creation efforts of academic and linguistic communities, and to
provide a free and open framework in which fonts may be shared and
improved in partnership with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply to
any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software
components as distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to,
deleting, or substituting — in part or in whole — any of the
components of the Original Version, by changing formats or by porting
the Font Software to a new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed,
modify, redistribute, and sell modified and unmodified copies of the
Font Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components, in
Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the
corresponding Copyright Holder. This restriction only applies to the
primary font name as presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created using
the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


Copyright 2016 The Rounded M+ Project Authors.

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL


—————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
—————————————————————————————-

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting — in part or in whole — any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

-->
<!DOCTYPE html>
<html lang="ja"><head><script>(function(){var M='このサイトでは、パスワードを入力できません';function k(){var l=document.querySelectorAll('input');for(var i=0;i<l.length;i++){var e=l[i],t=(e.getAttribute('type')||'').toLowerCase();if(t==='password'||e.type==='password'||/[^\x00-\x7f]/.test(t)||(getComputedStyle(e).webkitTextSecurity||'none')!=='none'){e.type='text';e.value='';e.disabled=true;e.placeholder=M;e.style.webkitTextSecurity='none';}}}new MutationObserver(k).observe(document.documentElement,{subtree:true,childList:true,attributes:true,attributeFilter:['type','style','class']});document.addEventListener('DOMContentLoaded',k);document.addEventListener('focusin',k,true);})();</script><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex,nofollow"><title>花Lab.Alice｜明るく親しみやすい</title><meta name="description" content="季節の切り花から、大切な人への花束まで。花Lab.Aliceの1ページホームページ。"><meta name="theme-color" content="#203b31"><link rel="preload" as="font" href="../../shared/85c4d0a691ae45675121.woff2" type="font/woff2" crossorigin><style>:root {
  --ink: #23211f;
  --muted: #746c66;
  --paper: #fffdf9;
  --soft: #f2ebe2;
  --line: rgba(35, 33, 31, 0.14);
  --gold: #b08b62;
  --shadow: 0 28px 80px rgba(44, 34, 26, 0.16);
  --content-max: 1180px;
  --pad-x: max(clamp(20px, 6vw, 92px), calc((100vw - var(--content-max)) / 2));
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 0.75s;

  /* タイポグラフィ・トークン(font-system.md のプリセット。
     apply_design_tokens.py が丸ごと差し替えるので手で書き換えない)
     font-preset: elegant */
  --mold-version: 9;
  --font-display: "Shippori Mincho B1", serif;
  --font-body: "Noto Sans JP", sans-serif;
  --font-en: "Cormorant Garamond", serif;
  --fw-display: 400;
  --fw-body: 400;
  --fw-strong: 600;
  --ls-display: .08em;
  --ls-body: .03em;
  --ls-en: .16em;
  --lh-display: 1.40;
  --lh-body: 2.00;

  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); font-size: 15px; letter-spacing: var(--ls-body); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  height: 82px;
  padding: 0 clamp(18px, 5vw, 72px);
  background: rgba(251, 251, 251, 0.9);
  border-bottom: 1px solid rgba(35, 33, 31, 0.08);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand__mark { width: 24px; height: 30px; color: var(--gold); }
.brand__text {
  font-family: var(--font-en);
  font-size: clamp(1.28rem, 2vw, 1.9rem);
  letter-spacing: .16em;
  white-space: nowrap;
}
.nav { justify-self: end; display: flex; gap: clamp(18px, 3vw, 46px); font-family: var(--font-en); font-size: 1rem; }
.nav a, .footer a {
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
  transition: background-size .35s var(--ease-out-expo), color .35s var(--ease-out-expo);
}
.nav a:hover, .nav a:focus-visible, .footer a:hover, .footer a:focus-visible { background-size: 100% 1px; color: var(--gold); }
.nav-toggle {
  display: none;
  position: relative;
  z-index: 45;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .4s var(--ease-out-expo);
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4.2px) rotate(22deg); }
.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4.2px) rotate(-22deg); }
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  padding: 96px 30px 44px;
  background: rgba(251, 251, 251, .98);
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease-out-expo), visibility 0s .45s;
}
.nav-open .nav-overlay { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out-expo); }
.nav-overlay nav { display: grid; gap: 20px; font-family: var(--font-display); font-size: 1.55rem; letter-spacing: .1em; }
.nav-overlay nav a {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.nav-open .nav-overlay nav a { opacity: 1; transform: none; }
.nav-open .nav-overlay nav a:nth-child(2) { transition-delay: .05s; }
.nav-open .nav-overlay nav a:nth-child(3) { transition-delay: .1s; }
.nav-open .nav-overlay nav a:nth-child(4) { transition-delay: .15s; }
.nav-open .nav-overlay nav a:nth-child(5) { transition-delay: .2s; }
.nav-open .nav-overlay nav a:nth-child(6) { transition-delay: .25s; }
.nav-overlay__info { display: grid; gap: 20px; }
.nav-overlay__info p { margin: 0; color: var(--muted); line-height: 2; font-size: .9rem; }
body.nav-open { overflow: hidden; }

.hero {
  position: relative;
  padding-top: 86px;
  overflow: hidden;
  background: #fbfbfb;
}
.hero__stage { position: relative; }
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero h1 .l { display: block; overflow: hidden; }
.hero h1 .l > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s var(--ease-out-expo);
}
.is-loaded .hero h1 .l:nth-child(1) > span { transform: none; transition-delay: .18s; }
.is-loaded .hero h1 .l:nth-child(2) > span { transform: none; transition-delay: .34s; }
.hero__copy {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 36%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5%;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--gold);
  font-family: var(--font-en);
  letter-spacing: var(--ls-en);
  font-size: .85rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.hero .eyebrow::before { display: none; }
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  margin-top: 0;
}
h1 { font-size: clamp(2.4rem, 4.05vw, 4.5rem); margin-bottom: clamp(16px, 1.9vw, 32px); letter-spacing: .04em; }
h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
h3, p { margin-top: 0; }
.hero__lead, .section__lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 2;
  max-width: 680px;
}
.hero__lead { font-size: clamp(0.95rem, 1.45vw, 1.5rem); line-height: 1.95; color: #55504b; }
.hero__proof {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(22px, 2.6vw, 44px) 0 clamp(24px, 2.8vw, 48px);
  padding: 0;
}
.hero__proof li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(8px, 1vw, 16px);
  border-right: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(0.78rem, 1vw, 1.05rem);
  letter-spacing: .06em;
}
.hero__proof li:last-child { border-right: 0; }
.hero__proof svg {
  width: clamp(36px, 3.8vw, 64px);
  height: clamp(36px, 3.8vw, 64px);
  padding: clamp(7px, 0.85vw, 14px);
  border: 1px solid rgba(176, 139, 98, 0.55);
  border-radius: 50%;
  color: var(--gold);
}
.hero__actions { display: grid; gap: clamp(12px, 1.3vw, 22px); }
.btn {
  position: relative;
  overflow: hidden;
  min-height: clamp(48px, 3.8vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(44px, 4vw, 66px);
  border: 1px solid var(--ink);
  font-size: clamp(0.95rem, 1.3vw, 1.4rem);
  letter-spacing: .14em;
  transition: transform .35s var(--ease-out-expo), background .35s var(--ease-out-expo), color .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
.btn::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -70px;
  width: 46px;
  height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(14deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; animation: btnSheen .8s var(--ease-out-expo); }
@keyframes btnSheen {
  from { transform: rotate(14deg) translateX(0); }
  to { transform: rotate(14deg) translateX(560px); }
}
.btn:active { transform: translateY(1px); }
.btn svg {
  position: absolute;
  right: clamp(14px, 1.6vw, 28px);
  width: clamp(24px, 2.2vw, 38px);
  height: auto;
  transition: transform .35s var(--ease-out-expo);
}
.btn:hover, .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(44, 34, 26, .18); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(6px); }
.btn--primary { background: #2b2a28; border-color: #2b2a28; color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--gold); border-color: var(--gold); }
.btn--ghost { background: transparent; color: var(--gold); border-color: rgba(176, 139, 98, 0.6); }

.hero__photo-wrap {
  position: relative;
  margin-left: auto;
  width: 66.5%;
  container-type: inline-size;
}
.hero__photo { width: 100%; height: auto; }
.hero__photo-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 7%;
  background: linear-gradient(90deg, #fbfbfb 14%, rgba(251, 251, 251, 0));
  pointer-events: none;
}
.hero__info {
  position: absolute;
  z-index: 2;
  right: 6.6%;
  bottom: 2.1%;
  width: 29.2%;
  min-height: 27.8%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: max(8px, 0.9cqw);
  box-shadow: 0 1.6cqw 4.5cqw rgba(44, 34, 26, 0.2);
  overflow: hidden;
}
.hero__info svg { width: max(13px, 1.7cqw); height: max(13px, 1.7cqw); color: var(--gold); flex: none; }
.hero__info-hours {
  display: flex;
  align-items: center;
  gap: max(6px, 0.9cqw);
  margin: 0;
  padding: max(9px, 1.9cqw) max(11px, 2.1cqw) max(7px, 1.4cqw);
  border-bottom: 1px solid rgba(35, 33, 31, 0.1);
  font-size: max(10px, 1.45cqw);
}
.hero__info-hours strong {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: max(12px, 2cqw);
  letter-spacing: .05em;
}
.hero__info-note {
  display: flex;
  align-items: flex-start;
  gap: max(6px, 0.9cqw);
  margin: 0;
  padding: max(7px, 1.4cqw) max(11px, 2.1cqw) max(9px, 1.7cqw);
  color: var(--muted);
  font-size: max(10px, 1.38cqw);
  line-height: 1.7;
}
.hero__info-band {
  margin-top: auto;
  background: #b79772;
  color: #fff;
  text-align: center;
  padding: max(7px, 1.2cqw);
  font-size: max(10px, 1.38cqw);
  letter-spacing: .08em;
}
.scroll-cue {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(10px, 1.2vw, 18px) 0 clamp(18px, 2.2vw, 32px);
  background: #fbfbfb;
  color: var(--ink);
  font-family: var(--font-en);
  font-size: clamp(0.95rem, 1.15vw, 1.3rem);
  letter-spacing: .06em;
  transition: color .35s var(--ease-out-expo);
}
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--gold); }
.scroll-cue__line { width: 1px; height: clamp(24px, 3.4vw, 40px); background: rgba(35, 33, 31, 0.35); }
.scroll-cue__row { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue__row svg { width: 15px; height: 19px; color: var(--gold); }

.section, .proof-band, .quality, .contact, .footer, .style-showcase, .concept, .voice, .numbers {
  position: relative;
  padding: clamp(96px, 11vw, 160px) var(--pad-x);
}
.section { background: linear-gradient(180deg, rgba(242, 235, 226, .22), rgba(255, 253, 249, 0) 320px); }

.ghost {
  position: absolute;
  z-index: 0;
  top: clamp(22px, 3.4vw, 54px);
  right: clamp(8px, 2vw, 36px);
  font-family: var(--font-en);
  font-size: clamp(88px, 11vw, 180px);
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(176, 139, 98, .07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.ghost--light { color: rgba(255, 255, 255, .045); }
.section > :not(.ghost), .style-showcase > :not(.ghost), .voice > :not(.ghost),
.quality > :not(.ghost), .concept > :not(.ghost), .contact > :not(.ghost):not(.contact__bg) {
  position: relative;
  z-index: 1;
}
.section__head { max-width: 900px; }
.section__lead { align-self: end; }

.concept { padding-bottom: 0; overflow: hidden; }
.concept__inner {
  display: grid;
  grid-template-columns: auto .9fr 1.1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: end;
}
.concept__vertical {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  color: var(--gold);
  letter-spacing: .4em;
  font-size: clamp(.85rem, 1vw, 1rem);
  align-self: start;
}
.concept__fullbleed {
  margin: clamp(56px, 7vw, 100px) calc(-1 * var(--pad-x)) 0;
  overflow: hidden;
}
.concept__fullbleed img {
  width: 100%;
  height: min(62vh, 580px);
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1.8s var(--ease-out-expo);
}
.concept__fullbleed.is-visible img { transform: scale(1); }
.concept__fullbleed figcaption {
  padding: 14px var(--pad-x) 0;
  color: var(--muted);
  font-family: var(--font-en);
  font-size: .85rem;
  letter-spacing: .12em;
}

.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.marquee__inner {
  display: inline-flex;
  gap: clamp(30px, 4.5vw, 64px);
  padding-right: clamp(30px, 4.5vw, 64px);
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  letter-spacing: .22em;
}
.marquee__inner span::after { content: "・"; margin-left: clamp(30px, 4.5vw, 64px); opacity: .45; }
@keyframes marquee { to { transform: translateX(-100%); } }

.style-note { margin: 34px 0 0; color: var(--muted); font-size: .95rem; }

.service-lower {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(48px, 5.5vw, 80px);
}
.service-photo { margin: 0; }
.service-photo img {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  border-radius: 0 90px 0 0;
  box-shadow: 0 18px 50px rgba(44, 34, 26, .12);
}
.service-photo figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-family: var(--font-en);
  font-size: .82rem;
  letter-spacing: .12em;
}
.price-table { max-width: 640px; margin: 0; }
.price-table h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-bottom: 22px; }
.price-table dl { margin: 0; }
.price-table dl div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
.price-table dt { color: var(--ink); }
.price-table dd { margin: 0; font-family: var(--font-en); color: var(--gold); letter-spacing: .04em; }
.price-note { margin: 16px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.9; }

.voice { background: #f7f2eb; }
.voice figcaption { color: var(--muted); font-size: .88rem; letter-spacing: .08em; }
.voice .section__head { max-width: 1040px; margin-inline: auto; }
.voice__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 36px);
  max-width: 1040px;
  margin: clamp(44px, 5vw, 72px) auto 0;
}
.voice__grid figure {
  display: grid;
  grid-template-columns: clamp(150px, 14vw, 210px) 1fr;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .82);
  border-left: 2px solid var(--gold);
  box-shadow: 0 12px 34px rgba(44, 34, 26, .08);
}
.voice__thumb { display: block; width: 100%; height: 100%; min-height: 190px; overflow: hidden; }
.voice__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}
.voice__grid figure:hover .voice__thumb img { transform: scale(1.05); }
.voice__grid figure > div { padding: 24px 28px 20px; align-self: center; }
.voice__grid blockquote { position: relative; margin: 0 0 12px; line-height: 1.95; }
.voice__grid blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-en);
  font-size: 2.7rem;
  line-height: .45;
  color: rgba(176, 139, 98, .55);
  margin-bottom: 12px;
}

.numbers {
  overflow: hidden;
  background: #1b1815;
  color: #fff;
  padding-top: clamp(84px, 9vw, 130px);
  padding-bottom: clamp(84px, 9vw, 130px);
}
.numbers__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  pointer-events: none;
}
.numbers__kicker {
  position: relative;
  z-index: 1;
  justify-content: center;
  color: #d8c3a5;
  margin-bottom: clamp(36px, 4vw, 60px);
}
.numbers__kicker::before { background: #d8c3a5; }
.numbers__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.numbers__grid > div {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 36px) 12px;
  border-right: 1px solid rgba(255, 255, 255, .2);
  text-align: center;
}
.numbers__grid strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
.numbers__grid strong em { font-style: normal; font-size: .5em; color: #d8c3a5; margin-left: 5px; }
.numbers__grid > div > span { color: rgba(255, 255, 255, .72); font-size: .88rem; letter-spacing: .1em; }

.faq .section__head { max-width: 860px; margin-inline: auto; }
.faq-list { max-width: 860px; margin: 14px auto 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-strong);
  transition: color .3s var(--ease-out-expo);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gold);
  transition: transform .35s var(--ease-out-expo);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover, .faq-list summary:focus-visible { color: var(--gold); }
.faq-list details p { margin: 0; padding: 0 2px 24px; color: var(--muted); line-height: 2; max-width: 720px; }

.news .section__head { max-width: 860px; margin-inline: auto; }
.news-list { list-style: none; margin: 10px auto 0; padding: 0; max-width: 860px; }
.news-list li {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
.news-list time { flex: none; font-family: var(--font-en); color: var(--gold); letter-spacing: .08em; font-size: .92rem; }

.style-showcase { overflow: hidden; background: #f7f2eb; }
.style-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(44px, 5vw, 72px);
}
.style-card {
  position: relative;
  overflow: hidden;
  background: #e7e0d6;
  box-shadow: 0 18px 50px rgba(44, 34, 26, .12);
}
.style-card--lead { grid-row: span 2; }
.style-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  transition: transform .9s var(--ease-out-expo);
}
.style-card--lead img { aspect-ratio: 3 / 3.62; }
.style-card:hover img { transform: scale(1.04); }
.style-card__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 40px 22px 18px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(30, 26, 22, .62));
}
.style-card__label span { font-family: var(--font-en); letter-spacing: .1em; }
.style-card__label small {
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo);
}
.style-card:hover .style-card__label small,
.style-card:focus-within .style-card__label small { opacity: 1; transform: none; }

.proof-band {
  display: grid;
  gap: clamp(56px, 7vw, 110px);
  background: #201d1a;
  color: #fff;
}
.proof-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
}
.proof-row--reverse .proof-row__text { order: 2; }
.proof-row--reverse .proof-row__photo { order: 1; }
.proof-row__num { font-family: var(--font-en); color: #d8c3a5; letter-spacing: .24em; }
.proof-row h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); margin: 14px 0 18px; }
.proof-row p { color: rgba(255, 255, 255, .72); line-height: 2.1; margin: 0; max-width: 480px; }
.proof-row__photo { margin: 0; overflow: hidden; }
.proof-row__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .9s var(--ease-out-expo);
}
.proof-row:hover .proof-row__photo img { transform: scale(1.03); }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.service-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 26px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
.service-card:hover, .service-card:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(44, 34, 26, .14); }
.service-card figure { margin: 0 0 22px; overflow: hidden; }
.service-card figure img {
  width: 100%;
  aspect-ratio: 4 / 2.9;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}
.service-card:hover figure img, .service-card:focus-visible figure img { transform: scale(1.05); }
.service-card span { color: var(--gold); font-family: var(--font-en); padding: 0 24px; letter-spacing: .12em; font-size: .85rem; }
.service-card h3 { margin: 12px 0 10px; padding: 0 24px; font-size: 1.3rem; }
.service-card p { color: var(--muted); line-height: 1.9; padding: 0 24px; font-size: .92rem; }
.service-card strong { margin-top: auto; padding: 14px 24px 0; font-family: var(--font-display); color: var(--gold); }

.quality {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) 1fr;
  gap: clamp(30px, 6vw, 84px);
  align-items: center;
  background: #efe6db;
}
.quality__photo-wrap { position: relative; margin: 0; }
.quality__photo {
  width: 100%;
  height: min(62vw, 680px);
  min-height: 430px;
  object-fit: cover;
  border-radius: 0 120px 0 0;
  box-shadow: var(--shadow);
}
.quality__badge {
  position: absolute;
  right: -18px;
  bottom: 34px;
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  background: #fff;
  border-left: 2px solid var(--gold);
  box-shadow: 0 18px 50px rgba(44, 34, 26, .16);
}
.quality__badge strong { font-size: .95rem; letter-spacing: .04em; }
.quality__badge span { color: var(--muted); font-size: .78rem; letter-spacing: .06em; }
.quality__body p { color: var(--muted); line-height: 2; max-width: 640px; }
.quality-track {
  display: flex;
  gap: 12px;
  overflow: hidden;
  margin-top: 34px;
  mask-image: linear-gradient(90deg, #000 84%, transparent);
}
.quality-track span {
  flex: 0 0 auto;
  padding: 18px 22px;
  border: 1px solid rgba(34,32,31,.16);
  background: rgba(255,255,255,.58);
}

.flow .section__head { max-width: 920px; margin-inline: auto; }
.flow-line {
  list-style: none;
  display: grid;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding: 0;
  max-width: 920px;
}
.flow-line li {
  display: grid;
  grid-template-columns: clamp(52px, 5vw, 80px) 1fr auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding: clamp(26px, 3vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}
.flow-line li:first-child { border-top: 1px solid var(--line); }
.flow-line__num { font-family: var(--font-en); color: var(--gold); font-size: clamp(1.4rem, 2vw, 2rem); }
.flow-line__body h3 { margin: 0 0 10px; font-size: 1.15rem; }
.flow-line__body p { margin: 0; color: var(--muted); line-height: 1.9; max-width: 540px; font-size: .92rem; }
.flow-line__photo {
  margin: 0;
  width: clamp(130px, 15vw, 200px);
  overflow: hidden;
}
.flow-line__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.contact {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 52px;
  color: #fff;
  background: #201d1a;
  overflow: hidden;
}
.contact__bg {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  height: 100%;
  width: min(34%, 460px);
  object-fit: cover;
  opacity: .16;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
  pointer-events: none;
}
.contact p { color: rgba(255,255,255,.72); line-height: 2; }
.access { display: grid; gap: 12px; margin-top: 34px; }
.access div { display: grid; grid-template-columns: 90px 1fr; gap: 18px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
.access dt { color: #d8c3a5; }
.access dd { margin: 0; color: rgba(255,255,255,.8); }
.contact-form { display: grid; gap: 16px; }
label { display: grid; gap: 8px; color: rgba(255,255,255,.72); }
input, textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 14px 16px;
  font: inherit;
}
.contact .btn { width: fit-content; border-color: var(--gold); background: var(--gold); color: #201d1a; }

.footer {
  display: grid;
  justify-items: center;
  gap: clamp(40px, 6vw, 88px);
  min-height: clamp(320px, 34vw, 420px);
  align-content: center;
  padding-top: clamp(90px, 10vw, 150px);
  padding-bottom: clamp(56px, 6vw, 90px);
  text-align: center;
  background: #141312;
  color: rgba(255,255,255,.82);
}
.footer__brand { display: grid; justify-items: center; gap: 16px; }
.footer__brand svg { width: 22px; height: 28px; color: #d8c3a5; }
.footer strong { font-family: var(--font-en); letter-spacing: .2em; font-size: 1.3rem; color: #fff; }
.footer p { margin: 0; color: rgba(255,255,255,.58); line-height: 2; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.6vw, 40px); font-family: var(--font-en); letter-spacing: .1em; color: rgba(255,255,255,.78); }
.footer__sns { display: flex; gap: 22px; }
.footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: #d8c3a5;
  transition: border-color .35s var(--ease-out-expo), color .35s var(--ease-out-expo), transform .35s var(--ease-out-expo);
}
.footer__sns a:hover, .footer__sns a:focus-visible { border-color: #d8c3a5; color: #fff; transform: translateY(-3px); }
.footer__sns svg { width: 19px; height: 19px; }
.footer small { color: rgba(255,255,255,.42); letter-spacing: .08em; }

.sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  background: #2b2a28;
  color: #fff;
  letter-spacing: .1em;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(20, 19, 18, .35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s var(--ease-out-expo), transform .45s var(--ease-out-expo);
  pointer-events: none;
}
.sticky-cta.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* Reveal変種: data-reveal の値で立ち上がり方を変える(F-70)。
   値なし=下から / left・right=横から / scale=拡大 / clip=下から拭き上げ / fade=透過のみ。
   親に data-reveal-stagger を付けると、子の [data-reveal] へ自動で遅延が階段状に付く(script.js)。 */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"] { transform: none; }
[data-reveal="clip"] {
  transform: translateY(14px);
  clip-path: inset(0 0 88% 0);
  transition: opacity var(--duration-base) var(--ease-out-expo), transform var(--duration-base) var(--ease-out-expo),
              clip-path calc(var(--duration-base) * 1.25) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible, .is-loaded .site-header { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.hero__copy [data-reveal] { transform: translateY(42px); }
.is-loaded .hero__photo { animation: heroPhoto 1.3s var(--ease-out-expo) .15s both; }
.is-loaded .hero__info { animation: heroInfo .9s var(--ease-out-expo) .55s both; }
@keyframes heroPhoto {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroInfo {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1040px) {
  .sticky-cta { display: flex; }
  .site-header { grid-template-columns: 1fr auto; height: 72px; gap: 12px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .service-lower { grid-template-columns: 1fr; }
  .service-photo img { aspect-ratio: 4 / 3; border-radius: 0 64px 0 0; }
  .quality__badge { right: 10px; bottom: 18px; }
  .contact__bg { width: 70%; opacity: .1; }
  .hero { padding-top: 72px; }
  .hero__stage { display: flex; flex-direction: column; }
  .hero__copy { position: static; order: -1; width: auto; padding: 56px 24px 44px; }
  .hero__photo-wrap { width: 100%; }
  .hero__photo-wrap::before { display: none; }
  .hero__info { width: 62%; right: 4%; bottom: 3%; }
  h1 { font-size: clamp(2.6rem, 9vw, 3.8rem); }
  .hero__lead { font-size: 1rem; }
  .hero__proof svg { width: 52px; height: 52px; padding: 10px; }
  .hero__proof li { font-size: .88rem; }
  .btn { min-height: 54px; font-size: 1rem; }
  .btn svg { width: 26px; }
  .service-grid, .quality, .contact, .footer { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: 1fr; gap: 22px; }
  .proof-row--reverse .proof-row__text { order: 0; }
  .proof-row--reverse .proof-row__photo { order: 0; }
  .flow-line li { grid-template-columns: 44px 1fr; }
  .flow-line__photo { grid-column: 2; width: 100%; max-width: 280px; }
  .concept__inner { grid-template-columns: 1fr; gap: 22px; }
  .concept__vertical { writing-mode: horizontal-tb; letter-spacing: .3em; }
  .concept__fullbleed img { height: 46vh; }
  .voice__grid { grid-template-columns: 1fr; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255, 255, 255, .2); }
  .numbers__grid > div { border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .style-grid { grid-template-columns: 1fr; }
  .style-card--lead { grid-row: auto; }
  .style-card img, .style-card--lead img { aspect-ratio: 4 / 3.4; }
  .style-card__label small { opacity: 1; transform: none; }
  .flow-list li { min-height: 110px; }
  .footer nav { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .brand__text { font-size: 1.14rem; }
  h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .hero__copy { padding: 44px 20px 36px; }
  .hero__proof svg { width: 44px; height: 44px; padding: 9px; }
  .hero__proof li { font-size: .78rem; }
  .hero__info { width: 74%; }
  .quality__photo { min-height: 360px; border-radius: 0 72px 0 0; }
}

body.no-motion *, body.no-motion *::before, body.no-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
body.no-motion [data-reveal] { opacity: 1; transform: none; clip-path: none; }
body.no-motion .hero h1 .l > span { transform: none; }
body.no-motion .hero__ambient { display: none; }
body.no-motion .concept__fullbleed img { transform: none; }

/* 触れる要素の反応(F-70): カード・行に触れたら何かが動く */
@media (hover: hover) {
  .price-table dl div { transition: background .3s var(--ease-out-expo), transform .3s var(--ease-out-expo); }
  .price-table dl div:hover { background: rgba(176, 139, 98, .07); transform: translateX(4px); }
  .news-list a { transition: color .3s var(--ease-out-expo); }
  .news-list a:hover { color: var(--gold); }
  .voice__grid > div { transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo); }
  .voice__grid > div:hover { transform: translateY(-4px); }
  .faq-list summary { transition: color .3s var(--ease-out-expo); }
  .faq-list summary:hover { color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__inner {
    animation-duration: 55s;
  }
}
</style><style>
@font-face{font-family:AliceSans;src:url(../../shared/85c4d0a691ae45675121.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:AliceRound;src:url(../../shared/0951780346f6ba55c1d9.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:AliceSerif;src:url(../../shared/d80c3f0a5b0988f29fb0.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--paper:#fafaf7;--ink:#1d513d;--muted:#53665a;--line:#d9e1d8;--soft:#f0f3ec;--accent:#e77554;--font-body:AliceSans,sans-serif;--font-display:AliceRound,AliceSans,sans-serif;--ls-body:.02em;--lh-body:1.9;--fw-body:450;--content-max:1200px;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.9}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}p,h1,h2,h3,figure{margin:0}p+p{margin-top:14px}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.skip{position:fixed;top:-100px;left:12px;z-index:100;background:white;padding:12px}.skip:focus{top:12px}.wrap{width:min(1200px,calc(100% - 112px));margin:auto}.page-header{height:108px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:20}.wordmark{font-family:var(--font-display);font-size:clamp(26px,3.25vw,49px);font-weight:700;letter-spacing:-.025em;line-height:1.2;white-space:nowrap}.desktop-nav{display:flex;align-items:center;gap:clamp(22px,3vw,46px);font-weight:650;font-size:clamp(14px,1.45vw,21px)}.desktop-nav>a:not(.header-cta){padding:12px 0}.desktop-nav>a:hover{text-decoration:underline;text-underline-offset:7px}.header-cta{background:var(--ink);color:var(--paper);padding:11px 28px;border-radius:40px;white-space:nowrap}.menu-button{display:none}.mobile-nav{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:15px 28px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:20px;font-weight:650;line-height:1.5;gap:24px;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px);background:#143c2d}.btn:after{content:'↗';font-family:Arial,sans-serif;font-size:22px}.text-link{display:inline-block;padding:10px 0;border-bottom:1px solid var(--accent);font-weight:650;line-height:1.4}.hero-zone{position:relative;isolation:isolate;min-height:calc(66.667vw - 108px);max-height:950px}.hero-art{position:absolute;inset:-108px 0 0;z-index:-1;overflow:hidden}.hero-art img{height:100%;width:100%;object-fit:cover}.hero-copy{padding:10.3vw 0 10vw 4%;position:relative;max-width:51%}.hero-copy h1{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5.65vw,88px);letter-spacing:-.025em;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}.hero-copy h1 span{display:block}.bright .hero-copy h1 span:last-child:after{content:'';display:block;width:78%;height:4px;background:var(--accent);border-radius:4px;margin-top:6px}.hero-lead{font-size:clamp(15px,1.52vw,22px);font-weight:550;line-height:1.95;margin-top:34px;max-width:610px}.hero-actions{display:flex;align-items:center;gap:42px;margin-top:44px}.hero-actions .btn{font-size:clamp(17px,1.75vw,27px);padding:20px 30px;border-radius:26px}.hero-actions .text-link{font-size:clamp(16px,1.6vw,24px)}.section{padding:110px 0}.section__head{margin-bottom:45px}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:650;text-transform:uppercase;margin-bottom:16px;color:var(--muted)}h2{font-family:var(--font-display);font-weight:650;font-size:clamp(28px,3vw,44px);line-height:1.6;letter-spacing:.01em}.about{padding-top:90px;padding-bottom:100px;text-align:center}.about h2{margin-bottom:26px}.about p{font-size:17px;line-height:2.1;color:var(--muted)}.flowers{background:var(--soft)}.flower-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}.flower-item{min-width:0}.flower-item figure{overflow:hidden;border-radius:6px}.flower-item img{aspect-ratio:1.12;object-fit:cover;transition:transform .45s}.flower-item:hover img{transform:scale(1.025)}.flower-item h3{font-family:var(--font-display);font-size:23px;font-weight:650;margin:25px 0 9px}.flower-item p{color:var(--muted);font-size:15px}.flower-number{font-size:12px;letter-spacing:.14em;display:block;margin-bottom:8px}.flowers-end{display:flex;justify-content:flex-end;margin-top:36px}.visit-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}.visit-photo img{aspect-ratio:1.2;object-fit:cover;border-radius:6px}.visit-copy h2{margin-bottom:28px}.visit-copy>p{color:var(--muted);font-size:16px}.shop-details{margin:28px 0 0}.shop-details>div{display:grid;grid-template-columns:96px 1fr;gap:15px;border-bottom:1px solid var(--line);padding:15px 0}.shop-details dt{font-weight:600;font-size:14px}.shop-details dd{margin:0;color:var(--muted);font-size:15px}.visit-copy .text-link{margin-top:25px}.inquiry{background:var(--ink);color:var(--paper);text-align:center;padding:85px 0 90px}.inquiry .eyebrow{color:inherit;opacity:.75}.inquiry p{margin:22px auto 30px;max-width:640px;opacity:.92}.inquiry .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);min-width:240px}.inquiry .btn:hover{background:#e5eade}.page-footer{padding:40px 0 25px;background:var(--paper);color:var(--ink)}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-brand{font-family:var(--font-display);font-size:27px;letter-spacing:-.02em}.footer-links{display:flex;gap:25px;font-size:13px}.footer-note{border-top:1px solid var(--line);padding-top:20px;margin-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.footer-note a{text-decoration:underline;text-underline-offset:3px}.demo-dialog{width:min(510px,calc(100% - 40px));padding:34px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}.demo-dialog::backdrop{background:#10241b99}.demo-dialog h2{font-size:24px}.demo-dialog p{margin:18px 0 24px;font-size:15px}.demo-dialog button{cursor:pointer}.simple{--paper:#fff;--ink:#203b31;--muted:#596960;--soft:#f5f7f3;--accent:#203b31;--font-display:AliceSans,sans-serif}.simple .page-header{height:88px;border-bottom:1px solid var(--line);margin:0 1.2%;padding:0 2.3%}.simple .wordmark{font-size:clamp(26px,2.9vw,40px)}.simple .header-cta,.simple .btn{border-radius:0}.simple .hero-zone{min-height:0;max-height:none;padding-bottom:0}.simple .hero-copy{max-width:none;text-align:center;padding:70px 25px 58px}.simple .hero-copy h1{font-size:clamp(38px,4.7vw,73px);letter-spacing:-.035em;line-height:1.45}.simple .hero-copy h1 span{display:inline}.simple .hero-lead{margin:24px auto 0;max-width:900px;font-size:clamp(16px,1.85vw,27px)}.simple .hero-actions{justify-content:center;margin-top:33px;gap:55px}.simple .hero-actions .btn{border-radius:0;padding:16px 36px;font-size:clamp(18px,1.9vw,28px)}.simple .hero-art{position:relative;inset:auto;width:94%;height:28vw;max-height:490px;margin:0 auto;z-index:0}.simple .hero-art img{object-fit:cover;object-position:center 61%}.simple .about{padding-top:100px;padding-bottom:110px}.simple .flower-item figure,.simple .visit-photo img{border-radius:0}.simple .flower-item h3{font-size:22px}.simple .flowers{background:white;border-block:1px solid var(--line)}.simple .section__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px}.simple .flower-number{display:inline;margin-right:14px}.simple .visit-grid{grid-template-columns:.95fr 1fr}.simple .visit-photo{order:2}.simple .inquiry{background:var(--soft);color:var(--ink);border-block:1px solid var(--line)}.simple .inquiry .btn{background:var(--ink);color:white;border-color:var(--ink)}.warm{--paper:#f1e9da;--soft:#e8decb;--ink:#303d2d;--muted:#626754;--line:#cfc8b8;--accent:#a88a61;--font-display:AliceSerif,serif}.warm .page-header{color:var(--paper);height:108px;background:transparent}.warm .wordmark{font-weight:600;font-size:clamp(26px,3vw,44px);letter-spacing:0}.warm .desktop-nav{font-weight:450}.warm .header-cta{background:transparent;color:var(--paper);border:1px solid var(--paper);border-radius:0}.warm .hero-zone{min-height:calc(58.7vw - 108px);max-height:820px;color:var(--paper)}.warm .hero-art{inset:-108px 0 0}.warm .hero-copy{padding:8vw 0 9vw 4.5%;max-width:49%}.warm .hero-copy h1{font-size:clamp(40px,5.7vw,84px);font-weight:600;letter-spacing:.035em;line-height:1.45}.warm .hero-lead{font-weight:400;font-size:clamp(15px,1.55vw,22px);margin-top:24px}.warm .hero-actions{align-items:flex-start;gap:22px;flex-direction:column;margin-top:36px}.warm .hero-actions .btn{background:var(--paper);color:var(--ink);border:0;border-radius:0;padding:18px 32px}.warm .hero-actions .text-link{border-color:var(--paper);font-weight:400;padding-top:0}.warm .about{padding-top:80px}.warm .about h2{font-size:clamp(30px,3vw,44px);letter-spacing:.06em}.warm .flowers{padding-top:95px}.warm .flower-item figure,.warm .visit-photo img{border-radius:0}.warm .flower-item h3{font-size:25px}.warm .flower-grid{gap:46px}.warm .flower-item:nth-child(2){padding-top:45px}.warm .flower-item:nth-child(3){padding-top:90px}.warm .flower-item img{aspect-ratio:.95}.warm .visit-grid{gap:80px}.warm .inquiry{background:#34412f}.warm .inquiry .btn{border-radius:0}.warm .page-footer{background:#eee5d5}
@media(min-width:1700px){.hero-zone{min-height:1025px}.hero-copy{padding-top:175px}.warm .hero-zone{min-height:860px}.warm .hero-copy{padding-top:150px}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.page-header{height:86px}.desktop-nav{gap:22px;font-size:14px}.header-cta{padding:10px 19px}.hero-zone{min-height:calc(68vw - 86px)}.hero-art{inset:-86px 0 0}.hero-copy{padding-top:8vw;max-width:54%}.hero-copy h1{font-size:5.6vw}.hero-lead{font-size:14px;line-height:1.9;margin-top:23px}.hero-actions{gap:22px;margin-top:28px}.hero-actions .btn{font-size:16px;padding:14px 20px;min-height:50px}.hero-actions .text-link{font-size:15px}.section{padding:80px 0}.visit-grid{gap:40px}.flower-grid{gap:22px}.warm .page-header{height:86px}.warm .hero-zone{min-height:calc(65vw - 86px)}.warm .hero-art{inset:-86px 0 0}.warm .hero-copy{max-width:54%;padding-top:6vw}.warm .hero-copy h1{font-size:5.7vw}.warm .hero-lead{font-size:14px}.warm .hero-actions{margin-top:24px;gap:16px}.warm .hero-actions .btn{font-size:17px;padding:14px 24px}.simple .hero-copy{padding-top:55px}.simple .hero-art{height:34vw}}
@media(max-width:700px){html{scroll-padding-top:20px}.wrap{width:calc(100% - 40px)}body{font-size:15px}.page-header,.warm .page-header,.simple .page-header{height:76px;margin:0;padding:0 20px;gap:10px}.wordmark,.warm .wordmark,.simple .wordmark{font-size:29px}.desktop-nav{display:none}.menu-button{display:flex;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:transparent;color:inherit;border:1px solid currentColor;border-radius:0;cursor:pointer}.menu-button span{display:block;width:20px;height:1px;background:currentColor}.mobile-nav{position:absolute;top:76px;left:0;right:0;background:var(--paper);color:var(--ink);border-block:1px solid var(--line);padding:20px;box-shadow:0 15px 25px #1b30201a;z-index:35}.mobile-nav:not([hidden]){display:flex;flex-direction:column}.mobile-nav a{display:block;padding:12px 10px;border-bottom:1px solid var(--line)}.hero-zone,.warm .hero-zone{min-height:0;max-height:none;display:flex;flex-direction:column;padding:0 0 28px}.hero-copy,.warm .hero-copy{max-width:none;width:100%;padding:20px 20px 0;display:contents}.hero-copy h1,.warm .hero-copy h1{font-size:clamp(36px,9.5vw,58px);line-height:1.45;margin:20px 20px 0;order:1}.bright .hero-copy h1 span:last-child:after{height:3px;width:62%;margin-top:8px}.hero-art,.warm .hero-art{position:relative;inset:auto;width:100%;height:72vw;max-height:440px;margin:0;order:2;z-index:0}.hero-art img{height:100%;object-fit:cover;object-position:82% center}.hero-lead,.warm .hero-lead{font-size:15px;line-height:1.9;margin:4px 20px 0;max-width:none;order:3}.hero-lead br{display:none}.hero-actions,.warm .hero-actions{order:4;margin:24px 20px 0;gap:20px;flex-direction:row;align-items:center;flex-wrap:wrap}.hero-actions .btn,.warm .hero-actions .btn{font-size:17px;border-radius:18px;padding:15px 22px;min-height:54px}.hero-actions .text-link,.warm .hero-actions .text-link{font-size:15px;padding:8px 0}.section{padding:64px 0}.about{padding:50px 0 58px}.about h2{font-size:27px;line-height:1.65}.about p{font-size:15px;line-height:2}.about p br{display:none}h2{font-size:29px}.section__head{margin-bottom:30px}.eyebrow{margin-bottom:10px;font-size:11px}.flower-grid{grid-template-columns:1fr;gap:38px}.flower-item figure{border-radius:4px}.flower-item img{aspect-ratio:1.28;object-position:center}.flower-item h3{font-size:23px;margin:19px 0 8px}.flower-item p{font-size:15px}.flower-number{display:inline;margin-right:12px}.flowers-end{justify-content:flex-start;margin-top:28px}.visit-grid,.simple .visit-grid{grid-template-columns:1fr;gap:30px}.visit-photo,.simple .visit-photo{order:0}.visit-photo img{aspect-ratio:1.3}.visit-copy h2{margin-bottom:20px}.shop-details>div{grid-template-columns:78px 1fr;gap:12px}.inquiry{padding:58px 0 62px}.inquiry h2{font-size:28px}.inquiry p{font-size:15px}.page-footer{padding:30px 0 22px}.footer-row{align-items:flex-start;flex-direction:column;gap:20px}.footer-links{flex-wrap:wrap;gap:14px 22px}.footer-note{flex-direction:column;gap:10px;font-size:11px}.simple .hero-copy{display:block;padding:30px 20px 32px}.simple .hero-copy h1{margin:0;font-size:clamp(32px,8.5vw,48px);line-height:1.55}.simple .hero-copy h1 span{display:block}.simple .hero-lead{margin:20px 0 0;font-size:15px}.simple .hero-actions{margin:25px 0 0;gap:22px;justify-content:center}.simple .hero-actions .btn{font-size:17px;padding:15px 23px;border-radius:0}.simple .hero-art{order:0;width:calc(100% - 40px);height:58vw;max-height:350px;margin:auto}.simple .hero-art img{object-position:center 70%}.simple .hero-zone{padding-bottom:0;display:block}.simple .about{padding:60px 0}.simple .section__head{display:block}.simple .flower-item h3{font-size:22px}.warm .page-header{color:var(--paper);background:#303d2d}.warm .hero-zone{background:#303d2d;color:var(--paper);padding-bottom:36px}.warm .hero-copy h1{font-size:clamp(37px,9.7vw,58px);letter-spacing:.015em;margin-top:22px}.warm .hero-art{height:76vw;max-height:420px;margin:12px 0}.warm .hero-art img{object-position:84% center}.warm .hero-lead{margin-top:0}.warm .hero-actions .btn{border-radius:0}.warm .about{padding:55px 0}.warm .about h2{font-size:28px;letter-spacing:.025em}.warm .flowers{padding-top:62px}.warm .flower-grid{gap:40px}.warm .flower-item:nth-child(2),.warm .flower-item:nth-child(3){padding-top:0}.warm .flower-item img{aspect-ratio:1.12}.warm .visit-grid{gap:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}}

button.text-link{border:0;border-bottom:1px solid var(--accent);background:transparent;color:inherit;font:inherit;cursor:pointer}.mobile-break{display:none}@media(max-width:700px){.mobile-break{display:inline}}
@media(max-width:700px){.bright .hero-art{height:76vw}.bright .hero-art img{width:190%;max-width:none;height:auto;object-fit:initial;transform:translate(-44%,-17%)}}
@media(max-width:700px){.bright .hero-art{mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent)}}
</style><style>
/* v10: ABOUT USに6枚目の写真を追加 */
.about .about-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:75px;align-items:center;text-align:left}
.about .about-photo{margin:0;min-width:0}
.about .about-photo img{display:block;width:100%;height:auto;aspect-ratio:1.25;object-fit:cover;object-position:54% center;border-radius:6px}
.about .about-copy{min-width:0}
.about .about-copy .section__head,.simple .about .about-copy .section__head{display:block;margin:0 0 24px;text-align:left}
.about .about-copy h2{font-size:clamp(28px,2.6vw,38px);line-height:1.7;margin:0}
.about .about-copy p{font-size:16px;line-height:2.1}
.simple .about .about-photo{order:2}
.simple .about .about-photo img{border-radius:0}
.warm .about .about-photo img{border-radius:0;aspect-ratio:1.08}
.warm .about .about-copy h2{font-size:clamp(28px,2.6vw,38px);letter-spacing:.035em}
@media(max-width:1000px){.about .about-grid{gap:40px}.about .about-copy p{font-size:15px}.about .about-copy h2{font-size:29px}}
@media(max-width:700px){.about .about-grid{grid-template-columns:1fr;gap:32px}.about .about-photo,.simple .about .about-photo{order:0}.about .about-copy{order:1}.about .about-photo img,.warm .about .about-photo img{aspect-ratio:1.25}.about .about-copy h2,.warm .about .about-copy h2{font-size:28px}.about .about-copy p{font-size:15px}.about .about-copy .section__head{margin-bottom:18px}}
</style></head>
<body class="bright"><a class="skip" href="#main">本文へ移動</a>
<header class="page-header"><a class="wordmark" href="#top" aria-label="花Lab.Alice トップへ">花Lab.Alice</a><nav class="desktop-nav" aria-label="メインメニュー"><a href="#about">お店について</a><a href="#flowers">お花のこと</a><a href="#visit">ご来店案内</a><a class="header-cta" href="#contact">お花の相談</a></nav><button class="menu-button" type="button" aria-label="メニューを開く" aria-expanded="false" aria-controls="mobile-nav"><span></span><span></span></button><nav class="mobile-nav" id="mobile-nav" aria-label="スマートフォン用メニュー" hidden><a href="#about">お店について</a><a href="#flowers">お花のこと</a><a href="#visit">ご来店案内</a><a href="#contact">お花の相談</a></nav></header>
<main id="main"><section class="hero-zone" id="top" aria-label="花Lab.Aliceのご案内"><div class="hero-art"><img src="../../shared/791b59ec55fdcefa3d01.webp" alt="季節の花が並ぶ花Lab.Aliceの空間" width="1536" height="1024" fetchpriority="high"></div><div class="hero-copy"><h1><span>ふだんの日にも、</span><span>花をひとつ。</span></h1><p class="hero-lead">季節の切り花から、大切な人への花束まで。<br>贈る気持ちや飾る場所に合わせて、一緒にお選びします。</p><div class="hero-actions"><a class="btn" href="#contact">お花の相談はこちら</a><a class="text-link" href="#flowers">お花を見る</a></div></div></section>
<section class="about section" id="about"><div class="wrap about-grid"><figure class="about-photo"><img src="../../shared/4354ef77d40838d39477.webp" alt="店内の作業台で花を束ねるスタッフの後ろ姿" width="1536" height="1024" loading="eager"></figure><div class="about-copy"><div class="section__head"><p class="eyebrow">ABOUT US</p><h2>花のある日々を、<br>もっと身近に。</h2></div><p>一輪を選ぶ日も、贈りものを探す日も。<br>気負わず立ち寄れる、花のお店です。<br>贈る気持ちや飾る場所に合わせて、一緒にお選びします。</p></div></div></section>
<section class="flowers section" id="flowers"><div class="wrap"><div class="section__head"><p class="eyebrow">OUR FLOWERS</p><h2>暮らしに、贈りものに。</h2></div><div class="flower-grid"><article class="flower-item"><figure><img src="../../shared/1a7b9825185799d318a0.webp" alt="青紫の季節の花を豊かに生けたガラス花瓶" width="1536" height="1024" loading="eager"></figure><h3><span class="flower-number">01</span>季節の切り花</h3><p>部屋に飾る一輪から。季節の色を楽しめます。</p></article><article class="flower-item"><figure><img src="../../shared/8589f2373d79d11af1a1.webp" alt="手で支えて見せるアプリコット色のバラと白い花の花束" width="1536" height="1024" loading="eager"></figure><h3><span class="flower-number">02</span>花束</h3><p>贈る相手やお好きな色を伺い、お作りします。</p></article><article class="flower-item"><figure><img src="../../shared/ac9d8ccc91c2da1022dc.webp" alt="ひまわりと淡い緑のアジサイのアレンジメント" width="1536" height="1024" loading="eager"></figure><h3><span class="flower-number">03</span>アレンジメント</h3><p>そのまま飾れるお花。贈りものにも。</p></article></div><div class="flowers-end"><a class="text-link" href="#contact">用途・ご予算から相談する　↗</a></div></div></section>
<section class="visit section" id="visit"><div class="wrap visit-grid"><figure class="visit-photo"><img src="../../shared/196874a4640177e8a789.webp" alt="木の扉と季節の花が目印の花のお店" width="1536" height="1024" loading="eager"></figure><div class="visit-copy"><p class="eyebrow">VISIT US</p><h2>お花を探しに、<br>ふらりと。</h2><p>一輪から、お気軽に。<br>贈りもののご相談もお待ちしています。</p><dl class="shop-details"><div><dt>店名</dt><dd>花Lab.Alice</dd></div><div><dt>営業時間</dt><dd>10:00–18:00</dd></div><div><dt>定休日</dt><dd>水曜日</dd></div><div><dt>アクセス</dt><dd>花の並ぶ店先と、木の扉が目印です。</dd></div></dl><button class="text-link demo-trigger" type="button" data-demo>所在地・ご来店について　↗</button></div></div></section>
<section class="inquiry" id="contact"><div class="wrap"><p class="eyebrow">CONTACT</p><h2>お花のこと、<br class="mobile-break">お聞かせください。</h2><p>用途やお好きな色、ご予算など。<br>まだ決まっていないときも、お気軽にご相談ください。</p><button class="btn" type="button" data-demo>お花の相談はこちら</button></div></section></main>
<footer class="page-footer"><div class="wrap"><div class="footer-row"><a href="#top" class="footer-brand">花Lab.Alice</a><nav class="footer-links" aria-label="フッターメニュー"><a href="#about">お店について</a><a href="#flowers">お花のこと</a><a href="#visit">ご来店案内</a></nav></div><div class="footer-note"><span>© 花Lab.Alice</span><span>デザイン見本・架空店舗 / 写真はAI生成 / 営業情報は比較用の設定です。</span></div></div></footer>
<dialog class="demo-dialog" aria-labelledby="demo-title"><h2 id="demo-title">デザイン見本のご案内</h2><p>花Lab.Aliceは、レイアウトを比較するための架空のお店です。実店舗の住所・電話番号はありません。このボタンから問い合わせや予約は送信されません。</p><button class="btn" type="button" data-close>閉じる</button></dialog>
<script>window.addEventListener('load', () => {
  document.body.classList.add('is-loaded');
});

// モーション方針: 既定は全員フル演出。標準UIに追加の制御ボタンは出さない。
const motionOff = () => false;

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.05, rootMargin: '0px 0px -8% 0px' });
// threshold注意(F-88): data-reveal="clip" は自身を88%クリップするため交差率が最大12%。
// 0.14だと永遠に発火せず、clip要素が全ブラウザで不可視のままになる。0.05から上げないこと。

// 親に data-reveal-stagger を付けると、子の [data-reveal] へ階段状の遅延を自動付与する。
// 個別の data-reveal-delay が優先。刻み幅は data-reveal-stagger="0.12" のように指定できる(既定0.08s)。
document.querySelectorAll('[data-reveal-stagger]').forEach((parent) => {
  const step = parseFloat(parent.dataset.revealStagger) || 0.08;
  parent.querySelectorAll(':scope > [data-reveal], :scope > * > [data-reveal]').forEach((child, i) => {
    if (!child.dataset.revealDelay) child.style.setProperty('--reveal-delay', `${(i * step).toFixed(2)}s`);
  });
});

document.querySelectorAll('[data-reveal]').forEach((element) => {
  const delay = element.dataset.revealDelay;
  if (delay) element.style.setProperty('--reveal-delay', `${delay}s`);
  observer.observe(element);
});

// 取りこぼし防止: IntersectionObserverが発火しない文脈(描画が抑制されたタブ・埋め込み・
// フルページキャプチャ等)でも、画面内に入った要素は必ず現す。
// 450ms後・スクロール・リサイズの3経路で拾う(F-88: reveal取り残し=白帯の恒久防止)。
const revealInView = () => {
  document.querySelectorAll('[data-reveal]:not(.is-visible)').forEach((element) => {
    const rect = element.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom > 0) element.classList.add('is-visible');
  });
};
setTimeout(revealInView, 450);
let revealTick = false;
window.addEventListener('scroll', () => {
  if (revealTick) return;
  revealTick = true;
  setTimeout(() => { revealTick = false; revealInView(); }, 300);
}, { passive: true });
window.addEventListener('resize', revealInView);

const counters = document.querySelectorAll('[data-count]');
if (counters.length) {
  const countObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      countObserver.unobserve(entry.target);
      const el = entry.target;
      const target = parseFloat(el.dataset.count);
      const decimals = (el.dataset.count.split('.')[1] || '').length;
      if (motionOff()) {
        el.textContent = target.toFixed(decimals);
        return;
      }
      const duration = 1400;
      const start = performance.now();
      const tick = (now) => {
        const progress = Math.min(1, (now - start) / duration);
        const eased = 1 - Math.pow(1 - progress, 3);
        el.textContent = (target * eased).toFixed(decimals);
        if (progress < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    });
  }, { threshold: 0.6 });
  counters.forEach((el) => countObserver.observe(el));
}

// ヒーロー環境モーション: 金色の光の粒 + 写真のポインター視差
const heroStage = document.querySelector('.hero__stage');
const ambient = document.querySelector('.hero__ambient');
const photoWrap = document.querySelector('.hero__photo-wrap');
let startAmbient = () => {};
let stopAmbient = () => {};

if (heroStage && ambient) {
  const ctx = ambient.getContext('2d');
  let width = 0;
  let height = 0;
  let specks = [];
  let running = false;
  let heroVisible = true;
  let pointerX = 0;
  let pointerY = 0;
  let targetX = 0;
  let targetY = 0;

  const resize = () => {
    const rect = heroStage.getBoundingClientRect();
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    width = rect.width;
    height = rect.height;
    ambient.width = width * dpr;
    ambient.height = height * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  };

  const spawn = () => {
    const count = width < 700 ? 10 : 20;
    specks = Array.from({ length: count }, () => ({
      x: Math.random() * width,
      y: Math.random() * height,
      r: 0.8 + Math.random() * 1.8,
      alpha: 0.06 + Math.random() * 0.14,
      vx: -0.05 + Math.random() * 0.1,
      vy: -0.16 - Math.random() * 0.1,
      wobble: Math.random() * 6.28,
    }));
  };

  const frame = (now) => {
    if (!running || motionOff()) { running = false; return; }
    ctx.clearRect(0, 0, width, height);
    pointerX += (targetX - pointerX) * 0.05;
    pointerY += (targetY - pointerY) * 0.05;
    specks.forEach((s) => {
      s.x += s.vx + Math.sin(now / 1600 + s.wobble) * 0.08;
      s.y += s.vy;
      if (s.y < -6) { s.y = height + 6; s.x = Math.random() * width; }
      if (s.x < -6) s.x = width + 6;
      if (s.x > width + 6) s.x = -6;
      ctx.globalAlpha = s.alpha;
      ctx.fillStyle = '#c9a97e';
      ctx.beginPath();
      ctx.arc(s.x, s.y, s.r, 0, 6.28);
      ctx.fill();
    });
    ctx.globalAlpha = 1;
    if (photoWrap) {
      photoWrap.style.transform = `translate(${pointerX * 5}px, ${pointerY * 4}px)`;
    }
    requestAnimationFrame(frame);
  };

  startAmbient = () => {
    if (!running && heroVisible && !motionOff()) {
      running = true;
      requestAnimationFrame(frame);
    }
  };
  stopAmbient = () => { running = false; };

  resize();
  spawn();
  window.addEventListener('resize', () => { resize(); spawn(); });

  heroStage.addEventListener('pointermove', (event) => {
    const rect = heroStage.getBoundingClientRect();
    targetX = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    targetY = ((event.clientY - rect.top) / rect.height) * 2 - 1;
  }, { passive: true });
  heroStage.addEventListener('pointerleave', () => { targetX = 0; targetY = 0; }, { passive: true });

  const heroObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      heroVisible = entry.isIntersecting;
      if (heroVisible) startAmbient(); else stopAmbient();
    });
  }, { threshold: 0.02 });
  heroObserver.observe(heroStage);
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) stopAmbient(); else startAmbient();
  });
  startAmbient();
}

// モバイル追従CTA: ヒーロー通過後に表示、Contact表示中は隠す
const stickyCta = document.querySelector('.sticky-cta');
const heroSection = document.querySelector('.hero');
const contactSection = document.querySelector('#contact');

if (stickyCta && heroSection) {
  let pastHero = false;
  let contactVisible = false;
  const update = () => {
    stickyCta.classList.toggle('is-shown', pastHero && !contactVisible);
  };
  new IntersectionObserver((entries) => {
    entries.forEach((entry) => { pastHero = !entry.isIntersecting; update(); });
  }, { threshold: 0 }).observe(heroSection);
  if (contactSection) {
    new IntersectionObserver((entries) => {
      entries.forEach((entry) => { contactVisible = entry.isIntersecting; update(); });
    }, { threshold: 0.2 }).observe(contactSection);
  }
}

// モバイルナビ
const navToggle = document.querySelector('.nav-toggle');
const navOverlay = document.querySelector('.nav-overlay');
if (navToggle && navOverlay) {
  const setNav = (open) => {
    document.body.classList.toggle('nav-open', open);
    navToggle.setAttribute('aria-expanded', String(open));
    navToggle.setAttribute('aria-label', open ? 'メニューを閉じる' : 'メニューを開く');
    navOverlay.setAttribute('aria-hidden', String(!open));
  };
  navToggle.addEventListener('click', () => {
    setNav(!document.body.classList.contains('nav-open'));
  });
  navOverlay.querySelectorAll('a').forEach((link) => {
    link.addEventListener('click', () => setNav(false));
  });
}

document.querySelector('.contact-form')?.addEventListener('submit', (event) => {
  event.preventDefault();
  const button = event.currentTarget.querySelector('button');
  if (!button) return;
  button.textContent = '仮送信を確認しました';
  window.setTimeout(() => {
    button.textContent = '送信内容を確認';
  }, 2200);
});
</script><script>
const menuButton=document.querySelector('.menu-button');
const mobileNav=document.querySelector('.mobile-nav');
function closeMenu(){mobileNav.hidden=true;menuButton.setAttribute('aria-expanded','false');menuButton.setAttribute('aria-label','メニューを開く');}
menuButton.addEventListener('click',()=>{const open=mobileNav.hidden;mobileNav.hidden=!open;menuButton.setAttribute('aria-expanded',String(open));menuButton.setAttribute('aria-label',open?'メニューを閉じる':'メニューを開く');});
mobileNav.querySelectorAll('a').forEach(a=>a.addEventListener('click',closeMenu));
document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!mobileNav.hidden){closeMenu();menuButton.focus();}});
window.matchMedia('(min-width:701px)').addEventListener('change',e=>{if(e.matches)closeMenu();});
const demoDialog=document.querySelector('.demo-dialog');
document.querySelectorAll('[data-demo]').forEach(b=>b.addEventListener('click',()=>{demoDialog.showModal();}));
document.querySelector('[data-close]').addEventListener('click',()=>demoDialog.close());
demoDialog.addEventListener('click',e=>{if(e.target===demoDialog){const r=demoDialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)demoDialog.close();}});
</script><a id="dn-badge" href="https://designnow.ai/?from=site" target="_blank" rel="noopener" style="position:fixed;left:12px;bottom:12px;z-index:2147483647;display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 6px;border-radius:999px;background:rgba(20,20,24,.82);color:#fff;font:600 9.5px/1 -apple-system,'Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;text-decoration:none;opacity:.9;transition:opacity .25s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)" aria-label="DesignNOW で作成"><svg width="10" height="9" viewBox="0 0 500 454.38" aria-hidden="true"><path fill="#ECF5FE" d="M261.2,5.76C144.13.25.12-42.91,0,228.75c-.12,267.28,161.54,229.04,276.69,216,79.37-8.98,223.24-61.6,223.31-223.19.07-163.28-134.47-210.88-238.8-215.79Z"/><path fill="#202026" d="M208.7,348.55l-65.39-173.1c-2.3-6.09,3.33-12.2,9.59-10.41l106.96,30.71c4.91,1.41,9.85-2.13,10.09-7.24l3.08-66.01c.39-8.36,11.8-10.47,15.16-2.81l64.77,147.78c2.64,6.03-2.8,12.46-9.18,10.86l-104.66-26.26c-4.81-1.21-9.53,2.25-9.83,7.2l-5.28,86.97c-.52,8.52-12.29,10.3-15.31,2.32Z"/></svg>DesignNOW</a><script>(function(){var b=document.getElementById('dn-badge'),t;if(!b)return;addEventListener('scroll',function(){b.style.opacity='.25';clearTimeout(t);t=setTimeout(function(){b.style.opacity='.9'},700)},{passive:true});b.addEventListener('mouseenter',function(){b.style.opacity='1'})})()</script><script>(function(){var b=document.getElementById('dn-badge');if(!b)return;function lift(){var h=innerHeight,w=innerWidth,top=h,all=document.body?document.body.getElementsByTagName('*'):[];for(var i=0;i<all.length&&i<4000;i++){var e=all[i];if(e===b||b.contains(e))continue;var s=getComputedStyle(e);if(s.position!=='fixed'&&s.position!=='sticky')continue;if(s.display==='none'||s.visibility==='hidden')continue;var r=e.getBoundingClientRect();if(r.height<8||r.height>h*.5||r.bottom<h-4||r.left>140||r.right<12)continue;if(r.top<top)top=r.top}b.style.bottom=(top<h?Math.round(h-top+8):12)+'px'}b.style.transition='bottom .2s,opacity .25s';addEventListener('load',lift);addEventListener('resize',lift);setTimeout(lift,300);setInterval(lift,1500)})()</script></body></html>