/* 花と緑 あさつゆ舎（デモ）全ページ共通
   白い地にポラロイドの写真を貼った、手作りの店のスクラップ帳のような作り */
:root {
  --ink: #34403A;
  --ink-soft: #5E6B63;
  --g: #8DB86B;          /* 若草 */
  --g-d: #4F7D39;        /* 若草の濃いほう（文字・ボタンの地） */
  --g-l: #F1F6EC;        /* ごくうすい若草 */
  --g-m: #DDEBD0;
  --c: #F08A6B;          /* 珊瑚 */
  --c-t: #E0694A;        /* 大きな手書き文字の珊瑚 */
  --c-d: #B94E33;        /* 小さな文字の珊瑚 */
  --c-l: #FCE6DD;
  --white: #FFFFFF;
  --hand: "Zen Kurenaido", "Hiragino Maru Gothic ProN", sans-serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, .86rem + .3vw, 17px);
  line-height: 1.85;
  letter-spacing: .02em;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
main, .ft { overflow-x: clip; }
img { height: auto; }
a { color: var(--g-d); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-d); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--hand); font-weight: 400; line-height: 1.4; margin: 0; letter-spacing: .04em; font-feature-settings: "palt"; text-wrap: balance; word-break: auto-phrase; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--g-m); }
.hd__in { display: flex; align-items: center; gap: 18px; width: min(1360px, 100% - 32px); margin-inline: auto; height: 72px; }
.hd__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.hd__brand img { width: 150px; height: auto; }
.hd__demo { font: 500 9px/1 var(--sans); letter-spacing: .14em; color: var(--ink-soft); border: 1px solid #C9D3CC; padding: 3px 5px 2px; border-radius: 3px; align-self: center; margin-top: 10px; }
.hd__nav { display: flex; gap: 2px; margin-left: auto; }
.hd__nav a { position: relative; text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 500; padding: 10px 11px; white-space: nowrap; }
.hd__nav a:hover { color: var(--g-d); }
.hd__nav a[aria-current="page"] { color: var(--g-d); }
.hd__nav a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; top: 2px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--g); }
.hd__info { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.hd__info a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: .04em; }
.hd__order { flex: none; text-decoration: none; color: var(--c-d); border: 1.5px solid var(--c); border-radius: 999px; padding: 7px 20px; font-weight: 500; font-size: 14.5px; background: #fff; transition: background .2s; }
.hd__order:hover { background: var(--c-l); }
.hd__menu { display: none; flex: none; font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 999px; padding: 10px 14px; cursor: pointer; }

@media (max-width: 1239px) {
  .hd__in { height: 64px; gap: 10px; }
  .hd__brand img { width: 128px; }
  .hd__order { margin-left: auto; padding: 7px 16px; }
  .hd__menu { display: block; }
  .hd__nav, .hd__info { display: none; }
  .nav-open .hd__nav { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--g-m); padding: 8px 20px 6px; margin: 0; box-shadow: 0 14px 24px -18px rgba(52,64,58,.4); }
  .nav-open .hd__nav a { font-size: 16px; padding: 14px 4px 14px 22px; border-bottom: 1px dashed var(--g-m); }
  .nav-open .hd__nav a[aria-current="page"]::before { left: 4px; top: 50%; margin: -3.5px 0 0; }
  .nav-open .hd__info { display: flex; position: absolute; top: calc(64px + var(--navh, 296px)); left: 0; right: 0; align-items: flex-start; background: #fff; padding: 12px 24px 18px; border-bottom: 1px solid var(--g-m); font-size: 13px; }
}
@media (max-width: 400px) {
  .hd__brand img { width: 112px; }
  .hd__demo { margin-top: 6px; }
  .hd__order { padding: 6px 12px; font-size: 13.5px; }
  .hd__menu { padding: 9px 11px; }
}

/* ---------- 共通の部品 ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.sec--tint { background: var(--g-l); }
.sec--tight { padding-top: clamp(40px, 5vw, 64px); }
.h2 { font-size: clamp(28px, 1.4rem + 1.6vw, 42px); margin-bottom: .7em; }
.h2--c { text-align: center; }
.h3 { font-size: clamp(22px, 1.1rem + .8vw, 28px); margin-bottom: .6em; }
.lead { max-width: 36em; }
.hand { font-family: var(--hand); }

.btn { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; font-weight: 500; letter-spacing: .06em; border-radius: 999px; padding: 13px 28px 12px; transition: transform .25s var(--ease), background .2s; }
.btn--fill { background: var(--g-d); color: #fff; }
.btn--fill:hover { background: #426b2f; }
.btn--ghost { color: var(--g-d); border: 1.5px solid var(--g); background: #fff; }
.btn--ghost:hover { background: var(--g-l); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btns { margin-top: 32px; }

/* ポラロイド */
.pola { position: relative; margin: 0; background: #FFFEFC; padding: 4.5% 4.5% 0; box-shadow: 0 1px 2px rgba(52,64,58,.14), 0 14px 26px -12px rgba(52,64,58,.32); transform: rotate(var(--r, 0deg)); }
.pola img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--g-l); }
.pola--tall img { aspect-ratio: 4 / 5; }
.pola--wide img { aspect-ratio: 3 / 2; }
.pola figcaption { font-family: var(--hand); text-align: center; font-size: clamp(15px, .8rem + .5vw, 21px); line-height: 1.3; padding: .55em 0 .8em; color: var(--ink); letter-spacing: .06em; }
/* マスキングテープ（珊瑚・半透明） */
.tape::before { content: ""; position: absolute; z-index: 2; width: 86px; height: 24px; top: -6px; left: -26px; transform: rotate(-38deg); background: rgba(240,138,107,.58); mix-blend-mode: multiply; clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 50%, 100% 100%, 8% 100%, 4% 90%, 0 100%, 3% 50%); }
.tape--r::before { left: auto; right: -26px; transform: rotate(38deg); }
.tape--t::before { left: 50%; top: -12px; margin-left: -43px; transform: rotate(-3deg); }
.tape--g::before { background: rgba(141,184,107,.5); }

