/* =========================================================================
   花物 植物 ソライ ― 表現のサンプル「shinise（老舗の品と余白）」
   参考：fujiya1935.com の表現（透明の固定ヘッダーと2列の欧文ナビ、全面の写真が
   窓の形に縮むファーストビュー、文の周りに散らした小さな写真、欧文＋小さな和文の
   見出しを左右中央に振る、角の丸め方を写真ごとに変える、節を生成りの色へ
   グラデーションでつなぐ、写真の帯が流れる、写真を背に敷いたフッター）。
   ========================================================================= */

:root {
  --bg: #ffffff;
  --bg2: #f4f2ec;          /* 生成り */
  --bg3: #ebe7dc;
  --ink: #4a4434;          /* オリーブがかった焦げ茶 */
  --ink2: #645e4c;         /* 補助の文字 */
  --line: #d3cfc3;
  --line2: #e4e0d5;
  --dark: #2a271f;
  --kari-bg: #f1e6c6;
  --kari-line: #bfa865;
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --en: "Cormorant Garamond", "Zen Old Mincho", serif;
  --ease: cubic-bezier(.39, .575, .565, 1);
  --t: .6s var(--ease);
  --hdr-top: 0px;
  color-scheme: light;
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { line-break: strict; -webkit-text-size-adjust: 100%; background: var(--bg); }
@supports (word-break: auto-phrase) { html, body { word-break: auto-phrase; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .1em;
  font-feature-settings: "palt" 0;
  overflow-wrap: anywhere;
}
@media (min-width: 780px) { body { font-size: 15.5px; line-height: 2.3; letter-spacing: .13em; } }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 500; }
p + p { margin-top: 1.5em; }
small { font-size: .82em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: .4em 1em; text-decoration: none; }
.skip:focus { top: 8px; }
.en { font-family: var(--en); }
.nw { white-space: nowrap; }
.ph-line { display: inline-block; }   /* 句のまとまりを一行に保つ */

/* 幅：スマホは 340/390、PC は 1240/1440（最大 1240px）。狭い本文は 820px */
.w { width: calc(340 / 390 * 100%); margin-inline: auto; }
@media (min-width: 780px) { .w { width: calc(1240 / 1440 * 100%); max-width: 77.5rem; } }
.w--n { max-width: 51.25rem; }
.w--xn { max-width: 40rem; }

/* ---------- 提案用の帯 ---------- */
.sb {
  position: relative; z-index: 150;
  background: var(--dark); color: #f4f2ec;
  font-size: 11.5px; line-height: 1.7; letter-spacing: .06em;
  padding: 6px 16px; text-align: center;
}
.sb a { color: #fff; text-underline-offset: 3px; }
.sb__sep { margin: 0 .5em; opacity: .7; }

/* ---------- 仮・点線の枠・イメージ表示 ---------- */
.kari {
  display: inline-block; font-size: .72em; line-height: 1.55; letter-spacing: .05em;
  padding: 0 .45em; margin: 0 .3em; vertical-align: .12em;
  background: var(--kari-bg); border: 1px solid var(--kari-line); border-radius: 2px; color: var(--ink);
  font-family: var(--serif);
}
.kn {
  margin-top: 1.6em; padding: .9em 1.1em; font-size: .86rem; line-height: 1.95;
  background: #f8f3e4; border-left: 2px solid var(--kari-line); color: var(--ink);
}
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  text-align: center; padding: 1.5rem 1.2rem;
  border: 1px dashed #aaa38f; color: var(--ink2);
  background: repeating-linear-gradient(135deg, #f7f5f0 0 10px, #f1eee7 10px 20px);
  font-size: .85rem; line-height: 1.8;
}
.ph strong { color: var(--ink); font-weight: 500; font-size: .95rem; letter-spacing: .12em; }
.im {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 2;
  font-size: 10.5px; line-height: 1.8; letter-spacing: .14em;
  padding: 0 .7em; border-radius: 2px;
  background: rgba(30, 28, 21, .66); color: #fff;
}

/* ---------- 見出し（欧文＋小さな和文） ---------- */
.tt { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.tt--s { align-items: flex-start; text-align: left; }
.tt--e { align-items: flex-end; text-align: right; }
.tt__en {
  font-family: var(--en); font-weight: 500; line-height: 1.1;
  font-size: clamp(2.15rem, 1.7rem + 1.6vw, 2.6rem);
  letter-spacing: .15em; text-transform: capitalize;
}
.tt__jp { font-size: .82rem; letter-spacing: .2em; line-height: 1.7; }
.tt--h1 .tt__en { font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); letter-spacing: .14em; }
.tt--h1 .tt__jp { font-size: .9rem; }
.sub { font-size: 1.22rem; line-height: 1.95; letter-spacing: .2em; font-weight: 500; }
@media (min-width: 780px) { .sub { font-size: 1.45rem; } }
.lead { font-size: .95rem; }
.q-mark { font-family: var(--en); font-size: 1.15em; margin: 0 .25em; }

/* ---------- ボタン・線のリンク ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  min-width: 13.5rem; min-height: 3.25rem; padding: .4em 1.8em;
  border-radius: 4px; background: var(--ink); color: #fff;
  font-size: .9rem; line-height: 1.6; letter-spacing: .18em; text-decoration: none;
  transition: background-color var(--t), color var(--t);
}
.btn:hover { background: #2f2a1f; }
.btn--w { background: rgba(255, 255, 255, .92); color: var(--ink); }
.btn--w:hover { background: #fff; }
.lnk {
  position: relative; display: inline-flex; align-items: center; gap: 1.2rem;
  padding-bottom: .75rem; text-decoration: none; font-size: .9rem; letter-spacing: .14em; line-height: 1.6;
}
.lnk::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; }
.lnk:hover::after { animation: line-redraw .9s var(--ease); }
.lnk__a {
  flex: none; width: 2.5rem; height: 1.25rem; border-radius: 999px; background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.lnk__a svg { width: 1.15rem; height: .5rem; stroke: #fff; fill: none; stroke-width: 1.2; }
.on-dark .lnk__a { background: #fff; }
.on-dark .lnk__a svg { stroke: var(--ink); }
@keyframes line-redraw {
  0% { transform: scaleX(1); transform-origin: right; }
  45% { transform: scaleX(0); transform-origin: right; }
  46% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.more { margin-top: 2.6rem; }
.tline { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---------- ヘッダー（透明・固定、欧文の2列ナビ） ---------- */
.hdr { position: absolute; left: 0; right: 0; z-index: 100; color: var(--ink); pointer-events: none; transition: color .4s, background-color .4s, box-shadow .4s; }
html.js .hdr { position: fixed; top: var(--hdr-top); }
.hdr a, .hdr button { pointer-events: auto; }
.hdr__in {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: .85rem 12px .85rem 16px;
}
.hdr__nav { display: none; }
.hdr__brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.35; transition: opacity .4s; }
.hdr__brandJa { font-size: .98rem; letter-spacing: .3em; font-weight: 500; white-space: nowrap; }
.hdr__brandEn { font-family: var(--en); font-size: .74rem; letter-spacing: .2em; }
.hdr__act { display: flex; align-items: center; gap: .55rem; justify-self: end; }
.hdr__tel { display: none; font-family: var(--en); font-size: 1.05rem; letter-spacing: .12em; text-decoration: none; font-weight: 500; }
.btn--hdr { min-width: 0; min-height: 2.5rem; padding: .2em 1.1em; font-size: .8rem; letter-spacing: .16em; }
.menu-btn { position: relative; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: inherit; }
.menu-btn__l, .menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: .55rem; right: .55rem; height: 1px; background: currentColor; }
.menu-btn::before { top: calc(50% - 7px); }
.menu-btn__l { top: 50%; }
.menu-btn::after { top: calc(50% + 7px); }
.hdr--light { color: #fff; }
.hdr--light .btn--hdr { background: rgba(255, 255, 255, .92); color: var(--ink); }
.hdr--top.hdr--light .hdr__brand { opacity: 0; visibility: hidden; }
.hdr--solid { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 0 var(--line2); color: var(--ink); }
@supports (backdrop-filter: blur(4px)) { .hdr--solid { background: rgba(255, 255, 255, .86); backdrop-filter: blur(8px); } }

@media (min-width: 1024px) {
  .hdr__in { grid-template-columns: 1fr auto 1fr; align-items: start; padding: 2.1rem calc(30 / 1440 * 100%) 1rem calc(60 / 1440 * 100%); }
  .hdr__nav { display: block; }
  .hdr__nav ul { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 2.8rem; row-gap: .35rem; }
  .hdr__nav a { display: inline-flex; align-items: baseline; gap: .7em; text-decoration: none; line-height: 1.8; }
  .hdr__nav .n-en { font-family: var(--en); font-size: 1rem; letter-spacing: .15em; font-weight: 500; }
  .hdr__nav .n-jp { font-size: .7rem; letter-spacing: .12em; }
  .hdr__nav a span { border-bottom: 1px solid transparent; transition: border-color .4s; }
  .hdr__nav a:hover .n-en, .hdr__nav a[aria-current="page"] .n-en { border-bottom-color: currentColor; }
  .hdr__brand { align-items: center; text-align: center; padding-top: .2rem; }
  .hdr__brandJa { font-size: 1.12rem; letter-spacing: .38em; margin-right: -.38em; }
  .hdr__tel { display: inline; }
  .hdr__act { gap: 1.4rem; }
  .btn--hdr { min-width: 9.5rem; min-height: 2.6rem; }
  .menu-btn { display: none; }
  /* 下へ進んだら：ナビをたたんで「メニュー」に */
  .hdr--solid .hdr__in { align-items: center; padding-top: .8rem; padding-bottom: .8rem; }
  .hdr--solid .hdr__nav { display: none; }
  .hdr--solid .menu-btn { display: inline-flex; order: 3; }
  .hdr--solid .hdr__in { grid-template-columns: 1fr auto 1fr; }
  .hdr--solid .hdr__brand { grid-column: 2; }
  .hdr--solid .hdr__act { grid-column: 3; }
}

/* ---------- 全画面のメニュー ---------- */
.gm {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: var(--bg2); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4.5rem 1.25rem 3rem;
}
.gm[hidden] { display: none; }
html.is-menu { overflow: hidden; }
.gm__close {
  position: absolute; top: 1rem; right: 1.1rem;
  background: none; border: 0; padding: .3rem .2rem; cursor: pointer; color: inherit;
  font-family: var(--en); font-size: 1.05rem; letter-spacing: .14em; border-bottom: 1px solid currentColor; line-height: 1.4;
}
.gm__list { display: grid; gap: .5rem; text-align: center; }
.gm__list a { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1.35; padding: .25rem .5rem; }
.gm__list .n-en { font-family: var(--en); font-size: 1.75rem; letter-spacing: .14em; font-weight: 500; }
.gm__list .n-jp { font-size: .72rem; letter-spacing: .18em; }
.gm__list a[aria-current="page"] .n-en { border-bottom: 1px solid currentColor; }
.gm__foot { margin-top: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.gm__tel { font-family: var(--en); font-size: 1.5rem; letter-spacing: .12em; text-decoration: none; }
@media (min-width: 780px) {
  .gm__list { grid-template-columns: repeat(2, max-content); column-gap: 5rem; row-gap: 1.1rem; text-align: left; }
  .gm__list a { align-items: flex-start; }
}

/* ---------- ファーストビュー（全面の写真 → 窓の形に縮む） ---------- */
.fv { position: relative; height: 100svh; min-height: 34rem; background: var(--bg); --e: 0; }
html.motion .fv { height: 185svh; }
.fv__stage { position: sticky; top: 0; height: 100svh; min-height: 34rem; overflow: hidden; }
.fv__img { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
html.motion .fv__img { will-change: clip-path; }
.fv__img img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 42%; }
.fv__img::after {
  content: ""; position: absolute; inset: 0;
  /* 晴れの写真に合わせて膜は薄く。上はヘッダーの白字、中央は屋号、下は scroll の下敷きだけ少し濃くする */
  background:
    radial-gradient(ellipse 38rem 25rem at 8% 0, rgba(30, 27, 20, .54) 0%, rgba(30, 27, 20, .48) 58%, rgba(30, 27, 20, 0) 100%),
    radial-gradient(ellipse 24rem 10rem at 85% 0, rgba(30, 27, 20, .5) 0%, rgba(30, 27, 20, .36) 50%, rgba(30, 27, 20, 0) 100%),
    radial-gradient(ellipse 26rem 12rem at 50% 53%, rgba(30, 27, 20, .64) 0%, rgba(30, 27, 20, .5) 45%, rgba(30, 27, 20, 0) 100%),
    radial-gradient(ellipse 11rem 12rem at 50% 100%, rgba(30, 27, 20, .66) 0%, rgba(30, 27, 20, .5) 40%, rgba(30, 27, 20, 0) 100%),
    linear-gradient(180deg, rgba(30, 27, 20, .34) 0, rgba(30, 27, 20, .14) 9rem, rgba(30, 27, 20, .04) 45%, rgba(30, 27, 20, .08) 72%, rgba(30, 27, 20, .3) 100%);
  opacity: calc(1 - var(--e) * .7);
}
.fv__title {
  position: absolute; inset: 0; z-index: 2; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 3rem 1rem 0;
  opacity: calc(1 - var(--e) * 2.2);
  text-shadow: 0 0 1px rgba(20, 18, 12, .85), 0 0 3px rgba(20, 18, 12, .7), 0 0 .6em rgba(20, 18, 12, .55), 0 0 1.4em rgba(20, 18, 12, .4);
}
.fv__copy::before, .fv__copy::after { box-shadow: 0 1px 3px rgba(20, 18, 12, .5); }
.fv__scroll { text-shadow: 0 0 1px rgba(20, 18, 12, .85), 0 0 3px rgba(20, 18, 12, .7), 0 0 .6em rgba(20, 18, 12, .55), 0 0 1.4em rgba(20, 18, 12, .4); }
.hdr--light { text-shadow: 0 0 1px rgba(20, 18, 12, .85), 0 0 3px rgba(20, 18, 12, .7), 0 0 .6em rgba(20, 18, 12, .55), 0 0 1.4em rgba(20, 18, 12, .4); }
.hdr--light .btn--hdr { text-shadow: none; }
.fv__h1 { display: flex; flex-direction: column; align-items: center; font-weight: 500; }
.fv__en { font-family: var(--en); font-size: .82rem; letter-spacing: .34em; line-height: 1.6; }
.fv__logo { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.75rem); letter-spacing: .38em; margin-right: -.38em; line-height: 1.6; margin-top: .5rem; }
.fv__copy { display: flex; align-items: center; gap: 1em; margin-top: 1.1rem; font-size: .86rem; letter-spacing: .3em; line-height: 1.6; }
.fv__copy::before, .fv__copy::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .8; }
.fv__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 1.3rem; transform: translateX(-50%);
  color: #fff; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  font-family: var(--en); font-size: .78rem; letter-spacing: .2em; line-height: 1;
  opacity: calc(1 - var(--e) * 3);
}
.fv__scroll i { position: relative; width: 1px; height: 3rem; background: rgba(255, 255, 255, .45); overflow: hidden; }
.fv__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: #fff; }
html.motion .fv__scroll i::after { animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
.fv .im { bottom: 1rem; right: 1rem; opacity: calc(1 - var(--e) * 3); }

/* ---------- 節のつなぎ（白 ⇄ 生成りをグラデーションで） ---------- */
.to-beige { background: linear-gradient(180deg, var(--bg) 0, var(--bg2) 16rem, var(--bg2) 100%); }
.to-white { background: linear-gradient(180deg, var(--bg2) 0, var(--bg) 16rem, var(--bg) 100%); }
.beige { background: var(--bg2); }
.sec { position: relative; padding: 6.5rem 0; overflow-x: clip; }
@media (min-width: 780px) { .sec { padding: 9.5rem 0; } }
.sec--tight { padding-top: 4rem; }
@media (min-width: 780px) { .sec--tight { padding-top: 5.5rem; } }
.sec__head { margin-bottom: 3rem; }
@media (min-width: 780px) { .sec__head { margin-bottom: 4rem; } }

/* 背景の年輪 */
.rings { position: absolute; z-index: 0; width: min(74rem, 190vw); max-width: none; opacity: .09; pointer-events: none; }
.sec > .w, .sec > .cx { position: relative; z-index: 1; }

/* ---------- 視差の写真枠 ---------- */
.px { position: relative; overflow: hidden; background: var(--bg3); }
.px img { width: 100%; height: 100%; object-fit: cover; }
html.motion .px img { height: 116%; transform: translate3d(0, -8%, 0); will-change: transform; }
/* 角の丸め方を写真ごとに変える */
.r-arch { border-radius: 999px 999px 3px 3px; }
.r-top { border-radius: 3.75rem 3.75rem 2px 2px; }
.r-leaf { border-radius: 1.5rem 2px 1.5rem 2px; }
.r-leaf2 { border-radius: 2px 1.5rem 2px 1.5rem; }
.r-side { border-radius: 2px 2.5rem 2.5rem 2px; }
.r-side2 { border-radius: 2.5rem 2px 2px 2.5rem; }
.r-sm { border-radius: 2px; }
figure { position: relative; }
.cap { margin-top: .7rem; font-size: .78rem; line-height: 1.8; letter-spacing: .12em; color: var(--ink2); }

/* ---------- concept：中央の文と、まわりに散らした写真 ---------- */
.cx { width: calc(340 / 390 * 100%); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.cx__text { grid-column: 1 / -1; text-align: center; }
.cx__text .sub { margin: 2.2rem 0 2.6rem; }
.cx__lines p { font-size: .98rem; line-height: 2.35; letter-spacing: .15em; }
.cx__lines p + p { margin-top: 2.2em; }
.cx__lines .ln { display: inline-block; }
@media (min-width: 900px) { .cx__lines .ln { display: block; } }
.cx__links { margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2.4rem; }
.sc { margin-top: 3rem; align-self: start; }
.sc--1 { grid-column: 1; width: 82%; justify-self: end; }
.sc--2 { grid-column: 2; width: 100%; margin-top: 6rem; }
.sc--3 { grid-column: 1 / -1; width: 74%; justify-self: start; margin-left: -4%; }
.sc--4 { grid-column: 2; width: 92%; margin-top: 2rem; justify-self: end; }
.sc--5 { grid-column: 1; width: 100%; margin-top: 5rem; grid-row: span 1; }
@media (min-width: 900px) {
  .cx { width: calc(1240 / 1440 * 100%); max-width: 77.5rem; grid-template-columns: 1fr minmax(0, 34rem) 1fr; column-gap: 2.5rem; }
  .cx__text { grid-column: 2; grid-row: 1 / span 4; }
  .sc { margin-top: 0; }
  .sc--1 { grid-column: 1; grid-row: 1; width: 52%; justify-self: end; margin-top: 1rem; }
  .sc--2 { grid-column: 3; grid-row: 1 / span 2; width: 74%; justify-self: end; margin-top: 11rem; margin-right: -8%; }
  .sc--3 { grid-column: 1; grid-row: 2 / span 2; width: 96%; margin-top: 9rem; margin-left: -18%; justify-self: start; }
  .sc--4 { grid-column: 3; grid-row: 3 / span 2; width: 58%; justify-self: start; margin-top: 7rem; margin-left: 6%; }
  .sc--5 { grid-column: 2; grid-row: 5; width: 46%; justify-self: center; margin-top: 7rem; transform: translateX(-38%); }
}

/* ---------- message：大きな窓の写真と、右の文 ---------- */
.msg { display: grid; }
.msg__main { width: 84%; }
.msg__main .ph { aspect-ratio: 4 / 5; }
.msg__small { width: 46%; justify-self: end; margin-top: -30%; position: relative; z-index: 2; }
.msg__small .px { aspect-ratio: 1; }
.msg__body { margin-top: 3rem; }
.msg__quote { margin: 2.2rem 0 2rem; font-size: 1.05rem; line-height: 2.2; letter-spacing: .14em; }
.msg__txt { font-size: .93rem; }
.msg__name { margin-top: 2rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em 1em; font-size: 1.15rem; letter-spacing: .3em; }
.msg__name small { font-size: .75rem; letter-spacing: .16em; }
@media (min-width: 900px) {
  .msg { grid-template-columns: calc(498 / 1240 * 100%) 1fr; column-gap: calc(130 / 1240 * 100%); grid-template-areas: "main small" "main body"; grid-template-rows: auto 1fr; align-items: start; }
  .msg__main { grid-area: main; width: 100%; }
  .msg__small { grid-area: small; width: 9.5rem; margin-top: 0; }
  .msg__body { grid-area: body; margin-top: 1.5rem; max-width: 27rem; }
}

/* ---------- consult：品書きのように中央に並べる ---------- */
.menu-list { display: grid; gap: 0; }
.menu-item { text-align: center; padding: 2.4rem 0; position: relative; }
.menu-item + .menu-item::before { content: ""; position: absolute; top: 0; left: 50%; width: 2.5rem; height: 1px; background: var(--line); transform: translateX(-50%); }
.menu-item__k {
  display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem;
  border: 1px solid var(--ink); border-radius: 50%; font-size: 1.15rem; letter-spacing: 0; line-height: 1;
}
.menu-item h3 { margin-top: 1.1rem; font-size: 1.08rem; letter-spacing: .16em; line-height: 1.8; }
.menu-item p { margin-top: .7rem; font-size: .9rem; line-height: 2.05; }
@media (min-width: 900px) {
  .menu-list { grid-template-columns: repeat(3, 1fr); }
  .menu-item { padding: 2.6rem 2.2rem; }
  .menu-item + .menu-item::before { display: none; }
  .menu-item:nth-child(3n+2), .menu-item:nth-child(3n+3) { border-left: 1px solid var(--line); }
  .menu-item:nth-child(n+4) { border-top: 1px solid var(--line); }
}

/* ---------- service：左に見出し、右に片側を丸めた写真 ---------- */
.svc { display: grid; gap: 2.6rem; }
.svc__photo .px { aspect-ratio: 4 / 5; }
.svc__txt { font-size: .95rem; }
.svc__txt h3 { margin: 2rem 0 1.2rem; font-size: 1.25rem; letter-spacing: .2em; }
@media (min-width: 900px) {
  .svc { grid-template-columns: 1fr calc(560 / 1240 * 100%); column-gap: calc(110 / 1240 * 100%); align-items: center; }
  .svc--rev { grid-template-columns: calc(560 / 1240 * 100%) 1fr; }
  .svc--rev .svc__photo { order: -1; }
}
.subs { margin-top: 5rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.subs li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 1.2rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.subs .px { aspect-ratio: 1; }
.subs h3 { font-size: 1.02rem; letter-spacing: .16em; line-height: 1.8; }
.subs p { font-size: .86rem; line-height: 1.95; margin-top: .2rem; }
@media (min-width: 900px) {
  .subs { grid-template-columns: repeat(3, 1fr); border-top: 0; column-gap: 2.5rem; }
  .subs li { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--line); padding-top: 2rem; align-items: start; }
  .subs .px { aspect-ratio: 4 / 3; }
}

/* ---------- 数字の表（樹木医） ---------- */
.figs { margin-top: 3rem; border-top: 1px solid var(--line); }
.figs > div { display: grid; grid-template-columns: 8.6rem 1fr; gap: 1rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.figs dt { font-family: var(--en); font-size: 2.3rem; line-height: 1.2; letter-spacing: .04em; font-weight: 500; white-space: nowrap; }
.figs dt small { font-family: var(--serif); font-size: .8rem; letter-spacing: .1em; margin-left: .25em; }
.figs dd { font-size: .88rem; line-height: 1.9; }
@media (min-width: 780px) { .figs > div { grid-template-columns: 12rem 1fr; } .figs dt { font-size: 2.8rem; } }

/* ---------- career：横に送る年表 ---------- */
.cr { display: grid; gap: 3rem; position: relative; }
.cr__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 21rem); gap: 1.6rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem 0 1.4rem; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.cr__item { scroll-snap-align: start; border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.cr__place { display: flex; align-items: baseline; gap: .9em; flex-wrap: wrap; }
.cr__place b { font-weight: 500; font-size: 1.45rem; letter-spacing: .2em; line-height: 1.5; }
.cr__place span { font-family: var(--en); font-size: .95rem; letter-spacing: .12em; font-style: italic; }
.cr__item p { margin-top: 1rem; font-size: .88rem; line-height: 2.05; }
.cr__ctl { display: flex; align-items: center; gap: .8rem; }
.cr__btn {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--t), color var(--t);
}
.cr__btn:hover { background: var(--ink); color: #fff; }
.cr__btn svg { width: 1rem; height: .5rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.cr__btn--prev svg { transform: scaleX(-1); }
html:not(.js) .cr__ctl { display: none; }
.cr__ring { position: absolute; z-index: 0; width: 15rem; right: -5rem; top: -9rem; opacity: .7; pointer-events: none; }
.cr__head, .cr__body { position: relative; z-index: 1; }
.cr__ring circle { fill: none; stroke: var(--line); stroke-width: 1; }
@media (min-width: 900px) {
  .cr { grid-template-columns: 1fr calc(360 / 1240 * 100%); column-gap: 4rem; }
  .cr__head { grid-column: 2; grid-row: 1; padding-top: 3rem; }
  .cr__body { grid-column: 1; grid-row: 1; min-width: 0; }
  .cr__ring { width: 22rem; right: -9rem; top: -8rem; }
}

/* 全幅の写真の帯（視差） */
.wall { position: relative; height: clamp(17rem, 62vw, 38rem); }
.wall .px { position: absolute; inset: 0; }
.wall--inset { width: calc(340 / 390 * 100%); margin: 0 auto; }
@media (min-width: 780px) { .wall--inset { width: calc(1240 / 1440 * 100%); max-width: 77.5rem; } }

/* ---------- 流れる写真の帯 ---------- */
.mq { overflow: hidden; margin-top: 3.5rem; }
.mq__track { display: flex; gap: 1rem; width: max-content; }
html.motion .mq__track { animation: mq 80s linear infinite; }
.mq.is-paused .mq__track, .mq:hover .mq__track { animation-play-state: paused; }
.mq__item { width: clamp(12rem, 42vw, 21rem); flex: none; }
.mq__item .px { aspect-ratio: 4 / 5; }
.mq__item:nth-child(3n+2) .px { aspect-ratio: 1; margin-top: 2.5rem; }
.mq__item:nth-child(3n) .px { aspect-ratio: 3 / 4; margin-top: 1rem; }
.mq__item .cap { padding-right: .5rem; }
@keyframes mq { to { transform: translateX(calc(-50% - .5rem)); } }
html:not(.motion) .mq { overflow-x: auto; }
.mq__ctl { margin-top: 1.4rem; display: flex; justify-content: flex-end; }
html:not(.motion) .mq__ctl { display: none; }
.pausebtn {
  background: none; border: 0; color: var(--ink); cursor: pointer; padding: .3rem 0;
  font-family: var(--en); font-size: .95rem; letter-spacing: .14em; border-bottom: 1px solid currentColor; line-height: 1.4;
}
.pausebtn small { font-family: var(--serif); font-size: .72rem; margin-left: .5em; }

/* ---------- flow：細い縦線でつなぐ手順 ---------- */
.steps { counter-reset: st; margin-left: .9rem; }
.steps li { counter-increment: st; position: relative; padding: 0 0 2.4rem 2.2rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(st, lower-roman) "."; position: absolute; left: -1rem; top: .1rem;
  width: 2rem; text-align: center;
  font-family: var(--en); font-style: italic; font-size: 1.05rem; line-height: 1.8; letter-spacing: .05em;
}
.steps li::after { content: ""; position: absolute; left: 0; top: 2.4rem; bottom: .5rem; width: 1px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.08rem; letter-spacing: .18em; line-height: 1.9; }
.steps p { margin-top: .45rem; font-size: .9rem; line-height: 2.05; }
.steps .kn { margin-top: .9rem; }

/* 地域の並び */
.area { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.4rem; }
.area li { font-size: .95rem; letter-spacing: .14em; }
.area li:first-child { border-bottom: 1px solid currentColor; }

/* ---------- お問い合わせの帯 ---------- */
.cta { text-align: center; }
.cta .sub { margin: 2rem 0 1.4rem; }
.cta__tel { display: inline-block; margin-top: 2.4rem; font-family: var(--en); font-size: 2.1rem; letter-spacing: .12em; line-height: 1.3; text-decoration: none; font-weight: 500; }
.cta__tel-note { display: block; font-size: .78rem; color: var(--ink2); letter-spacing: .1em; line-height: 1.8; margin-top: .3rem; }
.cta__btn { margin-top: 2.2rem; }

/* ---------- 下層ページの頭：見出し＋窓の形の写真 ---------- */
.phd { padding-top: 7.5rem; background: linear-gradient(180deg, var(--bg2) 0, var(--bg2) 55%, var(--bg) 100%); overflow-x: clip; }
@media (min-width: 1024px) { .phd { padding-top: 12.5rem; } }
.crumb { font-size: .74rem; letter-spacing: .14em; line-height: 1.8; text-align: center; margin-bottom: 2rem; color: var(--ink2); }
.crumb a { text-decoration: none; border-bottom: 1px solid currentColor; }
.crumb span { margin: 0 .7em; }
.phd .lead { max-width: 34rem; margin: 2.2rem auto 0; text-align: center; }
.phd__win { width: min(26rem, 68vw); margin: 4rem auto 0; }
.phd__win .px, .phd__win .ph { aspect-ratio: 5 / 6; }
@media (min-width: 780px) { .phd__win { width: min(30rem, 40vw); } }

/* 下層の本文 */
.prose { font-size: .95rem; }
.prose h3 { font-size: 1.15rem; letter-spacing: .18em; line-height: 1.9; margin: 2.6rem 0 1rem; }
.prose ul.dots li { position: relative; padding-left: 1.3em; }
.prose ul.dots li::before { content: ""; position: absolute; left: .2em; top: 1.05em; width: .4em; height: .4em; border-radius: 50%; background: var(--ink); }
.split { display: grid; gap: 3rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: calc(380 / 1240 * 100%) 1fr; column-gap: calc(120 / 1240 * 100%); }
  .split--r { grid-template-columns: 1fr calc(380 / 1240 * 100%); }
  .split--r > :first-child { order: 2; }
}
.pair { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; margin-top: 2.6rem; align-items: start; }
.pair > :nth-child(2) { margin-top: 3rem; }

/* 表（カルテ・ソライの樹木医・会社概要） */
.tbl { border-top: 1px solid var(--line); }
.tbl > div { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.tbl dt { font-size: .82rem; letter-spacing: .16em; color: var(--ink2); line-height: 1.8; }
.tbl dd { font-size: .95rem; line-height: 1.95; }
@media (min-width: 600px) { .tbl > div { grid-template-columns: 9rem 1fr; gap: 1.5rem; } .tbl dt { font-size: .88rem; line-height: 1.95; } }
.card { background: var(--bg); padding: 2rem 1.4rem; border: 1px solid var(--line2); }
@media (min-width: 780px) { .card { padding: 2.8rem 3rem; } }
.card__t { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.card__t b { font-weight: 500; font-size: 1.1rem; letter-spacing: .2em; }
.card__t span { font-family: var(--en); font-style: italic; font-size: .95rem; letter-spacing: .1em; }

/* 頼めること（番号つき2列） */
.dolist { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: dl; }
.dolist li { counter-increment: dl; padding: 1.6rem 0 1.6rem 3rem; border-bottom: 1px solid var(--line); position: relative; }
.dolist li::before { content: counter(dl, decimal-leading-zero); position: absolute; left: 0; top: 1.6rem; font-family: var(--en); font-size: 1.15rem; letter-spacing: .08em; line-height: 1.8; }
.dolist h3 { font-size: 1.05rem; letter-spacing: .16em; line-height: 1.8; margin: 0; }
.dolist p { font-size: .88rem; margin-top: .4rem; line-height: 2; }
@media (min-width: 900px) { .dolist { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }

/* 資格になるまで（3段） */
.become { margin-top: 3rem; display: grid; gap: 2rem; }
.become li { border-top: 1px solid var(--ink); padding-top: 1.2rem; }
.become b { font-family: var(--en); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: .1em; }
.become h3 { font-size: 1.05rem; letter-spacing: .16em; margin-top: .3rem; line-height: 1.8; }
.become p { font-size: .88rem; margin-top: .5rem; line-height: 2; }
@media (min-width: 900px) { .become { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; } }

.src { margin-top: 1.2rem; font-size: .76rem; line-height: 1.9; letter-spacing: .06em; color: var(--ink2); }
.src li + li { margin-top: .5rem; }
.src a { word-break: break-all; }

/* ---------- 実績：互い違いの写真 ---------- */
.ba { display: grid; gap: 3rem; }
.ba__pics { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ba__pics .ph { aspect-ratio: 3 / 4; padding: .8rem; }
.ba h3 { margin-top: 1.2rem; font-size: 1.02rem; letter-spacing: .14em; line-height: 1.8; }
.ba p { font-size: .88rem; margin-top: .4rem; line-height: 2; }
@media (min-width: 900px) { .ba { grid-template-columns: 1fr 1fr; column-gap: 4rem; } .ba > :nth-child(2) { margin-top: 5rem; } }
.wk { display: grid; gap: 5rem; }
.wk__item { display: grid; gap: 1.4rem; }
.wk__item .px { aspect-ratio: 4 / 3; }
.wk__item:nth-child(even) .wk__ph { width: 78%; justify-self: end; }
.wk__item:nth-child(even) .px { aspect-ratio: 4 / 5; }
.wk__item:nth-child(3n) .wk__ph { width: 88%; }
.wk__where { font-size: .76rem; letter-spacing: .16em; color: var(--ink2); }
.wk__item h3 { font-size: 1.08rem; letter-spacing: .16em; line-height: 1.8; margin-top: .3rem; }
.wk__item p { font-size: .88rem; line-height: 2; margin-top: .5rem; }
@media (min-width: 900px) {
  .wk { gap: 7rem; }
  .wk__item { grid-template-columns: calc(640 / 1240 * 100%) 1fr; column-gap: calc(90 / 1240 * 100%); align-items: end; }
  .wk__item:nth-child(even) { grid-template-columns: 1fr calc(440 / 1240 * 100%); }
  .wk__item:nth-child(even) .wk__ph { order: 2; width: 100%; }
  .wk__item:nth-child(3n) .wk__ph { width: 100%; }
  .wk__item .wk__tx { max-width: 24rem; padding-bottom: 1rem; }
}
.fl-big { display: grid; gap: 2.4rem; }
.fl-big .px { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .fl-big { grid-template-columns: calc(460 / 1240 * 100%) 1fr; column-gap: calc(110 / 1240 * 100%); align-items: center; } }
.ig { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 2.4rem; }
.ig .ph { aspect-ratio: 1; padding: .5rem; }
@media (min-width: 780px) { .ig { grid-template-columns: repeat(6, 1fr); gap: .8rem; } }

/* ---------- 経歴（縦の年表） ---------- */
.tl { border-top: 1px solid var(--line); }
.tl li { display: grid; grid-template-columns: 6.4rem 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.tl b { font-weight: 500; letter-spacing: .16em; font-size: .98rem; line-height: 2; }
.tl b span { display: block; font-family: var(--en); font-style: italic; font-weight: 400; font-size: .82rem; letter-spacing: .1em; line-height: 1.4; }
.tl p { font-size: .9rem; line-height: 2.05; }
@media (min-width: 780px) { .tl li { grid-template-columns: 10rem 1fr; } }

/* ---------- よくある質問（全部ひらいたまま） ---------- */
.qa > div { padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.qa > div:first-child { border-top: 1px solid var(--line); }
.qa dt { display: grid; grid-template-columns: 2rem 1fr; font-size: 1rem; letter-spacing: .14em; line-height: 1.9; font-weight: 500; }
.qa dd { display: grid; grid-template-columns: 2rem 1fr; margin-top: .7rem; font-size: .9rem; line-height: 2.05; }
.qa dt::before, .qa dd::before { font-family: var(--en); font-style: italic; font-size: 1.1rem; line-height: 1.75; }
.qa dt::before { content: "Q."; }
.qa dd::before { content: "A."; }

/* ---------- 問い合わせフォーム（下線の入力欄） ---------- */
.fm { display: grid; gap: 2.4rem; margin-top: 3rem; }
.fm__row { display: grid; gap: .8rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.fm__lab { font-size: .95rem; letter-spacing: .14em; line-height: 1.8; font-weight: 500; padding: 0; }
.tag { display: inline-block; margin-left: .7em; font-size: .68rem; letter-spacing: .1em; padding: 0 .55em; line-height: 1.7; border: 1px solid var(--ink); border-radius: 2px; font-weight: 400; vertical-align: .15em; }
.tag--opt { border-color: var(--line); color: var(--ink2); }
.fm__hint { font-size: .8rem; line-height: 1.8; color: var(--ink2); letter-spacing: .08em; }
.fm input[type="text"], .fm input[type="email"], .fm input[type="tel"], .fm textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0;
  font: inherit; font-size: 1rem; color: inherit; letter-spacing: .06em; padding: .55em 0; line-height: 1.8;
}
.fm textarea { min-height: 9rem; resize: vertical; border: 1px solid var(--line); padding: .7em .9em; }
.fm input:focus, .fm textarea:focus { outline: none; border-color: var(--ink); }
.fm input:focus-visible, .fm textarea:focus-visible { box-shadow: 0 1px 0 var(--ink); }
.chs { display: flex; flex-wrap: wrap; gap: .55rem; }
.ck {
  display: inline-flex; align-items: center; gap: .55em; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: .45em 1.05em; font-size: .9rem; line-height: 1.6; letter-spacing: .08em;
  transition: background-color .3s, border-color .3s;
}
.ck small { display: block; font-size: .72rem; color: var(--ink2); letter-spacing: .04em; line-height: 1.5; }
.ck--wide { border-radius: 10px; align-items: flex-start; }
.ck--wide input { margin-top: .4em; }
.ck input { accent-color: var(--ink); margin: 0; flex: none; }
.ck:has(input:checked) { background: var(--bg2); border-color: var(--ink); }
.ck:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (min-width: 900px) {
  .fm__row { grid-template-columns: 14rem 1fr; column-gap: 2.5rem; align-items: start; }
  .fm__row > .fm__lab { grid-column: 1; grid-row: 1 / span 3; padding-top: .45rem; }
  .fm__row > :not(.fm__lab) { grid-column: 2; }
  fieldset.fm__row > legend.fm__lab { float: left; width: 14rem; margin-right: 2.5rem; }
  fieldset.fm__row { display: block; }
  fieldset.fm__row > :not(legend) { margin-left: 16.5rem; }
  fieldset.fm__row > * + :not(legend) { margin-top: .8rem; }
}
.fm__send { text-align: center; margin-top: 1rem; }
.fm__send .btn { border: 0; cursor: pointer; font-family: inherit; }
.fm__send p { margin-top: 1rem; font-size: .8rem; color: var(--ink2); }
.result { margin-top: 3rem; padding: 2rem 1.4rem; background: var(--bg2); border: 1px solid var(--line); }
.result h2 { font-size: 1.1rem; letter-spacing: .16em; line-height: 1.8; }
.result p { margin-top: .8rem; font-size: .9rem; }
.result pre { margin-top: 1.2rem; white-space: pre-wrap; font-family: var(--serif); font-size: .85rem; line-height: 1.95; letter-spacing: .06em; background: var(--bg); padding: 1rem 1.1rem; border: 1px solid var(--line2); }

/* ---------- 次のページ ---------- */
.next { border-top: 1px solid var(--line); }
.next__a { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4.5rem 1rem; text-decoration: none; gap: .4rem; }
.next__k { font-family: var(--en); font-style: italic; font-size: .95rem; letter-spacing: .14em; color: var(--ink2); }
.next__en { font-family: var(--en); font-size: clamp(2.4rem, 1.8rem + 3vw, 4rem); letter-spacing: .12em; line-height: 1.15; font-weight: 500; }
.next__jp { font-size: .85rem; letter-spacing: .2em; }
.next__a .lnk__a { margin-top: 1rem; transition: transform var(--t); }
.next__a:hover .lnk__a { transform: translateX(.5rem); }

/* ---------- フッター（写真を背に） ---------- */
.ft { position: relative; color: #fff; overflow: hidden; display: flex; align-items: flex-end; min-height: min(100svh, 56rem); }
.ft__bg { position: absolute; inset: 0; }
.ft__bg img { width: 100%; height: 100%; object-fit: cover; }
.ft__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 24, 18, .18) 0, rgba(26, 24, 18, .66) 9rem, rgba(26, 24, 18, .66) 100%); }
.ft__in { text-shadow: 0 1px 3px rgba(20, 18, 12, .45); }
.ft__in .kari { text-shadow: none; }
.ft .im { bottom: auto; top: 1rem; right: 1rem; }
.ft__in { position: relative; z-index: 1; padding-top: 9rem; }
.ft__top { display: grid; gap: 3rem; padding-bottom: 3.5rem; }
.ft__logo { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1.5; }
.ft__logo b { font-weight: 500; font-size: 1.35rem; letter-spacing: .36em; }
.ft__logo span { font-family: var(--en); font-size: .85rem; letter-spacing: .2em; }
.ft__info { display: grid; gap: 1.1rem; font-size: .86rem; line-height: 1.8; letter-spacing: .12em; }
.ft__info > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; }
.ft__info dt { opacity: .85; }
.ft__info .kari { color: var(--ink); }
.ft__nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.ft__nav a { text-decoration: none; font-size: .82rem; letter-spacing: .14em; border-bottom: 1px solid rgba(255, 255, 255, .45); line-height: 2; }
.ft__btm { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(212, 211, 205, .5); padding: 1.3rem 0 2rem; font-family: var(--en); font-size: .85rem; letter-spacing: .12em; }
.ft__top-link { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.ft__top-link svg { width: .55rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.1; }
@media (min-width: 900px) {
  .ft__top { grid-template-columns: auto minmax(0, 30rem); justify-content: space-between; align-items: start; }
  .ft__nav { grid-column: 1 / -1; }
}

/* ---------- 動きを弱める設定（OS が「動きを減らす」でも止めない）と、止めた状態 ---------- */
html.soft.motion .mq__track { animation-duration: 240s; }
html.soft.motion .fv__scroll i::after { animation: none; }
html.still *, html.still *::before, html.still *::after { transition-duration: 1ms !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: no-preference) { html:not(.still):focus-within { scroll-behavior: smooth; } }
.mt-btn {
  position: fixed; left: 10px; bottom: 10px; z-index: 150; min-height: 36px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; cursor: pointer;
  background: rgba(30, 30, 28, .78); color: #fff; font-family: inherit; font-size: 12px; line-height: 1; letter-spacing: .08em;
}
.mt-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wk + .kn { margin-top: 4.5rem; }