@charset "UTF-8"; /* ========================================================== 八木が谷造園 huit — style（2026.10 改） 書体はすべて日本語字形（しっぽり明朝 / Noto Sans JP） 色は 深い緑・黄緑・白・金。緑を地に、金と黄緑は差し色として細く使う ---- デザインの決まり（2026.10.25 r）---- 色　：見出し（日本語・英字とも）は濃い緑（--olive）。数字（番号・年・電話・値段）は金（--gold）。 　　　暗い欄では英字・数字とも淡い金（--gold-l）。黄緑（--leaf）は文字と線には使わない（選択色・印の色だけ） 線　：1本の線は1色。グラデーションは使わない。役割で色を決める 　　　・飾りの短い線（英字の小見出しの前、ページの小見出しの前、数字の上、電話の上）＝金 　　　・リンクの下線＝文字の色。触れると濃い緑の線が伸びる 　　　・区切りの線＝薄い灰緑（--line） 書体：見出し・リード・詩的な一文＝しっぽり明朝。説明の文・表・注記＝Noto Sans JP（ゴシック）。 　　　英字の見出し（頭・章・メニュー）＝Newsreader 300（--disp。2026.10.28 なおさん「B の Newsreader で」）。英語ページの文の見出し・斜体は Cormorant Garamond（--latin）のまま 　　　英字の小さな札・ラベル＝Jost、電話番号＝Jost の細字 頭　：パンくず → 英字の見出し → 日本語の小見出し（金の短い線つき）→ リード（空なら出さない）→ 写真（一部のページだけ） 　　　写真は1つの比率（PC 21:9／携帯 4:3）、左右は本文と同じ幅（.wrap）。写真のないページは余白だけで次へ 余白：頭の下 --ph-gap、頭の写真の下 --sec-gap。頭の直後の欄は上の余白 0（間は頭の側で持つ） 左端：すべての欄の左端は .wrap の左端にそろえる。読む幅を狭めたいときは中身に max-width をかける（.wrap--narrow） リンク：ページを移る＝文字＋下線＋→（.more）。行動（電話・送る・相談する）＝枠＋——（.btn）。電話番号は Jost の大きな金 札　：分類の札・目次の札・章の英字の札・施工事例の印は、すべて同じ「緑の細い枠」（--tag-line）。番号の数字だけ金。白い札は使わない 　　　並んだ札（目次・絞り込み）は幅をそろえた格子にし、半端な段を残さない 押して大きく：施工の写真だけ（施工事例の写真・手がけることの格子）。店や花の写真は大きくしない 章の頭（手がけること）：「番号＋札」は左右をまたぐ1行目。その下の左の見出しと右の一言は、1行目の字の頭をそろえる（grid は上ぞろえ）。 　　　頭→写真の格子＝--chap-gap、格子→次の章の線、線→次の章の頭＝その2倍（1:2:2） 下層ページ（2026.10.26）：正本はデザインのキャンバス（会社案内・メニュー）。型（頭 .pgh・章 .pgs・表 .spec・メニュー .mcat）と数値は、このファイルの末尾「v」の頭にまとめた。 　　　本文は左揃え・字間一定。字の間を広げて右端をそろえる組み方（両端揃え）は使わない ---- 動きの決まり（2026.10.25 t）---- 値は下の :root の --mv-* / --t-* / --st-* 方針：凝った出方はしない。何度見てもうるさくない、当たり前の動きを1種類だけ 出現（画面に入ったとき一度だけ。上に戻って再び入っても、もう動かない） 　すべて同じ型：少し透けた状態（不透明度 0.3）から 1 へ、下から少し上がって止まる。曲線は --out 　　見出し・文のかたまり・表・カード：16px、0.6s。見出しは1つのかたまりで（行ごと・1字ずつには分けない） 　　写真（頭の写真・格子・カード・人物）：20px、0.6s。中の写真は 1.09 → 1.06 倍に同じ 0.6s で落ち着く 　　（人物の写真は 1.03 → 1 倍。落ち着いたあとは拡大しない） 　遅れ：同時に画面に入ったものは、上の段から順（段の間 0.03s、2段まで）、横に並ぶものは左から順（1つ 0.06s、4つ目まで）。最大 0.24s。 　　rv-d1/2/3 は 0.06/0.12/0.18s（左右2段の右など）。全部出そろうまで約 0.8s 　かたまりの中（表の行・カードの中・段落・金の短い線）は順送りしない。かたまりごと一度に 奥行き（下層ページ・PCのみ。画面の真ん中で本来の位置、上下の端で最大の量だけずれる） 　段は1つ：4px（気づくか気づかないか程度）。横に並んだかたまり（章の頭・2列の欄・写真と文）は 　並びの入れ物ごと同じ深さで動かし、左右でずれないようにする（main.js が並びを見て決める） 写真の中の動き：すべての写真で同じ。枠の高さの 2.5%（最大 16px。拡大 1.06 倍の余りの中）。人の写真（代表・スタッフ・集合）は中で動かさない 　背景の帯（ご相談の帯・日本庭園の帯）だけは別の型で、帯の高さの 6% 「視差効果を減らす」設定・確認用の画面写真：出現・奥行き・写真の中の動きをすべて止める。携帯では奥行きを止める トップの写真と大きな文字（動画・見出しの1字ずつ）は別扱いで、この決まりの外 ========================================================== */ /* ō・ā など（ラテン文字拡張A）だけを、Jost の拡張の書体ファイルから直接出す。 Google Fonts の Jost・Noto Sans JP は書体が分割されていて、Chrome では ō が「o ＋ 横棒」に分けて組まれ、横棒が右にずれる（2026.10.26 確かめた）。 Google の書体の版（v20）が変わってこのファイルが無くなっても、Jost に戻る（横棒はずれるが、字は出る） */ @font-face{font-family:"Jost Ext";src:url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73ord4jQmfxIC7w.woff2) format("woff2");font-weight:300 400;font-display:swap;unicode-range:U+0100-017F} @property --rs{syntax:"";inherits:true;initial-value:1.16} :root{ --css-ok:1; /* このファイルが効いた印（main.js はこれを見てから動き出す） */ --paper:#f6f5ef;--paper-2:#eaece1;--white:#fdfcf9; --ink:#1d241f;--ink-2:#465049;--mute:#878d84;--line:#dbded1; --olive:#2c4a34;--olive-d:#17291d;--olive-l:#6a8a45;--sand:#cdb47e; --leaf:#a2bf4e;--leaf-l:#cddc94;--gold:#ad8a4c;--gold-l:#d9c38f; --moss:#2c4a34;--moss-2:#6a8a45;--night:#112017; --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --latin:"Cormorant Garamond","Shippori Mincho",serif; /* 英字の見出し（.pgh__en・.ovh__en・.chd__en・.mhead__en・.mcat__en）：Newsreader 300、大きな字用の形（opsz 72）だけを読む（build.py の FONTS、追加 22KB）。 大文字の高さが Cormorant の 1.14 倍なので、大きさは Cormorant の時の 0.87 倍。f の頭が短く、合字が切れても i の点とぶつからない（2026.10.28） */ --disp:"Newsreader","Cormorant Garamond",serif; /* 数字：大きい所は Libre Caslon Display、18px 以下は同じ系統の Libre Caslon Text（細くなりすぎない） */ --num:"Libre Caslon Display","Libre Caslon Text","Shippori Mincho",serif; --num-s:"Libre Caslon Text","Libre Caslon Display","Shippori Mincho",serif; --tel:"Jost","Avenir Next","Avenir",sans-serif; /* 電話番号：Avenir に近い幾何学的なゴシック */ --label:"Jost Ext","Jost","Noto Sans JP",sans-serif; --wrap:1280px;--gut:clamp(20px,5vw,72px); --ph-gap:clamp(72px,9vw,120px);--sec-gap:clamp(96px,12vw,170px); --ease:cubic-bezier(.22,.61,.36,1);--out:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.65,0,.35,1); /* 動きの決まり（頭のコメント参照） */ --op0:.12;--mv-txt:40px;--mv-pic:64px;--t-in:1s; /* トップの値（2026.10.26 なおさん「控えめすぎる」「動きをもう少しみせたい」で 16/20px から強めた）。下層は下の body.pg でさらに強める */ --st:.04s; --chap-gap:clamp(40px,5vw,72px); --tag-line:rgba(44,74,52,.3); /* 札・印の細い枠（緑）。すべての札でこの1色 */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:15px;line-height:2;letter-spacing:.06em;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden} @media (min-width:768px){body{font-size:16px}} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} p{margin:0 0 1.4em} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.6;letter-spacing:.1em} ::selection{background:var(--leaf);color:#fff} :focus-visible{outline:2px solid var(--leaf);outline-offset:3px} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} /* 改行は build.py が入れる文節の切れ目（wbr）だけで行う。語の途中では折り返さない（送信フォームの同意の文＝label の中の span も） */ p,li,dd,dt,td,th,h1,h2,h3,h4,figcaption,label,.jp-break{word-break:keep-all;overflow-wrap:break-word;line-break:strict;text-wrap:pretty} .nb{display:inline-block} .nw{white-space:nowrap} /* 閉じかっこ＋助詞（「…」と）を離さない。build.py が入れる */ .wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)} .wrap--narrow>*{max-width:880px} /* 左端は .wrap のまま、読む幅だけ狭める */ .wd-no,.fact__v,.flow__n,.wcard__no,.cta__tel,.tel-box__v,.svc__no,.svc-block__no,.wd-idx,.menu-row .p,.drawer__tel,.hero__num,.chap__no,.mapnote__n{font-variant-numeric:lining-nums} .menu-row .p,.hero__num,.wd-idx,.chap__no,.svc-block__no,.wcard__no{font-variant-numeric:lining-nums tabular-nums} /* ---------- header ---------- */ .hd{position:fixed;inset:0 0 auto 0;z-index:50;height:84px;display:flex;align-items:center;transition:background .6s var(--ease),color .6s var(--ease),height .5s var(--ease),box-shadow .6s,transform .7s var(--out)} .hd__in{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--gut)} .logo{display:flex;align-items:center;gap:14px;line-height:1} .logo__mark{width:auto;height:38px;flex:none} .logo__mark--w{display:none} /* ヘッダーのロゴ：白と濃いの2枚を重ね、字と地と同じ 0.6秒で透けさせて入れ替える（2026.10.26。表示の切り替えだと WebKit で一瞬で替わり、途中でロゴだけ濃くなった） */ .hd .logo{position:relative} .hd .logo__mark{transition:opacity .6s var(--ease)} .hd .logo__mark--w{display:block;position:absolute;left:0;top:50%;translate:0 -50%;opacity:0} .hd--over .logo__mark--o{opacity:0}.hd--over .logo__mark--w{opacity:1} .hd.is-scrolled .logo__mark--o{opacity:1}.hd.is-scrolled .logo__mark--w{opacity:0} body.menu-open .hd .logo__mark--o{opacity:0}body.menu-open .hd .logo__mark--w{opacity:1} .logo__txt{display:flex;flex-direction:column;gap:7px;padding-left:14px;border-left:1px solid rgba(128,128,120,.4)} .logo__jp{font-family:var(--serif);font-size:17.5px;font-weight:500;letter-spacing:.24em;white-space:nowrap} .logo__en{font-family:var(--label);font-size:9.5px;letter-spacing:.3em;opacity:.7;white-space:nowrap} @media (max-width:420px){.logo__en{display:none}.logo__mark{height:32px}} .nav{display:none} .nav a{font-size:14px;letter-spacing:.14em;position:relative;padding:6px 0;white-space:nowrap} .nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--out)} .nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} @media (hover:hover){.nav a:hover::after{transform:scaleX(1);transform-origin:left}} .nav__cta{border:1px solid currentColor;padding:10px 22px !important;transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease)} .hd--over .nav__cta{border-color:#fff} /* 枠の線も字と同じ 0.6秒で替わるよう、色を名指しする（currentColor のままだと WebKit で一瞬で替わる） */ .nav__cta::after{display:none} @media (hover:hover){.nav__cta:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--olive-d)}} .hd--solid .nav__cta,.hd.is-scrolled .nav__cta{background:var(--olive);border-color:var(--olive);color:#fff} @media (hover:hover){.hd--solid .nav__cta:hover,.hd.is-scrolled .nav__cta:hover{background:var(--gold);border-color:var(--gold)}} .nav__lang{font-family:var(--label);font-size:12px !important;letter-spacing:.2em !important;opacity:.8} @media (min-width:1200px){.nav{display:flex;align-items:center;gap:24px}} @media (min-width:1360px){.nav{gap:34px}} .hd--over{color:#fff} .hd--solid,.hd.is-scrolled{background:rgba(246,245,239,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 1px 0 var(--line)} .hd.is-scrolled{height:68px} .hd.is-hidden{transform:translateY(-100%)} /* 携帯のメニューの印：3 本とも同じ長さの細い線 → 開くと真ん中が消え、上下が 45° の正方形の ×（2026.11.03 なおさん「うちのデフォルトは、アマンとかBPCとおなじ」。 前の 2 本を ±30° に傾けた × は幅 23・高さ 14 につぶれていた）。線の右端は今までどおり字の右の線（枠の右端）にそろえる */ .burger{width:44px;height:44px;display:block;position:relative} .burger span{position:absolute;right:0;width:24px;height:1px;background:currentColor;transition:transform .5s var(--out),opacity .3s var(--ease)} .burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px} @media (min-width:1200px){.burger{display:none}} body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} body.menu-open .hd{color:#fff;background:transparent;box-shadow:none;backdrop-filter:none;transform:none} .drawer{position:fixed;inset:0;z-index:40;background:radial-gradient(120% 70% at 100% 0%,#244530 0%,var(--olive-d) 62%);color:#fff;padding:120px var(--gut) 40px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s;overflow-y:auto} body.menu-open{overflow:hidden} body.menu-lock{position:fixed;left:0;right:0;width:100%} /* 開いている間、裏を止める（top は main.js が入れる） */ .drawer{overscroll-behavior:contain} body.menu-open .drawer{opacity:1;visibility:visible} .drawer li{border-bottom:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(14px);transition:opacity .6s var(--out),transform .8s var(--out)} body.menu-open .drawer li{opacity:1;transform:none} .drawer a{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;font-family:var(--serif);font-size:18px;letter-spacing:.16em;white-space:nowrap} .drawer a small{font-family:var(--label);font-size:10px;letter-spacing:.24em;opacity:.55} .drawer__foot{font-size:12px;opacity:.8;line-height:1.9;margin-top:30px} .drawer__tel{color:var(--gold-l);font-family:var(--num);font-size:32px;letter-spacing:.04em;display:block;margin-top:6px} /* ---------- hero ---------- */ .hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;color:#fff;background:#1d2016} .hero__slide{position:absolute;inset:0;opacity:0;z-index:1;overflow:hidden} .hero__slide.is-prev{opacity:1;z-index:2} .hero__slide.is-on{opacity:1;z-index:3;animation:heroin 1.6s cubic-bezier(.45,0,.25,1) both} .hero__slide.is-first{animation:herofirst 1.6s var(--out) both} @keyframes herofirst{from{opacity:0}to{opacity:1}} @keyframes heroin{from{opacity:0}to{opacity:1}} .hero__slide img,.hero__slide picture{position:absolute;inset:0;width:100%;height:100%} .hero__slide img{object-fit:cover;transform-origin:50% 50%;will-change:transform} /* 色は heroN_v.jpg に焼き込み済み（tools/encode_hero_video.sh） */ .hero__veil{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(12,24,16,.46) 0%,rgba(12,24,16,0) 26%,rgba(12,24,16,0) 52%,rgba(12,24,16,.62) 100%),linear-gradient(270deg,rgba(12,24,16,.32) 0%,rgba(12,24,16,0) 30%);pointer-events:none} .hero__copy{position:absolute;z-index:5;top:50%;right:calc(var(--gut) + 4px);transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.2vw,40px);letter-spacing:.34em;line-height:1.95;height:auto;text-shadow:0 2px 24px rgba(0,0,0,.3);margin:0} .hero__copy .ln{display:block;white-space:nowrap} /* 1行（縦の1列）は割らない。画面の低いPCでは字を画面の高さに合わせて小さく */ @media (min-width:600px){.hero__copy{font-size:clamp(22px,min(3.2vw,5.4vh),40px)}} .hero__copy .ch{display:inline-block;opacity:0;transform:translateY(-.35em);filter:blur(5px);transition:opacity 1.4s var(--out),transform 1.8s var(--out),filter 1.6s var(--out)} .hero__copy.is-in .ch{opacity:1;transform:none;filter:blur(0)} .hero__copy.is-out .ch{opacity:0;filter:blur(4px);transform:translateY(.25em);transition-duration:1.2s;transition-timing-function:cubic-bezier(.45,0,.55,1);transition-delay:var(--o,0s) !important} .hero__lead{position:absolute;z-index:5;left:var(--gut);bottom:clamp(84px,13vh,130px);max-width:calc(100% - var(--gut)*2 - 90px)} .hero__lead p{margin:0} .hero__en{font-family:var(--label);font-size:13px;letter-spacing:.3em;opacity:.92;margin-bottom:20px !important;line-height:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 .6em} .hero__en::before{content:"";width:34px;height:1px;background:var(--gold-l);margin-right:.8em} .hero__main{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.1vw,28px);letter-spacing:.26em;line-height:2.05;text-shadow:0 1px 18px rgba(0,0,0,.25)} .hero__lead>*{opacity:0;transform:translateY(16px);animation:leadin 1.8s var(--out) .4s forwards} .hero__lead>*:nth-child(2){animation-delay:.65s} @keyframes leadin{to{opacity:1;transform:none}} .hero__bar{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:34px;display:flex;align-items:center;gap:18px;font-family:var(--label);font-size:12px;letter-spacing:.22em} .hero__num{min-width:60px;font-family:var(--num-s);font-size:14px;letter-spacing:.16em;color:var(--gold-l);opacity:.85} .hero__track{flex:1;height:1px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;max-width:240px} .hero__track i{position:absolute;inset:0;background:var(--gold-l);transform:scaleX(0);transform-origin:left} .hero__cap{margin-left:auto;opacity:.85;text-align:right;transition:opacity .8s} .hero__scroll{position:absolute;z-index:5;left:50%;bottom:0;width:1px;height:64px;background:rgba(255,255,255,.25);overflow:hidden;display:none} .hero__scroll::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:#fff;animation:scrollline 2.6s var(--io) infinite} @keyframes scrollline{to{top:100%}} @media (min-width:768px){.hero__scroll{display:block}} @media (max-width:599px){ .hero{height:86svh;min-height:540px;max-height:760px} .hero__cap{display:none} .hero__copy{font-size:24px;letter-spacing:.28em;height:auto;top:clamp(104px,19.5%,150px);transform:none} /* 2026.11.02 なおさん「携帯で右上の縦書きは、本当にちょっとでいいんだけど今の位置よりは下の方がバランスがいい」→ 104px 固定から、頭の高さの 19.5%（なおさんの携帯で約 117px）。背の高い画面ほど少し下がり、小さな画面は前のまま */ .hero__lead{max-width:none;right:var(--gut);bottom:80px} .hero__en{font-size:11px;letter-spacing:.24em} .hero__en::before{display:none} } @media (orientation:portrait) and (min-width:600px){.hero{max-height:900px;height:72svh}} /* ---------- reveal（出てくる動き） ---------- */ /* 出現は1種類：少し透けた状態から、下から少し上がって止まる（見出し .lines・ページの頭 .ph__h も同じ） */ .rv,.lines,.ph__h{opacity:var(--op0);transform:translate3d(0,var(--mv-txt),0);transition:opacity var(--t-in) var(--out),transform var(--t-in) var(--out)} .rv.is-in,.lines.is-in,.ph__h.is-in{opacity:1;transform:none} .rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s} /* 写真：同じ型で 20px。中の写真はわずかに引いて落ち着く */ .img-mask{overflow:hidden;position:relative;background:#dfe3d4;--rs:1.09} .img-mask>picture,.cta__bg>picture,.band__img>picture{display:block;width:100%;height:100%} .img-mask img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(var(--rs));transition:--rs var(--t-in) var(--out)} /* 動かす準備（別の層）は画面の近くの写真だけ（main.js の is-near）。全部の写真を常に別の層にすると、描き直しが重くなりスクロールが引っかかる（2026.10.28） */ .img-mask.is-near img{will-change:transform} .img-mask.rv{transform:translate3d(0,var(--mv-pic),0);--rs:1.12} .img-mask.rv.is-in{transform:none;--rs:1.09} .img-mask[data-zoom] img,a .img-mask img{transition:--rs .6s var(--out)} /* 見出し：行は分けて組むが、動きは見出しごと1つ */ .lines .ln{display:block} @media (prefers-reduced-motion:reduce){ .rv,.img-mask.rv,.lines,.ph__h{opacity:1;transform:none;transition:none} .hero__copy .ch{transition:none} .hero__slide.is-first,.hero__lead>*{animation:none;opacity:1;transform:none} .hero__scroll::after{animation:none;top:0} .drawer li{opacity:1;transform:none;transition:none} /* 携帯メニュー：項目は上がらず、メニューの溶ける動きだけ */ .burger span{transition:none} /* 三本線は回らず、すぐ×に */ } /* ---------- section scaffolding ---------- */ .sec{padding:clamp(96px,14vw,200px) 0} .sec--tight{padding:clamp(64px,9vw,120px) 0} .sec--white{background:var(--white)} .sec--sand{background:var(--paper-2)} .sec--dark{background:radial-gradient(90% 70% at 92% 8%,#22402b 0%,rgba(34,64,43,0) 70%),var(--olive-d);color:#ecede4} .sec--about{padding-bottom:clamp(72px,9vw,130px)} .eyebrow{display:flex;align-items:center;gap:16px;font-family:var(--label);font-size:11px;letter-spacing:.32em;color:var(--olive);margin-bottom:30px;text-transform:uppercase;white-space:nowrap} .eyebrow::before{content:"";width:40px;height:1px;background:var(--gold);transform-origin:left} .sec--dark .eyebrow::before,.cta .eyebrow::before{background:var(--gold-l)} .sec--dark .eyebrow{color:var(--gold-l)} .h-sec{font-size:clamp(27px,3.5vw,44px);letter-spacing:.13em;line-height:1.66} .h-sub{font-size:clamp(19px,2.2vw,24px);letter-spacing:.12em} .lead{font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.5vw,17px);line-height:2.3;letter-spacing:.08em;color:var(--ink-2)} .sec--dark .lead{color:#d6d4c8} .btn{display:inline-flex;align-items:center;gap:22px;padding:18px 32px;border:1px solid currentColor;font-size:13px;letter-spacing:.2em;transition:background .6s var(--out),color .6s var(--out),border-color .6s;white-space:nowrap} .btn::after{content:"";width:28px;height:1px;background:currentColor;transition:width .6s var(--out)} @media (hover:hover){ .btn:hover{background:var(--olive);color:#fff;border-color:var(--olive)} .btn:hover::after{width:44px} .sec--dark .btn:hover,.cta .btn:hover{background:var(--gold-l);color:var(--olive-d);border-color:var(--gold-l)} } .btn--fill{background:var(--olive);border-color:var(--olive);color:#fff} @media (hover:hover){.btn--fill:hover{background:var(--ink);border-color:var(--ink)}} .more{display:inline-flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.18em;padding-bottom:7px;white-space:nowrap;background:linear-gradient(var(--olive),var(--olive)) 0 100%/0 1px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .55s var(--out),color .5s var(--out)} .more::after{content:"→";font-family:var(--label);transition:transform .6s var(--out)} @media (hover:hover){ .more:hover{color:var(--olive);background-size:100% 1px,100% 1px} .sec--dark .more:hover{color:var(--gold-l);background-image:linear-gradient(var(--gold-l),var(--gold-l)),linear-gradient(currentColor,currentColor)} .more:hover::after{transform:translateX(6px)} } .anchor{scroll-margin-top:90px} /* ---------- top: philosophy ---------- */ .philo{display:grid;gap:64px} @media (min-width:900px){.philo{grid-template-columns:5fr 6fr;gap:clamp(64px,8vw,130px);align-items:center}} .philo__imgs{position:relative;padding-bottom:22%} .philo__imgs .a{aspect-ratio:4/5;width:74%} .philo__imgs .b{aspect-ratio:4/3;width:58%;position:absolute;right:0;bottom:0;border:10px solid var(--paper)} .philo__h{font-size:clamp(29px,3.9vw,50px);letter-spacing:.14em;line-height:1.72;margin-bottom:46px} .facts{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)} @media (min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}} .fact{position:relative;padding:34px 22px 30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .fact::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--gold)} .fact:nth-child(2n){border-right:0} @media (max-width:380px){.fact{padding-left:15px;padding-right:15px}} /* 360幅：説明の「施工を」が1行に残らないよう、横の余白を少し詰める */ @media (min-width:900px){.fact:nth-child(2n){border-right:1px solid var(--line)}.fact:last-child{border-right:0}} .fact__k{font-size:11px;letter-spacing:.2em;color:var(--mute);margin-bottom:10px} .fact__v{font-family:var(--num);font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:.02em;color:var(--gold);margin:0} .fact__v small{font-family:var(--serif);font-size:13px;letter-spacing:.14em;margin-left:6px;color:var(--ink-2)} .fact__d{font-size:12px;color:var(--ink-2);margin:14px 0 0;line-height:1.85;letter-spacing:.06em} /* ---------- chapters（6つの庭づくり） ---------- */ .chaps{display:grid;gap:clamp(110px,14vw,200px)} .chap{display:grid;gap:40px;align-items:center} @media (min-width:960px){ .chap{grid-template-columns:7fr 5fr;gap:clamp(56px,6vw,100px)} .chap:nth-child(even){grid-template-columns:5fr 7fr} .chap:nth-child(even) .chap__pics{order:2} } .chap__pics{position:relative;padding-bottom:16%} .chap__pics .main{aspect-ratio:3/2} .chap__pics .sub{position:absolute;width:40%;aspect-ratio:4/3;right:-4%;bottom:0;border:8px solid var(--paper)} .chap:nth-child(even) .chap__pics .sub{right:auto;left:-4%} /* 縁は置かれた地の色に合わせる（白の欄は白、砂色の欄は砂色） */ .sec--white .chap__pics .sub,.sec--white .philo__imgs .b{border-color:var(--white)} .sec--sand .chap__pics .sub,.sec--sand .philo__imgs .b{border-color:var(--paper-2)} @media (max-width:959px){.chap__pics .sub{right:0}.chap:nth-child(even) .chap__pics .sub{left:0}} .chap__en{display:inline-block;font-family:var(--label);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--olive);padding:4px 12px;border:1px solid var(--tag-line);background:none;margin-bottom:22px;white-space:nowrap} .chap__no{font-family:var(--num-s);font-size:17px;color:var(--gold);letter-spacing:.1em;margin-right:14px} .chap__h{font-size:clamp(24px,2.9vw,36px);letter-spacing:.12em;line-height:1.7} .chap__cat{font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--olive);margin:14px 0 26px} .chap__d{font-size:14px;color:var(--ink-2);line-height:2.1} .chap-full{padding:calc(var(--chap-gap)*2) 0;border-top:1px solid var(--line)} /* 章の頭：1行目に「番号＋札」（左右をまたぐ）。その下に 左＝見出し｜右＝一言＋本文 を上ぞろえで並べ、 見出しと一言の1行目の字の頭（漢字の上の端）を同じ高さにする。 行の上から字の頭までの空きは、行の高さと書体の上下の余白で決まり、大きさに比例する（しっぽり明朝で測った値）： 見出し（行の高さ 1.7）＝0.467em、一言（行の高さ 2）＝0.62em。これを負の余白で打ち消すと、どちらも字の頭が欄の上の端に来る */ .chap-full__head{display:grid;row-gap:28px;align-items:start;margin-bottom:var(--chap-gap)} @media (min-width:960px){.chap-full__head{grid-template-columns:1fr 1fr;column-gap:72px}.chap-full__label{grid-column:1/-1}} .chap-full__label{display:flex;align-items:center;margin:0;line-height:1} .chap-full__label .chap__en{margin-bottom:0;line-height:1.6} .chap-full__head .chap__no{line-height:1} .chap-full__l .chap__h{margin-top:-.467em} .chap-full__l .chap__cat{margin-bottom:0} .chap-full__sub{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);line-height:2;color:var(--olive);margin:-.62em 0 14px} .mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1vw,16px)} @media (min-width:900px){.mosaic{grid-template-columns:repeat(4,1fr)}} .mosaic .img-mask{aspect-ratio:1/1} .mosaic .big{grid-column:span 2} @media (min-width:900px){.mosaic .big{grid-row:span 2;aspect-ratio:auto;height:100%}} .mosaic-cap{font-size:12px;color:var(--mute);letter-spacing:.12em;margin-top:12px} /* ---------- works ---------- */ .works-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(44px,5vw,70px)} /* 揃えた格子：一覧は 1列→2列→3列。互い違いにせず、余白を広く取って端正に（絞り込んでも崩れない） */ .wgrid{display:grid;gap:clamp(64px,7vw,112px) clamp(24px,3.4vw,60px);grid-template-columns:1fr} @media (min-width:640px){.wgrid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.wgrid{grid-template-columns:repeat(3,1fr)}} /* トップ：1枚目を大きく（写真＋文字の2段組み）、残り4枚を小さく一列に並べて強弱をつける */ .wgrid--feature .wcard:first-child{grid-column:1/-1} @media (min-width:1000px){ .wgrid--feature{grid-template-columns:repeat(4,1fr);column-gap:clamp(24px,2.6vw,44px)} .wgrid--feature .wcard:first-child a{display:grid;grid-template-columns:2fr 1fr;gap:clamp(40px,5vw,80px);align-items:end} .wgrid--feature .wcard:first-child .wcard__img{aspect-ratio:16/10} .wgrid--feature .wcard:first-child .wcard__meta{margin-top:0} .wgrid--feature .wcard:first-child .wcard__no{font-size:30px} .wgrid--feature .wcard:first-child .wcard__t{font-size:24px;margin-top:12px} .wgrid--feature .wcard:first-child .wcard__tags{margin-top:18px} .wgrid--feature .wcard:not(:first-child) .wcard__t{font-size:16px} } .wcard a{display:block} /* 施工事例のカードは正方形（2026.10.28 なおさん「正方形にして」「小さくいくつか組む写真は正方形とかだと上手くまとまったりするよ」。手本は堀裕二さんの FONZ GRAPH：小さい写真は同じ形にそろえ、光を選んだ1枚だけ大きく横長に） */ .wcard__img{aspect-ratio:1/1} /* 正方形の中の見せる位置（2026.10.28 ケンスケ。横長の元を正方形に切ると左右が落ちるので、主役が切れないカードだけ横にずらす。 ファイル名の頭で当てるので srcset の _1440・_720 でも効く。真ん中でよい写真は書かない。休止時の寄り 1.09 と視差 --py はそのまま） */ .wcard__img img[src*="/works/001/01"]{object-position:62% 50%} /* 家の軒と柱を入れ、小径が家へ向かう */ .wcard__img img[src*="/works/006/01"]{object-position:56% 50%} /* 鐘楼を欠かさず、山門の屋根まで */ .wcard__img img[src*="/works/007/01"]{object-position:62% 50%} /* 玄関の扉と格子を主役に、左の植栽は添え */ .wcard__img img[src*="/works/013/01"]{object-position:62% 50%} /* 家の右端まで入れ、芝の小径を足元に */ .wcard__meta{display:flex;gap:14px;align-items:baseline;margin-top:20px;font-size:11px;letter-spacing:.16em;color:var(--mute)} .wcard__no{font-family:var(--num-s);font-size:22px;color:var(--gold);letter-spacing:.04em} .wcard__t{font-family:var(--serif);font-size:18px;letter-spacing:.12em;margin-top:6px;line-height:1.7;transition:color .5s} @media (hover:hover){.wcard a:hover .wcard__t{color:var(--olive)}} .wcard__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} /* 印：絞り込みボタンと同じ家族の「細い線の枠」。深緑の字、枠は深緑を薄めた線。ボタンより小さく塗りなしで、押せる物と紛れない */ .tag{font-size:12px;line-height:1.8;letter-spacing:.14em;padding:1px 10px;border:1px solid var(--tag-line);color:var(--olive);white-space:nowrap;background:none} .wcard[hidden]{display:none !important} /* 絞り込みの札：幅をそろえた格子。PC は7つを1段に。それより狭い幅は「すべて」を1段目に置き、残り6つを 3列×2段（携帯 2列×3段） */ .filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:clamp(40px,5vw,60px)} .filter button:first-child{grid-column:1/-1} @media (min-width:768px){.filter{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1280px){.filter{grid-template-columns:repeat(7,minmax(0,1fr))}.filter button:first-child{grid-column:auto}} .filter button{min-width:0;font-size:13px;line-height:1.6;letter-spacing:.1em;padding:11px 8px;border:1px solid var(--tag-line);color:var(--olive);text-align:center;transition:all .5s var(--out);white-space:nowrap} .filter button[aria-pressed="true"]{background:var(--olive);color:#fff;border-color:var(--olive)} /* 触れたとき：押された状態（緑の地に白）より薄く。枠だけ濃い緑に、地はごく淡い緑（2026.10.27） */ @media (hover:hover){.filter button:not([aria-pressed="true"]):hover{background:rgba(44,74,52,.06);border-color:var(--olive)}} /* band */ .band{position:relative;height:clamp(480px,96vh,980px);overflow:hidden;color:#fff;background:#1d2016} .band__img{position:absolute;inset:-14% 0;will-change:transform} .band__img img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;filter:brightness(.82) saturate(.92)} /* 帯の動画（なおさん 2026.10.28「ここ動画でもいいかもね」）：写真と同じ暗さ・色に。位置は動画の中で決めてあるので真ん中 */ .band__img.vbox>video{filter:brightness(.66) saturate(.86);object-position:50% 50%} /* なおさん 2026.10.28「帯に組み込む動画は鬱陶しくなるから暗くするか」：写真（.82）より一段暗く、彩度も少し控えて、動きを背景に沈める */ /* 動画は明るい庭が文字の下に来るカットがあるので、左下だけ少し深く落とす（写真の帯は今のまま） */ .band__img.vbox::after{background:radial-gradient(ellipse 75% 65% at 0% 100%,rgba(10,22,14,.42),rgba(10,22,14,0) 72%),linear-gradient(to top,rgba(10,22,14,.66),rgba(10,22,14,.12) 55%,rgba(10,22,14,0))} .band__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,22,14,.66),rgba(10,22,14,.12) 55%,rgba(10,22,14,0))} .band__txt{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(52px,9vh,100px)} .band__copy{font-family:var(--serif);font-weight:500;font-size:clamp(27px,4.3vw,60px);letter-spacing:.15em;line-height:1.6;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.3)} .band__sub{font-family:var(--serif);font-size:14px;letter-spacing:.2em;opacity:.9;margin:18px 0 0;display:flex;align-items:center;gap:14px} .band__sub::before{content:"";width:28px;height:1px;background:var(--gold-l)} /* ---------- eight garden ---------- */ .eg{display:grid;gap:48px} /* PC：写真の塊と文字の縦の中心をそろえ、欄の上下の余白を少し詰める（見開きの構図） */ @media (min-width:900px){#eightgarden{padding:clamp(96px,10vw,150px) 0}.eg{grid-template-columns:7fr 5fr;gap:clamp(56px,7vw,110px);align-items:center}} .eg__pics{position:relative;padding-bottom:18%} .eg__img{aspect-ratio:3/2} .eg__sub{position:absolute;width:36%;aspect-ratio:2/3;right:-3%;bottom:0;border:8px solid var(--olive-d);box-shadow:0 0 0 1px rgba(217,195,143,.28)} @media (max-width:899px){.eg__sub{right:0}} .eg__logo{font-family:var(--latin);font-style:italic;font-size:clamp(46px,6vw,82px);line-height:1;letter-spacing:.02em;color:var(--gold-l);margin-bottom:18px} .info{margin-top:30px;border-top:1px solid rgba(255,255,255,.2)} .info div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:13px;line-height:1.8} .info dt{color:var(--gold-l);letter-spacing:.16em} .info dd{margin:0} .info--light{border-top-color:var(--line)} .info--light div{border-bottom-color:var(--line)} .info--light dt{color:var(--mute)} /* flow / cta / footer */ .flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)} /* minmax(0,…)：中身の幅で列が広がり、右の余白を越えないように */ @media (min-width:900px){.flow{grid-template-columns:repeat(4,minmax(0,1fr))}} .flow li{padding:30px 20px 32px 0;border-bottom:1px solid var(--line)} @media (min-width:900px){.flow li{padding-right:28px}} .flow__n{font-family:var(--num);font-size:44px;line-height:1;color:var(--gold);letter-spacing:0;margin:0} .flow__t{font-family:var(--serif);font-size:16px;letter-spacing:.14em;margin:14px 0 8px} .flow__d{font-size:13px;color:var(--ink-2);line-height:1.9;margin:0} .cta{position:relative;overflow:hidden;color:#fff;background:var(--olive-d)} .cta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(17,32,23,.9) 0%,rgba(17,32,23,.55) 60%,rgba(17,32,23,.35) 100%);pointer-events:none} .cta__bg{position:absolute;inset:-12% 0} .cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.75)} /* お問い合わせの帯の写真を、ほんのり呼吸させる（なおさん 2026.10.28「こういうバックがほんのり写真がふわふわしててもいいね」「全部動けばいいってもんでもない」）。 動画にはせず、写真が 26秒かけてわずかに寄り・わずかに横へ漂い、また戻る。気づくか気づかないか。視差（.cta__bg の transform）とは別の scale・translate で重ねる */ .cta__bg img{transform-origin:40% 55%;animation:ctabreath 26s ease-in-out infinite alternate} @keyframes ctabreath{from{scale:1;translate:0 0}to{scale:1.045;translate:-1.2% -.6%}} .cta:not(.is-near) .cta__bg img{animation-play-state:paused} /* 画面から遠い間は止めておく（ページの一番下なので、ほとんどの時間は見えないのに 26秒の呼吸がずっと動いていた。2026.10.29）。is-near は main.js が画面の 600px 手前で付ける。止めた所から続くので見た目は同じ */ @media (prefers-reduced-motion:reduce){.cta__bg img{animation:none}} .cta__in{position:relative;z-index:2;padding-top:clamp(100px,13vw,170px);padding-bottom:clamp(100px,13vw,170px);display:grid;gap:44px} @media (min-width:900px){.cta__in{grid-template-columns:1.1fr 1fr;align-items:end}} .cta .eyebrow{color:var(--gold-l)} .cta__h{font-size:clamp(25px,3.4vw,42px);letter-spacing:.16em;line-height:1.7} .cta__tel{display:block;color:var(--gold-l);font-family:var(--num);font-size:clamp(42px,5.6vw,66px);letter-spacing:.04em;line-height:1.1} .cta__tel small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;opacity:.85;margin-top:10px;line-height:1.9} .cta .btn{margin-top:28px} .ft{background:var(--night);color:#c9cdc1;font-size:13px;line-height:1.95;padding:clamp(76px,9vw,120px) 0 36px} .ft .logo{color:#fff;margin-bottom:28px} .ft .logo__mark--w{display:block}.ft .logo__mark--o{display:none} .ft__grid{display:grid;gap:44px} @media (min-width:720px){.ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1200px){.ft__grid{grid-template-columns:1.3fr 1fr 1fr .8fr}} /* 1199px までは2列（4列だとロゴが枠からはみ出す） */ .ft h4{font-family:var(--label);font-size:11px;letter-spacing:.3em;color:var(--gold-l);margin-bottom:14px;font-weight:400} .ft__name{color:#fff;font-family:var(--serif);font-size:15px;letter-spacing:.14em;margin-bottom:6px} .ft a{transition:color .5s var(--ease)} @media (hover:hover){.ft a:hover{color:#fff}} .ft__nav li{margin-bottom:4px} .ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(217,195,143,.16);font-family:var(--label);font-size:11px;letter-spacing:.2em;color:#8b9483} /* ---------- sub page ---------- */ .ph{padding:clamp(150px,18vw,220px) 0 var(--ph-gap)} .ph__en{font-family:var(--latin);font-size:clamp(52px,8vw,112px);line-height:1;letter-spacing:.01em;color:var(--olive);font-weight:400;display:block} .ph__jp{font-family:var(--serif);font-size:15px;letter-spacing:.3em;margin-top:20px;color:var(--olive);display:flex;align-items:center;gap:14px} .ph__jp::before{content:"";width:28px;height:1px;background:var(--gold);flex:none} /* 頭の写真と、頭の直後の欄 */ .ph-photo{margin-bottom:var(--sec-gap)} main>.ph+section,main>.ph-photo+section,main>.ph+.wrap,main>.ph-photo+.wrap{padding-top:0 !important} .svc-chaps>.chap-full:first-child{border-top:0;padding-top:0} .ph__lead{margin-top:36px;max-width:700px} .crumb{font-size:11px;letter-spacing:.14em;color:var(--mute);margin-bottom:34px} .crumb a{transition:color .5s var(--ease)} @media (hover:hover){.crumb a:hover{color:var(--ink)}} .crumb span{margin:0 10px} .ph-img{aspect-ratio:21/9;width:100%} @media (max-width:640px){.ph-img{aspect-ratio:4/3}} /* 目次の札：幅をそろえた格子（PC 4列×2段／携帯・タブレット 2列×4段）。緑の細い枠に金の番号。 幅はいちばん長い「06 ガーデンリノベーション」が1行に収まる値を基準に、番号の位置・字の位置はどの札も同じ */ .toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:36px;max-width:960px} @media (min-width:1000px){.toc{grid-template-columns:repeat(4,minmax(0,1fr))}} .toc a{display:flex;align-items:baseline;gap:12px;min-width:0;font-size:13px;letter-spacing:.12em;padding:11px 16px;border:1px solid var(--tag-line);color:var(--olive);white-space:nowrap;transition:background .5s var(--out),color .5s var(--out),border-color .5s} .toc__n{flex:none;width:1.6em;font-family:var(--num-s);font-size:13px;color:var(--gold);letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums;transition:color .5s} @media (hover:hover){.toc a:hover{background:var(--olive);color:#fff;border-color:var(--olive)}.toc a:hover .toc__n{color:var(--gold-l)}} /* 携帯：2列だと「番号＋名前」が1行に入らないので、どの札も番号を上、名前を下に置く（位置はすべて同じ） */ @media (max-width:599px){.toc a{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;letter-spacing:.05em;padding:10px 12px 11px;line-height:1.7}.toc__n{width:auto;font-size:12px;line-height:1.4}} @media (max-width:369px){.toc a{font-size:12px;letter-spacing:.02em;padding-left:10px;padding-right:10px}} /* 360 で「庭園設計・ガーデニング」が枠の余白に入り込まないように（375 以上は元のまま収まる） */ @media (max-width:339px){.toc a{font-size:11px;letter-spacing:0}} /* 320 でも収まるように */ /* 施工事例の個別ページの頭：番号（英字の見出しの位置）→ 題 → 種類など → リード。左端は他のページと同じ */ .wd-head{display:grid;gap:26px} .wd-no{margin:0;font-family:var(--num);font-size:clamp(64px,8.6vw,120px);line-height:.85;letter-spacing:-.01em;color:var(--gold)} .wd-title{font-size:clamp(22px,2.8vw,32px);letter-spacing:.14em} .wd-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:16px;font-size:12px;letter-spacing:.16em;color:var(--mute)} .wd-intro{font-family:var(--serif);font-size:clamp(16px,1.6vw,19px);line-height:2.3;max-width:760px;margin:0 auto clamp(64px,8vw,120px);color:var(--ink-2)} .wd-rows{display:grid;gap:clamp(64px,9vw,120px)} .wd-row{display:grid;gap:24px;align-items:center} @media (min-width:900px){.wd-row{grid-template-columns:8fr 3fr;gap:clamp(40px,6vw,90px)}.wd-row:nth-child(even){grid-template-columns:3fr 8fr}.wd-row:nth-child(even) .wd-fig{order:2}} .wd-fig .img-mask{aspect-ratio:3/2} .wd-txt{font-size:15px;line-height:2.1;color:var(--ink-2)} .wd-idx{font-family:var(--num-s);font-size:15px;color:var(--gold);letter-spacing:.14em;margin-bottom:12px} .wd-wide{margin:0} .wd-wide .img-mask{aspect-ratio:auto;height:clamp(320px,82vh,900px)} .wd-wide figcaption{max-width:640px;margin:22px 0 0;font-size:14px;line-height:2.1;color:var(--ink-2)} .wd-wide figcaption .wd-idx{display:block} .wd-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:clamp(80px,10vw,140px);padding-top:36px;border-top:1px solid var(--line);font-size:13px;letter-spacing:.14em} .wd-nav a:not(.more),.wd-nav small{transition:color .5s var(--ease)} @media (hover:hover){.wd-nav a:hover{color:var(--olive)}.wd-nav a:hover small{color:var(--gold)}} .wd-nav .next{text-align:right} .wd-nav small{display:block;font-family:var(--label);font-size:10px;letter-spacing:.26em;color:var(--mute)} @media (max-width:767px){.wd-wide .img-mask{height:auto;aspect-ratio:4/5}.band{height:74svh}} .lb{position:fixed;inset:0;z-index:100;background:rgba(12,22,15,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s} .lb.is-open{opacity:1;visibility:visible} .lb img{max-width:92vw;max-height:84vh;object-fit:contain} .lb__cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#c4c2b8;font-family:var(--label);font-size:11px;letter-spacing:.24em} .lb button{position:absolute;color:#fff;font-family:var(--label);font-size:12px;letter-spacing:.24em;padding:16px} .lb__close{top:12px;right:12px} .lb__prev{left:6px;top:50%;transform:translateY(-50%)} .lb__next{right:6px;top:50%;transform:translateY(-50%)} .split{display:grid;gap:44px} @media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:clamp(56px,7vw,110px);align-items:center}.split--rev>:first-child{order:2}} .split.rv{opacity:1;transform:none} .split__img{aspect-ratio:4/3} .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(6px,.8vw,12px)} @media (min-width:900px){.gal{grid-template-columns:repeat(4,1fr)}} .gal .img-mask{aspect-ratio:1/1} /* 手がけること（管理・土木）：ほかのマスと同じく正方形、間隔は .mosaic にそろえる。写真ごとに大事な所が残る位置へ */ .gal--wide{gap:clamp(8px,1vw,16px)} .gal--wide .img-mask{aspect-ratio:1/1} .gal--wide img{object-position:50% 30%} .gal--wide img[src*="kanri1"]{object-position:50% 0} .gal--wide img[src*="doboku1"]{object-position:80% 50%} .gal--wide img[src*="doboku2"]{object-position:75% 50%} .gal--wide img[src*="doboku3"]{object-position:50% 50%} .gal--wide img[src*="doboku4"]{object-position:30% 50%} .tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--line);font-size:14px} .tbl th,.tbl td{padding:20px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;line-height:1.95} .tbl th{width:30%;font-weight:400;color:var(--mute);letter-spacing:.16em;padding-right:20px} @media (min-width:768px){.tbl th{width:220px}} .sec-title{display:grid;gap:10px;margin-bottom:clamp(36px,5vw,60px)} .sec-title .en{font-family:var(--latin);font-size:clamp(32px,4vw,50px);line-height:1;color:var(--olive)} .svc-block{display:grid;gap:30px;padding:clamp(60px,7vw,100px) 0;border-top:1px solid var(--line)} @media (min-width:900px){.svc-block{grid-template-columns:5fr 7fr;gap:clamp(48px,7vw,100px)}} .svc-block__no{font-family:var(--num-s);font-size:17px;color:var(--gold);letter-spacing:.14em} .svc-block__t{font-size:clamp(22px,2.6vw,30px);letter-spacing:.14em;margin:8px 0 6px} .svc-block__en{font-family:var(--label);font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase;margin-bottom:26px} .message{display:grid;gap:36px;padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--line)} @media (min-width:900px){.message{grid-template-columns:280px 1fr;gap:72px}} .message__img{aspect-ratio:300/345;max-width:280px} .message__role{font-size:12px;letter-spacing:.2em;color:var(--mute)} .message__name{font-size:24px;letter-spacing:.24em;margin:6px 0 26px} .message__prof{font-size:13px;color:var(--ink-2);background:var(--paper-2);padding:22px 24px;line-height:2;margin-top:10px} .staff{display:grid;grid-template-columns:repeat(2,1fr);gap:40px clamp(14px,2.6vw,36px)} @media (min-width:900px){.staff{grid-template-columns:repeat(3,1fr)}} @media (min-width:1200px){.staff{grid-template-columns:repeat(4,1fr)}} .staff__img{aspect-ratio:1/1} .staff__role{font-size:11px;letter-spacing:.16em;color:var(--olive);margin-top:16px} .staff__name{font-family:var(--serif);font-size:18px;letter-spacing:.24em;margin:4px 0 10px} .staff__txt{font-size:13px;line-height:1.95;color:var(--ink-2)} .groups{display:grid;gap:20px} @media (min-width:768px){.groups{grid-template-columns:1fr 1fr}} .groups figure{margin:0} .groups .img-mask{aspect-ratio:16/9;--rs:1} .groups .img-mask img{object-position:50% 70%;transform:none} .staff__img img,.message__img img{object-position:50% 0;transform:none} /* 集合写真：まわりの景色を生成して広げた写真。拡大せず、全員の頭まで見せる */ .ph-img--group{--rs:1;aspect-ratio:2400/1030;max-height:none} .ph-img--group img{transform:none;object-position:50% 100%} @media (max-width:640px){.ph-img--group{aspect-ratio:4/3}} .staff__img,.message__img{--rs:1} .groups figcaption{font-size:12px;letter-spacing:.16em;color:var(--mute);margin-top:10px} .menu-grid{display:grid;gap:56px} @media (min-width:900px){.menu-grid{grid-template-columns:1fr 1fr;gap:56px 80px}} .menu-cat{font-family:var(--latin);font-size:30px;color:var(--olive);line-height:1} .menu-row .p{color:var(--gold)} .menu-cat small{display:block;font-family:var(--serif);font-size:13px;color:var(--ink-2);letter-spacing:.2em;margin-top:8px} .menu-list{margin-top:22px;border-top:1px solid var(--line)} .menu-list li{padding:16px 0;border-bottom:1px solid var(--line)} .menu-row{display:flex;justify-content:space-between;gap:16px;font-family:var(--serif);font-size:15px;letter-spacing:.1em} .menu-row .p{font-family:var(--num-s);font-size:18px;white-space:nowrap;letter-spacing:.04em} .menu-row .p small{font-family:var(--sans);font-size:10px;margin-left:2px;letter-spacing:.06em} .menu-sub{font-size:12px;color:var(--ink-2);line-height:1.8;margin-top:4px} .menu-note{font-size:12px;color:var(--mute);margin-top:16px;line-height:1.9} .job{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0} .job:last-child{padding-bottom:0} .job .sec-title{margin-bottom:clamp(24px,3vw,36px)} .form{display:grid;gap:26px;max-width:760px} .field label{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;margin-bottom:8px} .req{font-size:10px;letter-spacing:.1em;color:#fff;background:var(--olive);padding:1px 8px;line-height:1.8} .opt{font-size:10px;letter-spacing:.1em;color:var(--olive);border:1px solid var(--tag-line);padding:0 7px;line-height:1.8} .field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;letter-spacing:.04em;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:0;padding:14px 16px;transition:border-color .5s var(--ease);-webkit-appearance:none;appearance:none} .field textarea{min-height:200px;resize:vertical;line-height:1.9} .field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--olive)} .field .hint{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.8} .check{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.9} .check input{width:18px;height:18px;margin-top:5px;accent-color:var(--olive)} .hp{position:absolute;left:-9999px} .form-msg{padding:22px 24px;background:var(--paper-2);font-size:14px;line-height:2} .tel-box{display:grid;gap:18px;padding:36px clamp(24px,4vw,48px);background:var(--white);border:1px solid var(--line)} @media (min-width:768px){.tel-box{grid-template-columns:1fr 1fr}} .tel-box__k{font-size:12px;letter-spacing:.16em;color:var(--mute)} .tel-box__v{font-family:var(--num);font-size:clamp(32px,4vw,44px);line-height:1.2;letter-spacing:.04em} .tel-box__d{font-size:12px;color:var(--ink-2);line-height:1.8} .map{aspect-ratio:16/10;width:100%;border:0;filter:grayscale(.8) contrast(1.05);background:var(--paper-2)} @media (max-width:640px){.map{aspect-ratio:1/1}} .prose h2{font-size:18px;letter-spacing:.14em;margin:48px 0 16px} .prose p,.prose li{font-size:14px;line-height:2.1;color:var(--ink-2)} .prose ul{list-style:disc;padding-left:1.4em} /* 英語版：欧文は欧文の書体で組む（日本語の書体 Noto Sans JP で欧文を組まない）。日本語の書体は、日本語の字（「日本語」の切り替えなど）が来たときの控え */ html[lang="en"]{--sans:"Jost Ext","Jost","Noto Sans JP",sans-serif;--serif:"Cormorant Garamond","Shippori Mincho",serif} html[lang="en"] body{letter-spacing:.02em;line-height:1.85} html[lang="en"] .h-sec,html[lang="en"] .philo__h,html[lang="en"] .chap__h{letter-spacing:.01em;font-family:var(--latin);font-weight:500;font-size:clamp(30px,4vw,52px);line-height:1.2} html[lang="en"] .lead{font-family:var(--latin);font-size:clamp(18px,1.8vw,21px);line-height:1.75} html[lang="en"] .hero__copy{writing-mode:horizontal-tb;right:auto;left:var(--gut);top:auto;bottom:clamp(160px,24vh,240px);transform:none;height:auto;font-family:var(--latin);font-style:italic;letter-spacing:.01em;font-size:clamp(34px,5vw,66px);line-height:1.15;max-width:min(880px,calc(100% - var(--gut)*2))} html[lang="en"] .wcard__t,html[lang="en"] .flow__t{font-family:var(--latin);font-size:20px;letter-spacing:.02em;font-weight:500} /* ---------- 花のギャラリー（旧サイトの花の線画を受け継ぐ） ---------- */ .fgal-sec{position:relative;overflow:hidden} .fgal-sec .wrap{position:relative;z-index:1} .orn{position:absolute;pointer-events:none;opacity:.26;width:min(760px,90vw);height:auto;will-change:transform} .orn--rt{top:-22%;right:-16%;animation:ornspin 140s linear infinite} .orn--lb{bottom:-30%;left:-20%;width:min(620px,80vw);opacity:.12;animation:ornspin 180s linear infinite reverse} @keyframes ornspin{to{transform:rotate(360deg)}} .fgal-head{display:grid;gap:24px;margin-bottom:clamp(48px,6vw,84px)} @media (min-width:900px){.fgal-head{grid-template-columns:1fr 1fr;align-items:end;gap:72px}} .fgal-head .lead{margin:0;max-width:520px} .fgal{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,22vw,240px);gap:clamp(6px,.8vw,12px);grid-auto-flow:dense} @media (min-width:900px){.fgal{grid-template-columns:repeat(4,1fr)}} .fgal__i{height:100%} .fgal__i--big{grid-column:span 2;grid-row:span 2} .fgal__i--tall{grid-row:span 2} .fgal__i--wide{grid-column:span 2} .fgal__i::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(217,195,143,.18);pointer-events:none} @media (prefers-reduced-motion:reduce){.orn{animation:none}} .sec--dark{position:relative;overflow:hidden} .sec--dark>.wrap{position:relative;z-index:1} #eightgarden .orn--lb{bottom:auto;top:-18%;left:-14%} /* エイトガーデン欄：左上に草花の線画を重ねる */ #eightgarden .orn--bot{top:-6%;left:-6%;width:min(820px,70vw);opacity:.3;animation:botsway 14s ease-in-out infinite alternate;transform-origin:0 0} #eightgarden .orn--lb{top:-26%;left:-18%;width:min(560px,60vw);opacity:.14} @keyframes botsway{from{transform:rotate(-1.2deg) scale(1)}to{transform:rotate(1.2deg) scale(1.02)}} @media (max-width:899px){#eightgarden .orn--bot{width:110vw;top:-4%;opacity:.22}} @media (prefers-reduced-motion:reduce){#eightgarden .orn--bot{animation:none}} /* フッターのロゴは金 */ .ft .logo{color:var(--gold-l)} .ft .logo__txt{border-left-color:rgba(217,195,143,.4)} .ft .logo__en{opacity:.8} .ft .logo__mark--w{display:none}.ft .logo__mark--g{display:block} .logo__mark--g{display:none} /* アクセスの線画地図 */ .mapart{margin:0;border:1px solid rgba(173,138,76,.35);background:var(--paper)} .mapart img{width:100%;height:auto} .mapnote{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:14px;color:var(--ink-2);margin:0} .mapnote__n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-family:var(--num-s);font-size:16px} /* 金の線画（Higgsfield で生成し、金の線にしたもの）。ここぞという2か所だけ */ /* 出方はほかと同じ1種類：少し透けた状態から、下から少し上がって止まる（0.6s） */ .lineart{position:absolute;pointer-events:none;height:auto;z-index:0;opacity:calc(var(--lo,.55)*var(--op0));translate:0 var(--mv-txt);transition:opacity var(--t-in) var(--out),translate var(--t-in) var(--out)} .lineart.is-in,.lineart--static{opacity:var(--lo,.55);translate:none} /* エイトガーデン：線画を写真の左上と右下に分けて額縁のように置く（文字には重ねない）。 右下＝img（上下左右を反転し、小さい店内写真の後ろから下へこぼれる）、左上＝同じ絵を ::before で。写真・文字の下（.wrap は z-index:1） */ #eightgarden{--cw:min(100% - var(--gut)*2,var(--wrap));--lw:min(720px,50vw)} .lineart--eg{top:auto;bottom:-1%;width:var(--lw);left:calc((100% - var(--cw))/2 + (var(--cw) - clamp(56px,7vw,110px))*7/12 - var(--lw) + clamp(56px,7vw,110px)*.5);transform:scale(-1,-1);transform-origin:50% 50%;--lo:.3} #eightgarden::before{content:"";position:absolute;z-index:0;pointer-events:none;top:-2%;left:-1vw;width:min(760px,52vw);aspect-ratio:2200/933;background:url(../../img/lineart/flowers-a.webp) no-repeat 0 0/contain;opacity:calc(.26*var(--op0));translate:0 var(--mv-txt);transition:opacity var(--t-in) var(--out),translate var(--t-in) var(--out)} #eightgarden:has(.lineart--eg.is-in)::before{opacity:.26;translate:none} .lineart--gal{top:0;right:0;width:min(600px,44vw);--lo:.34} /* 携帯：花のギャラリーは上の余白（96px）に収まる大きさ、エイトガーデンはボタンより下の右隅に小さく */ @media (max-width:899px){.lineart--eg{left:auto;right:0;bottom:0;width:58vw;--lo:.2}.lineart--gal{width:62vw;--lo:.22} #eightgarden::before{top:0;left:0;width:58vw;opacity:calc(.18*var(--op0))}#eightgarden:has(.lineart--eg.is-in)::before{opacity:.18}} @media (prefers-reduced-motion:reduce){.lineart{transition:none;opacity:var(--lo,.55);translate:none}#eightgarden::before{transition:none;opacity:.26;translate:none}} /* 英語の見出し：単語の途中で折り返さない。地図の出典 */ .hero__copy .wd{white-space:nowrap} .mapart__cap{padding:6px 10px;font-size:11px;line-height:1.5;color:var(--mute,#8a8478);text-align:right;opacity:.85}.mapart__cap a{color:inherit;text-decoration:underline} .mapart picture{display:block} /* 地図（assets/map/ の自前の地図）：金の細い枠は地図の面だけに。下の Google マップへのリンクは枠の外 */ .mapart.ddmap{border:0;background:none;--ddmap-ink:var(--ink-2);--ddmap-mute:var(--mute);--ddmap-line:var(--line)} .mapart.ddmap .ddmap__frame{border:1px solid rgba(173,138,76,.35)} .rv .mapart.ddmap picture{transform:none} /* 地図の大きさ：PC では画面の高さの7割ほどまで（正方形の地図＋出典の行）。横に余れば真ん中に */ @media (min-width:641px){.mapart{max-width:max(340px,calc(70vh - 34px));margin-inline:auto}} /* アクセスのページ：地図（左）と2か所の欄（右）。地図は下へ送っても画面の中に止まる。携帯は縦に1列 */ .access{padding:0 0 clamp(96px,12vw,170px)} .access__grid{display:grid;gap:clamp(56px,9vw,80px)} .access__place+.access__place{margin-top:clamp(72px,14vw,120px)} .access__place .sec-title{margin-bottom:clamp(20px,3vw,32px)} .access__place .info{margin-top:0} html[lang] main .access .info dd{text-align:start} /* 住所は字の間を広げずに折り返す */ .access__place .mapnote{margin-top:24px;font-size:14px;line-height:1.8} @media (min-width:900px){ .access__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(48px,6.5vw,104px);align-items:start} .access__map{position:sticky;top:112px} .access__map .mapart{margin-inline:0} .access__list{padding-top:0} .access__list>.access__place:first-child .sec-title .en{margin-top:-.18em} /* 英字の見出しの字の頭を、地図の上の端に */ } /* トップの動画（写真の上に重ね、再生が始まってから溶かす） */ .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity} .hero__video.is-playing{opacity:1} @media (prefers-reduced-motion:reduce){.hero__video{display:none}} /* ========================================================== 下層ページの動き（2026.10.25）。現れる出だしだけ、ほんの少し動く。出たあとは止まっている ========================================================== */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ページの頭：見出し（英字＋日本語）は1つのかたまりで。リード・目次の札は少しだけ遅れて */ .ph .ph__lead.rv{transition-delay:var(--st)} .ph .toc.rv{transition-delay:calc(var(--st)*2)} /* 句ごとに折り返す見出し（採用・会社・お問い合わせ） */ .lines--ib .ln{display:inline-block;vertical-align:top} /* 人の写真（代表・スタッフ・集合）：現れるときだけ、ごく少し引いて落ち着く。落ち着いたあとは拡大しない */ .staff__img img,.message__img img{transform:scale(var(--rs));transform-origin:50% 0;transition:--rs var(--t-in) var(--out)} .groups .img-mask img{transform:scale(var(--rs));transition:--rs var(--t-in) var(--out)} .staff>.rv:not(.is-in) .staff__img,.message .rv:not(.is-in) .message__img,.groups .rv:not(.is-in) .img-mask{--rs:1.03} /* （採用の集合写真の特別な動きは 2026.10.25 s でやめ、ほかの写真と同じにした） */ /* 地図：枠の中で少し引いて落ち着く */ .rv .mapart{overflow:hidden} .rv .mapart picture{transform:scale(1.02);transition:transform var(--t-in) var(--out)} .rv.is-in .mapart picture{transform:none} @media (prefers-reduced-motion:reduce){ .rv .mapart picture{opacity:1;transform:none;transition:none} .img-mask img{transition:none} } /* ---------- 本文：左揃え、字間は一定（字の間を開けてそろえる組み方はしない。2026.10.26）。改行は文節の切れ目だけ ---------- */ /* ---------- 電話番号：Jost の細字（Avenir に近いゴシック）。数字の幅をそろえる ---------- */ .cta__tel,.tel-box__v,.drawer__tel{font-family:var(--tel);font-weight:300;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.03em} .cta__tel small{font-weight:400} /* ---------- カード：カードごと1つのかたまりで現れる（中の順送りはしない）。写真は中でわずかに引いて落ち着く ---------- */ .wcard.rv:not(.is-in) .img-mask,.svc__item.rv:not(.is-in) .img-mask{--rs:1.09} /* ---------- 本文や表の中の電話番号も、ゴシック（Jost）で ---------- */ .nb.tel{font-family:var(--tel);font-weight:400;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.04em} /* ---------- 流れ：番号と見出しを1行に（下の線をそろえて並べる） ---------- */ .flow li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;align-content:start} /* 隣の項目の高さまで伸びても、行は上に詰める（説明の頭を同じ高さに） */ .flow__n{font-size:38px} .flow__t{margin:0} .flow__d{grid-column:1/-1;margin-top:14px} /* ---------- お問い合わせ：頭の下は「正方形の写真｜電話の2か所」。白い箱はやめ、細い線で区切る ---------- */ .ct-top{padding:0 0 clamp(96px,12vw,180px)} .ct-top__grid{display:grid;gap:clamp(48px,7vw,64px)} .ct-img{aspect-ratio:1/1} .ct-img img{object-position:62% 50%} .tel-box{display:block;padding:0;background:none;border:0;border-bottom:1px solid var(--line)} .tel-box>div{position:relative;padding:34px 0 36px;border-top:1px solid var(--line)} .tel-box>div::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--gold)} .tel-box__k{font-size:13px;letter-spacing:.18em;color:var(--gold)} .tel-box__v{display:inline-block;margin-top:12px;color:var(--gold);font-size:clamp(34px,3.6vw,46px);transition:color .5s var(--out)} @media (hover:hover){.tel-box__v:hover{color:var(--olive)}} .tel-box__d{margin-top:10px;font-size:13px;line-height:1.95} @media (min-width:900px){ .ct-top__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(56px,7vw,110px);align-items:start} .ct-top__tel .sec-title .en{margin-top:-.18em} /* 英字の見出しの字の頭を、写真の上の端に */ } /* フォーム：PCは左に見出し（送っても止まる）、右に欄 */ .ct-form__note{font-size:13px;line-height:2;color:var(--ink-2);margin-top:-12px} @media (min-width:960px){ .ct-form__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);column-gap:clamp(56px,7vw,120px);align-items:start} .ct-form__head{position:sticky;top:132px} } .ct-form .form{max-width:720px} @media (min-width:900px) and (max-width:1199px){.ct-img{aspect-ratio:4/5}} @media (max-width:959px){.ct-form__head{margin-bottom:clamp(40px,8vw,56px)}} /* ========================================================== r（2026.10.25）：決まりの仕上げ ========================================================== */ /* 押して大きくできる写真（施工の写真だけ）にだけ、虫めがねの矢印 */ [data-zoom]{cursor:zoom-in} /* 手がけること 07・08：写真4枚を正方形で1列（携帯は2列×2段）。写真が小さめなので大きなマスは作らない */ @media (min-width:900px){.mosaic--row{grid-template-columns:repeat(4,1fr)}} .mosaic--row img{object-position:50% 30%} .mosaic--row img[src*="kanri1"]{object-position:50% 0} .mosaic--row img[src*="doboku1"]{object-position:80% 50%} .mosaic--row img[src*="doboku2"]{object-position:75% 50%} .mosaic--row img[src*="doboku3"]{object-position:50% 50%} .mosaic--row img[src*="doboku4"]{object-position:30% 50%} /* 大きな電話（採用の応募など）：他の電話と同じく Jost の大きな金。触れると濃い緑へ（指で触る端末では変えない） */ .tel-link{display:inline-block;margin-top:8px;font-family:var(--tel);font-weight:300;font-size:clamp(34px,3.6vw,46px);line-height:1.2;letter-spacing:.03em;font-variant-numeric:lining-nums tabular-nums;color:var(--gold);transition:color .5s var(--out)} @media (hover:hover){.tel-link:hover{color:var(--olive)}} /* 施工事例の「一覧へ」：前後の事例の間に、下線＋→で */ .wd-nav>.more{justify-self:center} /* 会社案内・携帯：スタッフ紹介は1列。写真を左に小さく、役職と名前を右に、文は下に */ @media (max-width:599px){ .staff{grid-template-columns:1fr;gap:44px} .staff>div{display:grid;grid-template-columns:112px 1fr;column-gap:20px;align-items:end} .staff>div>.staff__img{grid-row:1/3} .staff>div>.staff__role{grid-column:2;margin-top:0} .staff>div>.staff__role{margin-bottom:2px} .staff>div>.staff__name{grid-column:2;margin-bottom:0;align-self:start} .staff>div>.staff__txt{grid-column:1/-1;margin-top:18px;font-size:14px} } /* ---------- 採用情報の頭の写真：5枚をゆっくり溶かして切り替える（1枚 5.5秒、溶ける時間 1.8秒）。拡大などの動きはなし ---------- */ .ph-dis img{position:absolute;inset:0;opacity:0;transition:opacity 1.8s cubic-bezier(.45,0,.55,1),--rs var(--t-in) var(--out)} .ph-dis img.is-on{opacity:1} .ph-dis img.is-top{z-index:1} @media (prefers-reduced-motion:reduce){.ph-dis img{transition:none}} /* ========================================================== u（2026.10.25）：札の幅と色、採用情報の組み、英語版の 07・08 と日本庭園の写真 ========================================================== */ /* 写真の大事な所が枠で見切れないように（2J2A0403 は鯉が左下） */ .img-mask img[src*="2J2A0403"]{object-position:28% 78%} .img-mask img[src*="IMG_5473"]{object-position:50% 70%} /* 左右2段（見出し｜文）。左右の1行目の字の頭をそろえる（負の余白で行の上の空きを打ち消す。値は書体で測ったもの） */ .rsplit{display:grid;gap:28px} @media (min-width:900px){.rsplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(56px,7vw,110px);align-items:start}} /* 字の頭までの空き（行の上の端から、1字目の上の端まで。字の大きさに対する割合。2026.10.25 にこのページの字で測った値）： 大見出し .h-sec（行の高さ 1.66、漢字）0.42em／リード .lead（行の高さ 2.3）漢字 0.74em・「お」0.88em／ 英字の見出し .sec-title .en（Cormorant、行の高さ 1）0.18em／説明 .rsplit__d（行の高さ 2.1）0.64em。これを負の余白で打ち消す */ @media (min-width:900px){ .rsplit>.h-sec{margin-top:-.42em} .rsplit>.lead{margin-top:var(--al-lead,-.74em)} .rsplit .sec-title .en{margin-top:-.18em} .rsplit .rsplit__d:first-child,.rsplit>.rsplit__d{margin-top:-.64em} } .rintro{--al-lead:-.877em} .cphilo{--al-lead:-.80em} /* 会社案内：リードの1字目「自」は上の端が少し低い */ .rsplit>.lead>p:last-child,.rsplit__d:last-child{margin-bottom:0} .rsplit--head{margin-bottom:clamp(48px,6vw,80px)} .rsplit--head .sec-title{margin-bottom:0} .rsplit__d{font-size:15px;line-height:2.1;color:var(--ink-2);margin:0} .ulink{text-decoration:underline;text-underline-offset:4px} .ulink{transition:color .5s var(--ease)} @media (hover:hover){.ulink:hover{color:var(--olive)}} .rintro{padding-bottom:clamp(96px,12vw,170px)} /* 職人が手がける庭：6つを 3列×2段（タブレット 2列×3段、携帯 1列）。上に細い線と金の短い線、金の番号 */ /* 職人の仕事の小さな動画（文の下。2026.10.28 なおさん「作業してるのは小さく画像のように」） */ .rwork__v{aspect-ratio:16/9;margin-top:clamp(28px,3vw,40px)} .rwork{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)} @media (min-width:640px){.rwork{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.rwork{grid-template-columns:repeat(3,minmax(0,1fr))}} .rwork__i{position:relative;padding:34px clamp(20px,2.6vw,40px) 40px 0;border-bottom:1px solid var(--line)} .rwork__i::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--gold)} .rwork__n{font-family:var(--num-s);font-size:15px;color:var(--gold);letter-spacing:.1em;margin:0 0 14px;font-variant-numeric:lining-nums tabular-nums} .rwork__t{font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);letter-spacing:.14em;color:var(--olive);margin:0 0 12px} .rwork__d{font-size:14px;line-height:2.05;color:var(--ink-2);margin:0} /* 働く人の声：4人を 4列（タブレット 2列、携帯 1列）。声はしっぽり明朝、名前と役目はその下 */ .rvoice{display:grid;grid-template-columns:1fr;gap:clamp(40px,4vw,56px) clamp(28px,3.4vw,56px)} @media (min-width:640px){.rvoice{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.rvoice{grid-template-columns:repeat(4,minmax(0,1fr))}} .rvoice__i{margin:0;padding-top:30px;border-top:1px solid var(--line);position:relative;display:flex;flex-direction:column} .rvoice__i::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--gold)} .rvoice__q{margin:0 0 26px;font-family:var(--serif);font-weight:500;font-size:15px;line-height:2.15;letter-spacing:.08em;color:var(--ink);text-indent:-.5em;flex:1} .rvoice__i figcaption{display:grid;gap:2px} .rvoice__r{font-size:11px;letter-spacing:.16em;color:var(--olive)} .rvoice__n{font-family:var(--serif);font-size:17px;letter-spacing:.24em} /* 募集の2つ：2列（携帯は縦）。応募について：見出し｜文と電話 の左右2段 */ .rjobs{display:grid;gap:0} @media (min-width:900px){.rjobs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(56px,7vw,110px)}} .rjobs .job{padding-top:0;border-top:0} @media (max-width:899px){.rjobs .job+.job{padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--line)}} .rjobs .job .tbl th{width:8em} .rapply{border-top:1px solid var(--line);padding-top:clamp(56px,7vw,90px);margin-top:clamp(56px,7vw,90px)} .rapply .sec-title{margin-bottom:0} .rapply__tel{display:grid;gap:24px;margin-top:34px} @media (min-width:640px){.rapply__tel{grid-template-columns:repeat(2,minmax(0,1fr))}} .rapply__k{font-size:12px;letter-spacing:.16em;color:var(--mute);margin:0} .rapply .tel-link{font-size:clamp(28px,2.8vw,36px);margin-top:4px} /* 英語版：07・08 は 01〜06 の下に2列で（番号＋英字の札、その下に文） */ .en-more{display:grid;gap:56px;margin-top:clamp(110px,14vw,200px);padding-top:clamp(56px,6vw,80px);border-top:1px solid var(--line)} @media (min-width:900px){.en-more{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(56px,7vw,110px)}} .en-more__label{display:flex;align-items:center;margin:0 0 22px;line-height:1} .en-more__label .chap__en{margin-bottom:0;line-height:1.6} .en-more__d{font-family:var(--latin);font-size:clamp(18px,1.6vw,20px);line-height:1.7;color:var(--ink-2);margin:0} /* 英語版：本格的な日本庭園の写真4枚（PC 4列×1段、携帯 2列×2段。正方形） */ .jgal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,16px);margin-top:clamp(72px,9vw,130px)} @media (min-width:900px){.jgal{grid-template-columns:repeat(4,minmax(0,1fr))}} .jgal .img-mask{aspect-ratio:1/1} /* 左右2段で、片側が写真・地図・表のもの：上ぞろえにし、文の側の1字目の頭を、写真の上の端にそろえる */ @media (min-width:900px){ .split--top{align-items:start} .split--top .sec-title .en,.split--top>div>.eyebrow:first-child{margin-top:-.18em} .message__role{margin-top:-.62em} .split--top>dl.info{margin-top:-16px} /* 表の1行目の字の頭（上の線から 16px 下）を、左の1字目にそろえる */ } /* 採用の頭の集合写真：携帯（4:3）では左右がぎりぎりなので拡大しない（端の人が切れないように） */ @media (max-width:640px){.ph-dis img[src*="recruit_team"]{transform:none}} /* 採用の頭：PC では人の頭が切れないよう、上寄りに（src は WebP・srcset のときも元の JPEG のアドレスなので、名前で選べる。後から読む写真は data-src） */ @media (min-width:641px){.ph-dis img:is([src*="0Z8A0115"],[data-src*="0Z8A0115"],[src*="IMG_4337"],[data-src*="IMG_4337"]){object-position:50% 12%}} /* 手がけること：右の一言の1字目がかな（シ・つ）の章は、字の上の端が漢字より低いので、そのぶん上げる（04・07。測った値） */ @media (min-width:960px){#courtyard .chap-full__sub{margin-top:-.82em}#maintenance .chap-full__sub{margin-top:-.89em}} /* ---------- 英語のお問い合わせ・個人情報（2026.10.25 リツコ） ---------- */ .ph__jp--en{font-family:var(--latin);font-size:19px;letter-spacing:.06em} .en-tel{position:relative;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)} .en-tel::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--gold)} .en-tel .tel-box__v{margin-top:8px;font-size:clamp(28px,2.8vw,36px)} main>.ph+.ct-form--en{padding-top:clamp(64px,8vw,110px) !important} /* 頭のすぐ下が白い欄なので、間をあける */ /* ========================================================== v（2026.10.26 カヲル）：下層ページの新しい型。正本＝デザインのキャンバス（Main.dc.html 会社案内・Menu.dc.html メニュー） body.pg（トップ以外のページ）の中だけに効かせる。トップ（index.html）は変えない 本文　：Noto Sans JP 15px、行の高さ 2.0、字間 .04em で一定、palt、#3d4740。左揃え。1行は最大 34〜36 字（max-width 34〜36em） 字の段：英字の大見出し（頭）Newsreader 300 clamp(56,7.3vw,104) 行の高さ .9 ／章 Newsreader 300 clamp(35,3.48vw,49)（2026.10.28 Cormorant の 0.87 倍） 　　　　和文の見出し＝しっぽり明朝 500・字間 .08em ／詩的な文・リード＝明朝 16.5〜18px・行の高さ 2.1〜2.2 ／説明＝ゴシック ／小さな札 12px #6d756c 頭　　：.pgh 左右2段（5fr:7fr）。左右の最後の行の字の並ぶ線をそろえる。下に 21:9 の写真（携帯 4:3） 章　　：.pgs。背景は a #f6f5ef → b #fbfaf6 → a → c #eeede4。上下の余白 clamp(96,11vw,152) 表　　：.spec（dl）。見出し 3fr 13px 濃い緑、値 9fr 墨。上の端だけ濃い緑の 1px、行の間 #e3e4da の 1px、行の上下 20px 揃え　：左右2段で、左右とも文字で始まる所は、行の上の空きを打ち消して（.g2--ct）字の頭を欄の上の端にそろえる 動き　：ほかと同じ1種類（0.3 から 16px 上がる、0.6秒）。横は左から 0.06秒ずつ。表の行・メニューの品は上から 0.03秒ずつ、6行で打ち止め（.rv-q） ========================================================== */ :root{--txt:#3d4740;--lab:#6d756c;--line-2:#e3e4da;--bg-a:#f6f5ef;--bg-b:#fbfaf6;--bg-c:#eeede4; --g2-gap:clamp(40px,7vw,112px);--sec-pad:clamp(96px,11vw,152px); /* 字の頭までの空き（行の上の端から字の上の端まで、字の大きさに対する割合）。しっぽり明朝の漢字 .12em、Noto Sans JP .1em、Cormorant の大文字 .2em（2026.10.26 測った値） Newsreader の大文字 .02em（2026.10.28。上下の幅の合計がちょうど 1.0 で、行の高さ 1 なら字の頭は行の上の端のすぐ下）。--k-cor は英語ページの Cormorant の文の見出し（.catch・.prow__h）に残す */ --k-min:.12em;--k-sans:.1em;--k-cor:.2em;--k-disp:.02em} .pg{letter-spacing:.04em} .pg main{font-size:15px;line-height:2;letter-spacing:.04em;color:var(--txt);background:var(--bg-a)} :where(.pg main) p{margin:0} /* 重みなし：部品の余白（class）が勝つ */ :where(.pg main) :is(h1,h2,h3,h4){line-height:2} /* ---- 頭 ---- */ .pgh{padding:calc(84px + clamp(72px,10vw,136px)) 0 0;background:var(--bg-a)} .pgh .crumb{margin:0 0 clamp(40px,5vw,64px);font-size:12px;line-height:2;letter-spacing:.12em;color:var(--mute)} .pgh .crumb span{margin:0 1em} @media (hover:hover){.pgh .crumb a:hover{color:var(--olive)}} .pgh__g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--g2-gap);row-gap:28px;align-items:end} @supports (align-items:last baseline){.pgh__g{align-items:last baseline}} .pgh__h{margin:0;font-weight:400} .pgh__en{display:block;font-family:var(--disp);font-weight:300;font-size:clamp(56px,7.3vw,104px);line-height:.9;letter-spacing:-.005em;font-feature-settings:"kern" 1,"liga" 1;color:var(--olive)} .pgh__jp{display:block;margin:22px 0 0;font-family:var(--serif);font-weight:500;font-size:14px;line-height:2;letter-spacing:.24em;color:var(--olive)} .pgh__jp::before{content:"";display:inline-block;width:32px;height:1px;background:var(--gold);margin-right:14px;vertical-align:.32em} .pgh__jp--en{font-family:var(--label);font-size:11px;letter-spacing:.3em;text-transform:uppercase} .pgh__lead{max-width:30em;font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.3vw,18px);line-height:2.1;letter-spacing:.06em;color:var(--ink)} /* 施工事例の各ページ：左に番号（金の大きな数字）、右に題（h1）とリード */ .pgh__no{font-family:var(--num);font-size:clamp(64px,8.4vw,120px);line-height:.9;letter-spacing:-.01em;color:var(--gold);font-variant-numeric:lining-nums} .pgh__title{margin:0 0 18px;max-width:20em;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.75 !important;letter-spacing:.08em;color:var(--ink)} .pgh__pic{margin-top:clamp(48px,6vw,80px);aspect-ratio:21/9;width:100%} .pgh .toc{margin-top:clamp(48px,6vw,80px);max-width:none} @media (max-width:767px){.pgh__g{grid-template-columns:minmax(0,1fr);align-items:start}.pgh__pic{aspect-ratio:4/3}} /* ---- 章 ---- */ .pgs{padding:var(--sec-pad) 0;background:var(--bg-a)} .pgs--b{background:var(--bg-b)}.pgs--c{background:var(--bg-c)} .pgh+.pgs{padding-top:clamp(96px,12vw,168px)} /* 文字だけの頭：リードの最後の行の下にも、写真の頭でリード→写真に置く空き（48〜80px）をとってから次の欄に替える。 これがないと、次の欄の地の色の境目がリードの字のすぐ下に来て詰まって見える（en/contact 1440）。章の頭までは、その下にいつもの 96〜168px */ .pgh--txt{padding-bottom:clamp(48px,6vw,80px)} /* ---- 頭（写真に文字を載せる型 .ovh）2026.10.26 なおさんの決定「PCは中間案、携帯は載せる案」---- 正本＝カヲルの見本（03_中間案＝PC、02_載せる案＝携帯、assets/css/overlay.css）。数値はそのまま引き継ぐ ・写真は画面の端から端まで。高さ PC 72svh（520〜760px）、携帯 72svh（480〜620px）。ヘッダーは写真に重なる白い字で始まる（build.py の write） ・文字は .wrap の左端にそろえ、写真の左下に白い字で。PC＝英字の大見出し＋金の線＋和文の小見出し、携帯＝それにリードも ・幕は1色（濃い緑がかった黒）から透明への線形。写真の下側に控えめに、上は細くヘッダーの字のため。全体は暗くしない ・写真が2枚以上なら溶かして切り替える（main.js の .ph-dis）。文字のかたまりは写真の外にあるので、切り替えで動かない ・動き：写真は暗い地から 0.3→1（1.6秒）、中の写真が 1.06 倍から 7秒かけて等倍へ。下へ送ると写真が遅れて動く（下の「頭の写真の動き」） 　　　　文字は1つのかたまりで 0.3→1、16px 上がって止まる。0.12s 遅れ。出そろうまで 0.72s。繰り返さない */ .ovh{position:relative;height:clamp(520px,72svh,760px);background:#1d2016;color:#fff;overflow:hidden} .ovh__pic{position:absolute;inset:0;background:#1d2016} .ovh__pic.img-mask.rv{transform:none} /* 頭の写真の動き（2026.10.26 なおさん「表示されてガクッと縮小される動きが気になる。パララックスが感じられない。ふんわりゆったり」） ・現れるとき：暗い地から 1.6秒かけてふわっと明るくなり、写真は 1.06 倍から 7秒かけて、ゆっくり等倍へ寄っていく（急に縮まない） ・切り替わるたびに、次の写真も 1.06 倍からゆっくり等倍へ ・下へ送ると、写真は文字より遅れて動く（送った量の 18%。main.js が --hy を入れる）。写真は上に 18% はみ出して置き、上下に隙間を出さない */ .ovh__pic{--hy:0px} .ovh__pic.img-mask.rv{transition:opacity 1.6s cubic-bezier(.25,.1,.25,1)} .ovh__pic img{position:absolute;left:0;top:-24%;bottom:auto;width:100%;height:124%;transform:none;translate:0 var(--hy);scale:1.06; transition:opacity 1.8s cubic-bezier(.45,0,.55,1),scale 7s cubic-bezier(.25,.1,.25,1)} .ovh__pic.is-in:not(.ph-dis) img{scale:1} /* 写真が2枚以上の頭（.ph-dis）：寄りは「いま出ている間じゅう同じ速さ」で止まらずに続ける（2026.10.27 なおさん「次の画像に行くときに前の画像がいっしゅん止まる」）。 以前は 7秒の ease-out で、切り替わる 5.5秒のころには動きがほぼ止まっており、溶けている間は止まって見え、入ってくる写真だけが速く動き出していた。 いまは 1.06→1 を直線で 7.3秒（＝切り替えの間隔 5.5秒＋溶ける 1.8秒。消えて見えなくなるまで動き続ける）。外すのは溶け終わって 0.1秒後（main.js の 1900ms）なので、止まる所も戻る所も見えない。 画面の外・タブが裏のときは .is-hold で止め、戻ったら続きから（main.js） */ .ovh__pic.ph-dis img{transition:opacity 1.8s cubic-bezier(.45,0,.55,1)} .ovh__pic.is-in.ph-dis img.is-on{scale:1;animation:ovhz 7.3s linear both} .ovh__pic.is-in.ph-dis.is-hold img.is-on{animation-play-state:paused} @keyframes ovhz{from{scale:1.06}to{scale:1}} /* 写真の中で見せたい位置を PC と携帯で分けるとき（build.py の HEAD_PICS に「PC|携帯」）。例：エイトガーデンの外観は PC 横いっぱい、携帯は左の切妻と看板が入る 21% */ .ovh__pic img[style*="--op"]{object-position:var(--op,50% 50%)} @media (max-width:767px){.ovh__pic img[style*="--op-m"]{object-position:var(--op-m)}} /* 会社案内の頭の3枚目（トラックの扉 head_company_5）：携帯では扉の社名「八木が谷造園 ＆エイトガーデン」を見せる（2026.10.27 なおさん「ここに八木ヶ谷造園やエイトガーデンの文字が見えるといい」）。 そのままだと「＆エイトガーデン」が見出し Company に重なる。上端を留めて 1.12 倍にし、写真の高さの 12% ぶん上げて、2行とも見出しの上に入れる。 1.12 倍は社名の2行が枠の幅に収まる上限、12% は頭の写真が 1.06→1 に縮んでも枠の下が空かない上限。横は HEAD_PICS の「|64.5% 50%」で社名を枠の中央に。PC は変えない */ @media (max-width:767px){.ovh__pic img:is([srcset*="/head_company_5_"],[data-srcset*="/head_company_5_"]){transform:translateY(-12%) scale(1.12);transform-origin:50% 0}} .ovh__veil{position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(180deg,rgba(12,24,16,.58) 0,rgba(12,24,16,.38) 84px,rgba(12,24,16,.11) 150px,rgba(12,24,16,0) 210px), linear-gradient(0deg,rgba(12,24,16,.62) 0%,rgba(12,24,16,.38) 28%,rgba(12,24,16,.09) 50%,rgba(12,24,16,0) 62%)} .ovh__in{position:absolute;z-index:3;left:0;right:0;bottom:clamp(48px,6vw,80px)} .ovh__txt{max-width:640px;visibility:hidden;animation:ovh-vis 0s 5s forwards} /* 字体がそろうまで隠す（main.js が html に is-fonts。最大 2.5秒）。main.js が途中で止まったときも 5秒で出す。JS なしは