/* 区画の区切り（若草の細い線の茎と葉） */
.stem { width: min(560px, 78%); margin: 0 auto; color: var(--g); }
.stem svg { width: 100%; height: auto; }

/* 表 */
.tbl { width: 100%; border-collapse: collapse; font-size: .95em; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 14px 12px 13px 0; border-bottom: 1px dashed #C6D9B6; }
.tbl tr:first-child th, .tbl tr:first-child td { border-top: 1.5px solid var(--g); }
.tbl thead th { font-size: .85em; color: var(--ink-soft); font-weight: 500; border-top: 0 !important; border-bottom: 1.5px solid var(--g); padding-bottom: 8px; }
.tbl tbody th { font-weight: 500; white-space: nowrap; color: var(--g-d); width: 7.5em; }
.tbl--price td:first-child, .tbl--price th[scope="row"] { font-weight: 500; color: var(--ink); white-space: nowrap; }
.tbl .yen { font-family: var(--hand); font-size: 1.22em; color: var(--c-d); letter-spacing: .02em; }
.note { font-size: .86em; color: var(--ink-soft); margin-top: 14px; }

/* 2つの段 */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-l { grid-template-columns: 1.15fr .85fr; }
  .split--wide-r { grid-template-columns: .85fr 1.15fr; }
  .split .first-r { order: 2; }
}

/* ---------- トップ：最初の画面 ---------- */
.hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 4vw, 52px); overflow: hidden; }
.hero__in { display: grid; grid-template-areas: "tag" "photos" "txt"; gap: 8px; width: min(1240px, 100% - 40px); margin-inline: auto; }
.hero__tag { grid-area: tag; margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero__tagt { font-family: var(--hand); color: var(--c-t); font-size: clamp(40px, 2rem + 3vw, 76px); line-height: 1.1; letter-spacing: .06em; display: inline-block; transform: rotate(-4deg); transform-origin: left bottom; }
.hero__date { font-size: 14px; font-weight: 500; color: var(--ink-soft); letter-spacing: .08em; }
.hero__photos { grid-area: photos; position: relative; aspect-ratio: 1 / 1.2; margin: 10px 0 0; }
.hero__photos .pola { position: absolute; width: 47%; }
.hero__photos .p1 { left: 1%; top: 0; z-index: 1; }
.hero__photos .p2 { right: 1%; top: 10%; z-index: 2; }
.hero__photos .p3 { left: 15%; top: 53%; z-index: 3; }
.hero__txt { grid-area: txt; padding-top: 6px; }
.hero__h1 { font-size: clamp(32px, 1.4rem + 2.6vw, 54px); margin-bottom: .45em; }
.hero__txt p { max-width: 22em; }
.hero__txt .btns { margin-top: 22px; }
@media (min-width: 900px) {
  .hero { padding-top: clamp(36px, 4vw, 64px); }
  .hero__in { grid-template-columns: minmax(300px, 4.3fr) 7.7fr; grid-template-rows: auto 1fr; grid-template-areas: "tag photos" "txt photos"; column-gap: clamp(24px, 3vw, 56px); }
  .hero__tag { flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 24px; text-align: right; margin-right: -6%; position: relative; z-index: 4; }
  .hero__photos { aspect-ratio: 7.4 / 5.2; margin: 0; }
  .hero__photos .pola { width: 40%; }
  .hero__photos .p1 { left: 0; top: 13%; z-index: 1; }
  .hero__photos .p2 { left: 31%; right: auto; top: 1%; width: 38%; z-index: 3; }
  .hero__photos .p3 { left: auto; right: 1%; top: 18%; width: 36%; z-index: 2; }
  .hero__txt { align-self: end; padding: 0 0 8px; }
}
.band { background: var(--g-l); border-top: 1px solid var(--g-m); border-bottom: 1px solid var(--g-m); }
.band p { width: min(1240px, 100% - 40px); margin: 0 auto; padding: 13px 0 12px; font-size: 14.5px; font-weight: 500; letter-spacing: .06em; text-align: center; }

/* 今日の入荷（トップ） */
.arrival__ph { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 6px 0; align-items: start; }
.arrival__ph .pola:nth-child(2) { margin-top: 44px; }
.voice { font-size: 1.04em; }

/* 花束の値段3つ（トップ） */
.prices { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; }
.prices li { display: grid; grid-template-columns: 6.6em 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed #C6D9B6; }
.prices li:first-child { border-top: 1px dashed #C6D9B6; }
.prices .yen { font-family: var(--hand); color: var(--c-d); font-size: 1.5em; line-height: 1.2; }
@media (min-width: 860px) {
  .prices { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .prices li { display: block; padding: 6px 28px 6px; border: 0 !important; border-left: 1px solid var(--g) !important; }
  .prices li:first-child { border-left: 0 !important; padding-left: 0; }
  .prices .yen { display: block; font-size: 1.9em; margin-bottom: 4px; }
}
.aside-line { margin-top: 28px; }

/* 行事とお供え（トップ） */
.photo-frame { position: relative; margin: 0; }
.photo-frame img { width: 100%; border-radius: 2px; box-shadow: 0 14px 30px -18px rgba(52,64,58,.45); }

/* 頼み方3つの札 */
.tickets { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; }
.ticket { position: relative; border: 1.5px solid var(--c); background: #fff; padding: 26px 24px 22px; }
.ticket::before { top: -10px; left: -22px; width: 70px; height: 20px; }
.ticket b { display: block; font-family: var(--hand); font-weight: 400; font-size: 1.5em; line-height: 1.3; margin-bottom: 6px; color: var(--c-d); }
@media (min-width: 760px) {
  .tickets { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .tickets li:nth-child(2) { transform: translateY(18px); }
}
.map-wrap { display: grid; gap: 28px; justify-items: center; margin-top: 64px; text-align: center; }
.map-small { max-width: 460px; width: 100%; text-align: left; }


/* 店主から（便箋） */
.letter { position: relative; background: #fff; font-size: 16px; line-height: 34px; padding: 34px clamp(20px, 3vw, 36px) 34px; box-shadow: 0 1px 2px rgba(52,64,58,.1), 0 18px 34px -22px rgba(52,64,58,.4); background-image: repeating-linear-gradient(to bottom, transparent 0 33px, #DCE9D1 33px 34px); background-position: 0 34px; background-size: 100% calc(100% - 68px); background-repeat: no-repeat; }
.letter p { margin: 0; }
.letter .h2 { line-height: 68px; margin: 0; font-size: clamp(26px, 1.3rem + 1.2vw, 36px); }

/* よく聞かれること */
.faq { display: grid; gap: 28px; }
@media (min-width: 860px) { .faq { grid-template-columns: 340px 1fr; gap: 56px; } }
.qa { margin: 0; }
.qa dt { font-family: var(--hand); font-size: 1.32em; line-height: 1.5; padding-left: 34px; position: relative; margin-top: 30px; }
.qa dt:first-child { margin-top: 0; }
.qa dt svg { position: absolute; left: 0; top: .2em; width: 24px; height: 24px; color: var(--g); }
.qa dd { margin: 6px 0 0 34px; }
.qa--full dt { font-family: var(--sans); font-weight: 500; font-size: 1.04em; }
.qa--full dt::before { content: none; }
.textlink { display: inline-block; margin-top: 30px; font-weight: 500; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* お店の場所 */
.place { display: grid; gap: 40px; align-items: start; }
@media (min-width: 860px) { .place { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.place .pola { max-width: 440px; margin: 10px auto 0; }

/* ---------- 下層ページの頭 ---------- */
.ph { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); }
.ph__t { font-size: clamp(40px, 1.8rem + 3vw, 72px); color: var(--ink); line-height: 1.15; }
.ph__t::after { content: ""; display: block; width: 72px; height: 10px; margin-top: 16px; background: no-repeat left center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M1 6 C 14 2, 30 9, 44 5 S 64 3, 71 5' fill='none' stroke='%23F08A6B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ph__sub { margin: 18px 0 0; font-weight: 500; font-size: 1.05em; }
.ph__lead { margin: 18px 0 0; max-width: 34em; }
.ph-photo { margin: 0; }
.ph-photo img { width: 100%; height: clamp(220px, 38vw, 520px); object-fit: cover; }
.ph-photo--strip img { height: clamp(150px, 24vw, 380px); object-position: 50% 60%; }

/* 今週入った花 */
.week { display: grid; gap: 48px 28px; margin-top: 16px; }
.week figure { margin: 0; }
.week .pola { width: min(100%, 270px); margin: 0 auto; }
.week .say { margin: 22px auto 0; max-width: 18em; font-size: .95em; text-align: center; }
@media (min-width: 760px) {
  .week { grid-template-columns: repeat(3, 1fr); }
  .week > div:nth-child(2) { margin-top: 56px; }
  .week > div:nth-child(3) { margin-top: 18px; }
}
.after-week { margin-top: 48px; max-width: 40em; }

/* 写真の下の値段の札（花束とアレンジ） */
.bq-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2.4vw, 32px); margin-top: 48px; align-items: end; }
.bq-photos .pola figcaption { color: var(--c-d); }
@media (max-width: 560px) { .bq-photos .pola figcaption { font-size: 14px; } }

.swatches { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 22px 14px; }
.swatches li { text-align: center; font-family: var(--hand); font-size: 1.08em; line-height: 1.4; }
.swatches .dot { display: block; width: 74px; height: 74px; margin: 0 auto 10px; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 0 0 1.5px var(--g), 0 8px 16px -10px rgba(52,64,58,.5); }
.sw1 { background: #F4B3BF; }
.sw2 { background: linear-gradient(135deg, #F7C64B 50%, #F29444 50%); }
.sw3 { background: linear-gradient(135deg, #FFFFFF 50%, #8DB86B 50%); }
.sw4 { background: linear-gradient(135deg, #8C2E40 50%, #6C4A8C 50%); }
.sw5 { background: conic-gradient(#F4B3BF 0 25%, #F7C64B 0 50%, #8DB86B 0 75%, #F08A6B 0); }

/* 母の日の旗 */
.flagbig { width: min(100%, 300px); color: var(--c); }

/* 伝えてほしいこと */
.tell { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 16px; }
.tell li { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; border: 1.5px solid var(--c); background: #fff; padding: 16px 20px 16px 16px; }
.tell li svg { width: 46px; height: 46px; color: var(--g-d); }
@media (min-width: 860px) {
  .tell { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .tell li { grid-column: span 2; }
  .tell li:nth-child(4) { grid-column: 2 / span 2; }
  .tell li:nth-child(odd) { transform: rotate(-.6deg); }
  .tell li:nth-child(even) { transform: rotate(.7deg); }
}
.line-row { margin: 40px 0 0; padding: 20px 0 0; border-top: 1px dashed var(--c); display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-weight: 500; }
.line-row a { font-weight: 500; text-underline-offset: 5px; }
.line-row + .note { margin-top: 8px; }

.payline { max-width: 40em; }

/* 店主のあいさつ・朝の店 */
.greet .pola { max-width: 420px; }
.bakery-free { }

/* ページの下 */
.next { padding: 44px 0 72px; }
.next__in { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; }
.next a { font-family: var(--hand); font-size: 1.35em; text-decoration: none; color: var(--g-d); border-bottom: 1.5px solid var(--g); padding-bottom: 2px; }
.next a:hover { color: var(--c-d); border-color: var(--c); }

/* ---------- 図解の共通 ---------- */
.fig { position: relative; background: #fff; border: 1px solid var(--g-m); padding: clamp(22px, 3.5vw, 44px) clamp(16px, 3vw, 44px); }
.fig.tape::before { top: -8px; left: -24px; }
.fig__note { margin: 18px 0 0; font-size: .86em; color: var(--ink-soft); }
.fig svg text { font-family: var(--sans); }
.fig svg .t-hand { font-family: var(--hand); }

/* H-1 ご予算ごとの花束の大きさ */
.h1f { --cm: clamp(1.4px, .4vw, 2.6px); display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: end; column-gap: clamp(6px, 2vw, 28px); }
.h1f__person { display: flex; align-items: flex-end; gap: 4px; padding-left: 2px; }
.h1f__person svg.p { height: calc(160 * var(--cm)); width: auto; color: var(--ink-soft); }
.h1f__person svg.ruler { height: calc(160 * var(--cm)); width: 12px; color: var(--g); }
.h1f__b { display: flex; flex-direction: column; align-items: center; }
.h1f__price { font-family: var(--hand); color: var(--c-t); font-size: clamp(19px, 1rem + 1vw, 30px); line-height: 1.2; margin: 0 0 6px; white-space: nowrap; }
.h1f__b svg { width: auto; transform-origin: 50% 100%; }
.h1f__b--s svg { height: calc(35 * var(--cm)); }
.h1f__b--m svg { height: calc(45 * var(--cm)); }
.h1f__b--l svg { height: calc(60 * var(--cm)); }
.h1f__ground { grid-column: 1 / -1; height: 0; border-top: 1.5px solid var(--g); margin-top: -1px; }
.h1f__info { grid-row: 3; text-align: center; font-size: clamp(11.5px, .62rem + .35vw, 14.5px); line-height: 1.55; padding-top: 10px; }
.h1f__info span { display: block; }
.h1f__info i { font-style: normal; display: inline-block; }
.h1f__info .tax { color: var(--ink-soft); }
.h1f__info:nth-of-type(1) { grid-column: 2; }

/* H-2 地図・店のまわりの地図 */
.mapfig svg { width: 100%; height: auto; }
.mapfig .ln { fill: none; stroke: var(--g); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* H-3 */
.care { display: grid; gap: 36px; align-items: center; }
@media (min-width: 860px) { .care { grid-template-columns: 1fr 440px; gap: 64px; } }
.care .fig { max-width: 460px; margin: 0 auto; width: 100%; }

/* H-4 1年の花の暦 */
.koyomi { display: grid; grid-template-columns: 2.4em repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(12, auto); column-gap: 10px; position: relative; font-size: 14px; }
.ky-head { display: none; }
.ky-icon { display: flex; justify-content: center; align-items: flex-end; padding-bottom: 8px; grid-row: 1; }
.ky-icon svg { width: 26px; height: 26px; color: var(--g-d); }
.ky-icon--f { grid-column: 2; }
.ky-icon--e { grid-column: 3; }
.ky-m { grid-column: 1; grid-row: calc(var(--m) + 1); font-family: var(--hand); font-size: 17px; padding: 10px 0; border-top: 1px dashed #C6D9B6; text-align: center; }
.ky-now { grid-column: 1 / -1; grid-row: 11; background: var(--g-m); border-radius: 6px; margin: 0 -6px; }
.ky-f { grid-column: 2; grid-row: calc(var(--s) + 1) / calc(var(--e) + 2); margin: 6px 0; padding: 10px 12px; border: 1.5px solid var(--g); border-radius: 4px 14px 4px 14px; background: rgba(255,255,255,.9); font-family: var(--hand); font-size: 15.5px; line-height: 1.45; display: flex; align-items: center; z-index: 1; }
.ky-e { grid-column: 3; grid-row: calc(var(--s) + 1); align-self: center; margin: 4px 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; font-weight: 500; z-index: 1; }
.ky-e svg { flex: none; width: 16px; height: 22px; color: var(--c); margin-top: 1px; }
@media (min-width: 900px) {
  .koyomi { grid-template-columns: 3em repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 0; font-size: 14px; }
  .ky-icon { grid-column: 1; padding: 0; align-items: center; }
  .ky-icon--f { grid-row: 2; }
  .ky-icon--e { grid-row: 3; }
  .ky-m { grid-row: 1; grid-column: calc(var(--m) + 1); border-top: 0; border-left: 1px dashed #C6D9B6; padding: 6px 0 12px; }
  .ky-m[style*="--m:1;"] { border-left: 0; }
  .ky-now { grid-row: 1 / 4; grid-column: 11; margin: 0 2px; }
  .ky-f { grid-row: 2; grid-column: calc(var(--s) + 1) / calc(var(--e) + 2); margin: 0 5px 14px; min-height: 92px; align-items: flex-start; font-size: 15px; }
  .ky-e { grid-row: 3; grid-column: calc(var(--s) + 1); flex-direction: column; align-items: center; text-align: center; padding: 4px 3px 6px; font-size: 13px; }
  .ky-e svg { width: 18px; height: 26px; }
}
.koyomi--events { grid-template-columns: 2.4em minmax(0, 1fr); }
.koyomi--events .ky-icon--e, .koyomi--events .ky-e { grid-column: 2; }
@media (min-width: 900px) {
  .koyomi--events { grid-template-columns: 3em repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .koyomi--events .ky-icon--e { grid-column: 1; grid-row: 2; }
  .koyomi--events .ky-e { grid-column: calc(var(--s) + 1); grid-row: 2; }
  .koyomi--events .ky-now { grid-row: 1 / 3; }
}

/* ---------- フッター ---------- */
.ft { background: var(--g-l); padding: 0 0 36px; margin-top: 0; }
.ft .stem { padding-top: 0; transform: translateY(-50%); }
.ft__in { display: grid; gap: 26px; width: min(var(--wrap), 100% - 40px); margin-inline: auto; padding-top: 18px; }
.ft__logo img { width: 170px; }
.ft__addr { margin: 0; font-size: 14.5px; line-height: 1.9; }
.ft__addr a { color: var(--ink); text-decoration: none; }
.ft__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.ft__nav a { color: var(--ink); text-decoration: none; }
.ft__nav a:hover { color: var(--g-d); text-decoration: underline; }
.ft__copy { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); }
@media (min-width: 860px) {
  .ft__in { grid-template-columns: 220px 1fr; align-items: start; column-gap: 56px; }
  .ft__nav, .ft__copy { grid-column: 2; }
}

/* ---------- 動き（JSがあり、動きを減らす設定でないときだけ隠す） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  .js .rv.is-in { opacity: 1; transform: none; }
  /* ポラロイドは、台に置くように少し回りながら落ち着く */
  .js .pola.rv { transform: translateY(-26px) rotate(calc(var(--r, 0deg) + 7deg)); }
  .js .pola.rv.is-in { transform: rotate(var(--r, 0deg)); transition-duration: .7s, 1.1s; }
  .js .hero__tagt.rv { transform: rotate(-4deg) translateX(-14px); }
  .js .hero__tagt.rv.is-in { transform: rotate(-4deg); }
  .js .stem.rv { transform: scaleX(.3); }
  .js .stem.rv.is-in { transform: none; transition-duration: .9s, 1.4s; }
  .js .ft .stem.rv { transform: translateY(-50%) scaleX(.3); }
  .js .ft .stem.rv.is-in { transform: translateY(-50%); }
  .js .tell li.rv.is-in:nth-child(odd) { transform: rotate(-.6deg); }
  .js .tell li.rv.is-in:nth-child(even) { transform: rotate(.7deg); }
  /* H-1：左から順に、花束が下から伸びて出てくる */
  .js .h1f .h1f__b svg, .js .h1f .h1f__price { opacity: 0; transform: scaleY(.08); transition: opacity .6s var(--ease), transform 1s var(--ease); }
  .js .h1f .h1f__price { transform: translateY(12px); }
  .js .h1f.is-in .h1f__b svg, .js .h1f.is-in .h1f__price { opacity: 1; transform: none; }
  .js .h1f.is-in .h1f__b:nth-of-type(2) svg { transition-delay: .15s; }
  .js .h1f.is-in .h1f__b:nth-of-type(3) svg { transition-delay: .45s; }
  .js .h1f.is-in .h1f__b:nth-of-type(4) svg { transition-delay: .75s; }
  .js .h1f.is-in .h1f__b:nth-of-type(2) .h1f__price { transition-delay: .7s; }
  .js .h1f.is-in .h1f__b:nth-of-type(3) .h1f__price { transition-delay: 1s; }
  .js .h1f.is-in .h1f__b:nth-of-type(4) .h1f__price { transition-delay: 1.3s; }
  /* H-2：輪が内から順に広がる */
  .js .mapfig .ring { opacity: 0; transform: scale(.6); transform-origin: var(--o, 220px 215px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
  .js .mapfig.is-in .ring { opacity: 1; transform: none; }
  .js .mapfig.is-in .ring--2 { transition-delay: .25s; }
  .js .mapfig.is-in .ring--3 { transition-delay: .5s; }
  .js .mapfig .lbl { opacity: 0; transition: opacity .7s .8s; }
  .js .mapfig.is-in .lbl { opacity: 1; }
  /* H-3：札が順に出る */
  .js .carefig .cl { opacity: 0; transform: translateX(10px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
  .js .carefig.is-in .cl { opacity: 1; transform: none; }
  .js .carefig.is-in .cl--2 { transition-delay: .35s; }
  .js .carefig.is-in .cl--3 { transition-delay: .7s; }
  .js .carefig.is-in .cl--4 { transition-delay: 1.05s; }
  /* H-4：花の札と旗が月の順に出る */
  .js .koyomi .ky-f, .js .koyomi .ky-e { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--s) * .07s); }
  .js .koyomi .ky-e svg { transform: rotate(-14deg); transform-origin: 20% 100%; transition: transform 1s var(--ease); transition-delay: calc(var(--s) * .07s + .3s); }
  .js .koyomi.is-in .ky-f, .js .koyomi.is-in .ky-e { opacity: 1; transform: none; }
  .js .koyomi.is-in .ky-e svg { transform: none; }
  /* 水の粒（ロゴの印）がゆっくり揺れる */
  .drop-bob { animation: bob 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media print {
  .hd { position: static; }
  .hd__menu { display: none; }
}
.pola__blank { display: block; height: clamp(34px, 3.4vw, 50px); }
@media (max-width: 600px) {
  .tape::before { width: 70px; height: 20px; left: -14px; }
  .tape--r::before { left: auto; right: -14px; }
  .tape--t::before { left: 50%; margin-left: -35px; }
}
@media (max-width: 600px) {
  .h1f__info { grid-column: 1 / -1 !important; grid-row: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .9em; text-align: left; font-size: 13px; padding: 9px 0; border-bottom: 1px dashed #C6D9B6; }
  .h1f__info::before { content: attr(data-p); font-family: var(--hand); color: var(--c-d); font-size: 16px; min-width: 4.6em; }
  .h1f__info span { display: inline; }
  .h1f__ground { margin-bottom: 8px; }
}
.koyomi { grid-template-columns: 3.2em repeat(2, minmax(0, 1fr)); }
.koyomi--events { grid-template-columns: 3.2em minmax(0, 1fr); }
.ky-f span, .ky-e span { word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .koyomi, .koyomi--events { grid-template-columns: 3em repeat(11, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .ky-f { align-self: start; margin: 0 3px 14px; padding: 9px 9px; font-size: 14.5px; }
  .ky-f { min-height: 78px; }
}
.ph-photo--low img { object-position: 50% 78%; }
.ph__lead { max-width: 42em; }
.tbl--auto tbody th { width: auto; }
@media (min-width: 860px) { .faq .h2 { font-size: clamp(28px, 1.2rem + 1.1vw, 38px); white-space: nowrap; } }
@media (max-width: 600px) {
  .tbl { font-size: .9em; }
  .tbl th, .tbl td { padding-right: 8px; }
  .tbl .yen { font-size: 1.08em; }
  .tbl tbody th { width: auto; }
}