/* =========================================================
   ubaku.jp デザイン設定
   色・フォント・余白はここの変数を変えると全体に反映される
   （下のほうで色を直接書かないこと）
   ========================================================= */
:root{
  /* --- 色 --- */
  --cream:#FFFFFF;      /* 白（基本の地色。2026-10-10 生成り→白） */
  --kraft:#F4F4F2;      /* 淡いグレー（What We Do・Numbers の面） */
  --green:#29463D;      /* ブランドの緑（マスター）：fumotobito のロゴと同じ深い森の緑（2026-10-16 決定）
                           履歴：2026-10-10〜10-16 は錆鉄御納戸 #405B55、それ以前は深緑 */
  --ink:#2B241C;        /* 見出しの文字色 */
  --muted:#4B4236;      /* 本文の文字色 */
  --sub:#6B6457;        /* ラベルの文字色 */
  --line:#B8B0A0;       /* 細い罫線 */
  --on-green:#F1EBDF;   /* 深緑の上の文字 */
  --on-green-sub:#D9D3C6;
  --accent-sand:#D6C3A0;
  --ph1:#C9B79C; --ph2:#B7A184; --ph3:#D8C9B2; /* 写真プレースホルダーの色 */
  --ph-text:#3A3026;         /* プレースホルダーの文字 */

  /* --- 罫線（長い線＝見出しの下は濃く、短い線＝各項目の上は薄く） --- */
  --rule-long:#B9C2BE;                /* 見出しの下の長い線（薄いグレー） */
  --rule-short:#E4E7E5;               /* 項目の上の短い線（さらに薄く、常に見せる） */
  --rule-long-on-green:#AAB1A8;       /* 深い色（Contact）の上の長い線 */
  --rule-short-on-green:#60756E;      /* 深い色（Contact）の上の短い線 */
  --rule-hover-on-green:var(--accent-sand); /* マウスを乗せたときの線 */

  /* --- Concept（3つの円）の色 --- */
  --c-top:#D2BE9A;      /* 上：ひと（砂色・いちばん濃い） */
  --c-br:#CBD6D2;       /* 右下：場所（くすんだ緑） */
  --c-bl:#E6DBC8;       /* 左下：土地（明るいクラフト色） */
  --c-label:#4A4238;    /* 円の中の文字 */

  /* --- Journal（noteが流れるギャラリー） --- */
  --card-w:360px;       /* 記事カードの幅 */
  --card-gap:32px;      /* カードのあいだ */
  --flow-speed:9s;      /* カード1枚分が流れる時間（小さいほど速い） */

  /* --- オープニング（大雪山の稜線）の色 --- */
  --op-line:#7C8A92;    /* 稜線の線 */
  --op-mist:#8E9893;    /* 数字・座標などの小さな文字 */
  --op-sky1:#D5DCDF;    /* 稜線の下の色（上） */
  --op-sky2:#E6EAE8;    /* 稜線の下の色（中） */

  /* --- アクセント（見出しの大事な言葉・ラベル・日付の色） --- */
  --accent:var(--green);
  --accent-hl:#23A0DA;               /* 【強調の文字の色】知る・泊まる・過ごす・住む。／つないでいく。など（東川町の青。Contact は深い面なので対象外） */
  --f-biz:'Jost', sans-serif;        /* 【事業名の英字】Ubaku Villa・Media・Design・Consulting と Team の名前 */
  --f-biz-weight:200;
  --hero-ratio:2.8 / 1;              /* 【ヒーロー写真】横と縦の比率（素材の写真は横2.7〜2.8：縦1。2026-10-10 に 2.4 から変更） */
  --hero-bleed:40px;
  --logo-color:#2B241C;              /* 【ロゴ】UBAKŪ の文字の色（黒） */
  --logo-bar:var(--accent-hl);       /* 【ロゴ】Ū の上の横線の色（東川町の青） */                 /* 【ヒーロー写真】文字の列より左右にはみ出す幅 */

  /* --- フォント --- */
  --f-display:'Cormorant Garamond', serif;              /* UBAKUのロゴ・数字・事業名の英字 */
  --f-title:'Jost', sans-serif;                         /* セクションの英字見出し（What We Do など）・Numbers の数字 */
  --f-heading:'Murecho', 'Noto Sans JP', sans-serif;    /* 【小見出しのフォント】h1・Concept の言葉・Values・What We Do・キャッチ・Contact の日本語見出し */
  --f-body:'Noto Sans JP', sans-serif;                  /* 本文・メニュー */
  --f-serif-jp:'Noto Serif JP', serif;                  /* Concept の図の中の日本語だけ */
  --f-en:Futura, 'Futura PT', 'Jost', sans-serif;       /* 英語の小さな文字 */

  /* --- 余白 --- */
  --pad-x:clamp(20px, 5vw, 72px);   /* 画面の左右の余白 */
  --sec-y:160px;                    /* すべてのセクションの上下の余白（全セクション共通） */
  --block-gap:128px;                /* Business内の各事業のあいだの余白 */
  --head-gap:72px;                  /* 見出しの線から中身までの余白 */
  --ridge-h:120px;                  /* 稜線の高さ */
  --hero-max-h:max(380px, calc(100svh - 270px));   /* 【ヒーロー写真】写真の高さの上限（開いた画面の一番下に 01・02・03 が来て、その下に少しだけ余白が残るように。2026-10-16 に 330px→280px＋写真の上のすき間 40px→0 で、写真は約1.1〜1.2倍に。2026-10-17 に 270px：一番下の余白を約5pxに） */
  --topbar-h:56px;                  /* 【固定メニュー】細い帯の高さ */
  --hill-h:110px;                    /* Numbers の丘の線の高さ */

  /* --- 動き --- */
  --reveal-dist:28px;     /* スクロールで下から浮き上がる距離 */
  --reveal-time:1.1s;     /* 現れるまでの時間 */
  --lift:-8px;            /* マウスを乗せたときに浮く距離 */
}


/* ---------- 基本 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-weight:300;line-height:2;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a[href]:hover{color:var(--green)}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.5;letter-spacing:.08em}
/* アクセント：見出しの中の大事な言葉だけ色を変える（<em class="hl">） */
em.hl{font-style:normal;color:var(--accent-hl)}
.dark em.hl{color:var(--accent-sand)}
p{margin:0}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* 動きを減らす設定の人には、スクロールやスライドのアニメーションを止める */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

/* ---------- 文字の種類 ---------- */
.display{font-family:var(--f-display);font-weight:600;line-height:1;color:var(--green)}
.en{font-family:var(--f-en);font-weight:400;line-height:1.6}
/* 表現としての英語（Values の英文・What We Do の Connect など・More to come.）は Cormorant の斜体にそろえる */
.en-sub{font-family:var(--f-display);font-style:italic;font-weight:500;letter-spacing:.01em}
.label{font-size:12px;letter-spacing:.16em;color:var(--accent)}
.body{font-size:14px;color:var(--muted)}

/* ---------- Coming soon の小さな札（文字と同じくらいの幅） ---------- */
.badge,.badge--light{align-self:flex-start;display:inline-block;padding:4px 12px;font-size:11px;letter-spacing:.16em;line-height:1.6;color:#fff;background:var(--accent-hl)}   /* Coming soon はすべて東川町の青 */

/* ---------- 写真（写真がないときは色の付いた箱になる） ---------- */
.photo{position:relative;display:flex;align-items:flex-end;padding:16px;background:var(--ph1);overflow:hidden}
.photo.ph2{background:var(--ph2)}
.photo.ph3{background:var(--ph3)}
.photo span{position:relative;font-size:12px;letter-spacing:.1em;color:var(--ph-text)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- セクション見出し（左に英語の大見出し、右に日本語） ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:1px solid var(--rule-long);padding-bottom:20px;margin-bottom:var(--head-gap)}
.sec-head h2{font-family:var(--f-title);font-weight:200;letter-spacing:.05em;font-size:clamp(44px,6vw,72px)}
.sec-head .aside{font-family:var(--f-body);font-weight:300;font-size:14px;letter-spacing:.2em;color:var(--muted);text-align:right}   /* 見出し右の日本語は細いゴシック（大きな英字の明朝系と対比させる） */

/* ---------- 稜線（ヒーロー写真の上端・深緑セクションの上端） ---------- */
/* 端に細い線が出ないよう、上・左右に1〜2pxはみ出させて重ねる */
.ridge{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:var(--ridge-h);display:block;z-index:2}
.ridge path{fill:var(--cream)}

/* ---------- スクロールで、文字や写真がふわっと現れる動き ----------
   main.js が対象に .reveal を付け、画面に入ったら .is-visible を付ける
   現れ終わったら .revealed を付け、マウスを乗せたときの動きに切り替える
   （JSが動かない環境や「動きを減らす」設定では、最初から全部見える） */
.reveal{opacity:0;transform:translateY(var(--reveal-dist));transition:opacity var(--reveal-time) ease,transform var(--reveal-time) cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal.revealed{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
/* 写真は、少し拡大した状態からゆっくり元の大きさへ */
.reveal .photo img,.reveal.photo img{transform:scale(1.06);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible .photo img,.reveal.is-visible.photo img{transform:none}

/* ---------- マウスを乗せると少し浮く（What We Do・Ubaku in Numbers） ---------- */
.work-item:not(.reveal),.numbers-grid li:not(.reveal),.member:not(.reveal){transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
@media (hover:hover){
  .work-item:hover,.numbers-grid li:hover,.member:hover{transform:translateY(var(--lift))}
  .work-item:hover{border-top-color:var(--rule-hover-on-green)}
  .numbers-grid li:hover{border-top-color:var(--green)}
  .lift-card:hover{transform:translateY(var(--lift))}
  .biz3 .reveal.is-visible:hover > .zoom:not(:hover) img{transform:none}   /* What We Do の 01〜03：文字の部分にマウスを乗せても写真は拡大しない（文字が浮く動きと二重にしない） */
  .sub.lift-card:hover{border-top-color:var(--green)}
}

/* ---------- 「詳しく見る」系のリンク ---------- */
/* 「続きを読む」でたたむ部分（たたむのはスマホだけ。パソコンでは常に全部表示し、ボタンも出さない） */
.fold-wrap{display:contents}   /* 中身を包むだけの箱。並び方や余白は今までどおり */
.fold-btn{display:none}
.sp-br{display:none}   /* スマホだけで使う改行（パソコンでは改行しない） */
.more{align-self:flex-start;display:inline-block;font-size:13px;letter-spacing:.1em;border-bottom:1px solid var(--rule-long);padding:12px 0 6px}

/* ---------- アニメーション③：リンクの下線が、マウスを乗せると左から伸びる ----------
   いつもは薄い線（border-bottom）、マウスを乗せると濃い線（::after）が左から右へ伸びて、薄い線の上に重なる
   ※ 背景で線を描くと、薄い線（枠線）の下に隠れて見えないため、上に重ねる部品で描く */
.more,.work-item a.lines,.links-row a{position:relative;transition:color .3s ease}
.more::after,.work-item a.lines::after,.links-row a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.more:hover::after,.work-item a.lines:hover::after,.links-row a:hover::after{transform:scaleX(1)}

/* ---------- アニメーション①：マウスを乗せると、写真がゆっくり少し拡大する ---------- */
.zoom img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .zoom:hover img,a:hover > .zoom img,
  .reveal.is-visible .zoom:hover img,.reveal.is-visible.zoom:hover img,
  .reveal.is-visible:hover > .zoom img,.reveal.is-visible a:hover > .zoom img{transform:scale(1.05)}
  #work-wide.zoom:hover img{transform:scale(1.02)}   /* 横長の大雪山の写真は大きいので、拡大は控えめに（2026-10-16） */
}

/* ---------- アニメーション②：ページを開いたとき、上から順にふわっと現れる ----------
   style="--d:0.3s" のように、現れ始めるまでの時間を各要素に書いている */
@keyframes intro-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
.intro{animation:intro-in 1.6s cubic-bezier(.25,.1,.25,1) var(--d,0s) both}   /* 文字：1.6秒かけて、ゆっくり */
/* ヒーローの写真：文字よりさらにゆっくり。2.6秒かけて静かに浮かび上がり、同時にほんの少し引いていく（上品に見せるため） */
@keyframes hero-photo-in{from{opacity:0}to{opacity:1}}
@keyframes hero-photo-zoom{from{transform:scale(1.06)}to{transform:none}}
.panorama.intro{animation:hero-photo-in 2.6s cubic-bezier(.33,0,.2,1) var(--d,0s) both}
.panorama.intro .slide img{animation:hero-photo-zoom 4.5s cubic-bezier(.2,.6,.2,1) var(--d,0s) both}

/* =========================================================
   ① ヒーロー
   ========================================================= */
html{overflow-x:clip}   /* ヒーロー写真を左右にはみ出させても、横スクロールを出さない */
.hero{display:flex;flex-direction:column;padding-top:24px;padding-bottom:13px}   /* 2026-10-25 下は約10pt＝13px */   /* 上はページの一番上の余白（2026-10-17 36px→24px＝2/3）。下は 01・02・03 の下に約10px（2026-10-17。写真の高さは main.js の「ヒーローの写真の高さ」が画面に合わせて計算） */
.nav{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;letter-spacing:.18em}
.nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
/* ---------- 固定メニュー（細い帯）：ふだんは画面の上に隠しておき、.is-shown で下りてくる ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-short);
  transform:translateY(-100%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s}
.topbar.is-shown{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
.topbar-inner{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar-logo{width:96px;flex:none}   /* 小さな UBAKŪ（押すとページの一番上へ） */
.topbar-nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.18em}
.topbar-menu,.nav-menu{display:none}
.nav-place{font-family:var(--f-title);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sub);line-height:1}   /* 左上の地名：メニューと同じ細い Jost・薄いグレーで静かに（2026-10-25。旧：EB Garamond 500・13px・黒） */
.hero-main{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:40px}
/* ロゴ（UBAKŪ の文字。元データ：02_ブランド・発信/logo/261010_Ubaku logo single2.svg）
   文字（logo-wordmark-letters.svg）と Ū の横線（logo-wordmark-bar.svg）を重ね、別々の色を付ける。縦横比 330:60 */
.wordmark{position:relative;display:block;aspect-ratio:330 / 60}
.wordmark::before,.wordmark::after{content:"";position:absolute;inset:0}
.wordmark::before{background:var(--logo-color);-webkit-mask:url(../img/logo-wordmark-letters.svg) center / contain no-repeat;mask:url(../img/logo-wordmark-letters.svg) center / contain no-repeat}
.wordmark::after{background:var(--logo-bar);-webkit-mask:url(../img/logo-wordmark-bar.svg) center / contain no-repeat;mask:url(../img/logo-wordmark-bar.svg) center / contain no-repeat}
.hero-mark{flex:none;width:clamp(200px,24vw,364px)}   /* ロゴの大きさ（2026-10-25 に約70%へ。旧：clamp(280px,34vw,520px)） */
.hero-copy{max-width:660px;display:flex;flex-direction:column;gap:10px;padding-top:.6%}   /* ロゴの横線の分だけ、ほんの少し下げて文字の中心とそろえる */
.hero-copy h1{font-family:var(--f-heading);font-size:clamp(18px,1.65vw,25px);line-height:1.6}
@media (min-width: 1001px){.hero-copy h1{white-space:nowrap}}   /* PCでは1行に収める */
.hero-copy p{font-size:14px;letter-spacing:.1em;color:var(--muted)}

.slide-tabs{order:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:18px 0 0}   /* 写真の下に置く */
.slide-tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:12px;letter-spacing:.06em;color:var(--sub);line-height:1.7}
.slide-tabs button::before{content:"";align-self:stretch;height:1px;background:var(--line)}
.slide-tabs button[aria-selected="true"]{color:var(--ink)}
.slide-tabs button[aria-selected="true"]::before{height:2px;background:var(--green)}
.slide-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.slide-tabs .tab-short{display:none}   /* スマホだけの短い説明（01 山／02 森／03 丘。2026-10-26） */

.panorama{position:relative;aspect-ratio:var(--hero-ratio);max-height:var(--hero-max-h);margin-top:0;margin-left:calc(50% - 50vw + var(--hero-bleed));margin-right:calc(50% - 50vw + var(--hero-bleed));overflow:hidden}
/* 写真ごとに「切り抜くときに残したい場所」を指定（左右％ 上下％） */
#slide-0 img{object-position:50% 50%}   /* 素材の写真は横長（2.4:1）に切り抜き済み。スマホでは左右が少し切れる */
#slide-1 img{object-position:50% 50%}
#slide-2 img{object-position:50% 50%}
/* 写真の上端を丘のカーブで切り抜く（白い形を重ねる方式だと、写真の縁に細い線が出るため、写真そのものを切り抜く）
   カーブの形を変えるときは、下の d="…" と index.html のヒーローの svg の d を同じにする */
.hero .ridge{display:none}
.hero .panorama{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 54 C 320 92, 620 90, 880 62 C 1080 40, 1280 42, 1440 64 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 54 C 320 92, 620 90, 880 62 C 1080 40, 1280 42, 1440 64 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat}
.panorama .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.panorama .slide.is-active{opacity:1}

/* =========================================================
   セクションの上下の余白（全セクション共通）
   深緑のセクションは、稜線の高さの分だけ上を足す
   ========================================================= */
.values,.concept-sec,.business,.team,.journal,.numbers .wrap{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.work,.contact{padding-top:calc(var(--sec-y) + var(--ridge-h));padding-bottom:var(--sec-y)}
.contact{padding-top:calc(var(--sec-y) * 2 / 3 + var(--ridge-h));padding-bottom:calc(var(--sec-y) * 2 / 3)}   /* 上の余白・フッターの住所の下の余白とも、ふつうの余白の 2/3（2026-10-16 上も 2/3 に） */   /* フッターの住所の下の余白（ふつうの余白の 2/3） */
.team + .journal{padding-top:0}   /* 同じ地色が続くときは、上の余白を足さない */

/* =========================================================
   ② Values
   ========================================================= */
.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:64px;row-gap:56px}   /* 3つを横一列に */
.value{display:flex;flex-direction:column;gap:12px}
.value h3{font-family:var(--f-heading);font-size:clamp(20px,1.9vw,26px)}
/* 【Values の番号と英語】「01｜Editing the Local.」：Business の「Connect｜知る・つながる」と同じ小さなラベル */
.value-head{display:flex;align-items:baseline;gap:0;margin:0;font-family:var(--f-body);font-weight:300;font-size:13px;letter-spacing:.16em;color:var(--accent)}
.value-head .label{font-size:inherit;letter-spacing:inherit}
.value-head .label::after{content:"｜";color:var(--accent-sand);margin:0 .5em}
.value-head .en-sub{font-family:inherit;font-style:normal;font-weight:inherit;font-size:inherit;letter-spacing:inherit;color:var(--accent)}
.value p.body{font-size:15px}

/* =========================================================
   深緑のセクション共通（What We Do・Contact）
   ========================================================= */
.dark{position:relative;--panel:var(--green);color:var(--on-green);overflow:hidden;
  /* 面の色は上から2pxだけ下げて塗る（上端の稜線と面の境目に、細いグレーの線が出ないように） */
  background:linear-gradient(var(--panel),var(--panel)) 0 2px / 100% calc(100% - 2px) no-repeat}
.dark--after-kraft .ridge path{fill:var(--kraft)}   /* 直前がクラフト色のとき */
#work{--panel:var(--kraft);--on-green:var(--ink);--on-green-sub:var(--muted);--rule-long-on-green:var(--rule-long);--rule-short-on-green:#E0E3E1;--accent-sand:var(--green);--rule-hover-on-green:var(--green)}
#work .sec-head h2{color:var(--green)}   /* 見出しはほかのセクションと同じ色 */
.dark .sec-head{border-color:var(--rule-long-on-green)}
.dark .sec-head h2{color:var(--on-green)}
.dark .sec-head .aside{color:var(--on-green-sub)}
.dark a[href]:hover{color:var(--accent-sand)}

/* =========================================================
   ③ What We Do
   ========================================================= */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px 64px}
.work-item{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rule-short-on-green);padding-top:24px}
/* What We Do の英語（Connect・Stay など）：Business の「Connect｜知る・つながる」と同じ、細いゴシックで字間広め */
.work-item .kind{font-family:var(--f-body);font-weight:300;font-size:14px;letter-spacing:.16em;color:var(--accent-sand)}
.work-item h3{font-family:var(--f-heading);font-size:24px}
.work-item p{font-size:14px;color:var(--on-green-sub)}
.work-item .lines{align-self:flex-start;font-size:12px;letter-spacing:.12em;color:var(--on-green)}
.work-item a.lines{border-bottom:1px solid var(--rule-short-on-green);padding-bottom:2px}
.lines-soon{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}

/* What We Do の 01〜03：動いている事業（写真つきの3つ並び。2026-10-16 に Business をここへまとめた） */
.biz3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-bottom:var(--block-gap)}
.biz3 article{display:flex;flex-direction:column;gap:16px}
.biz-body{flex:1;display:flex;flex-direction:column;gap:16px}   /* 写真の下の文字の部分（マウスを乗せるとここだけ浮く） */
.biz3 .photo{aspect-ratio:3 / 2;padding:0;margin-bottom:8px}
#villa .photo img{object-position:100% 50%}   /* 右端の看板が切れないよう右にそろえる */
.biz3 .biz-name{font-size:30px}
.biz3 .catch{font-size:17px;color:var(--ink)}
.biz3 .body{font-size:14px;line-height:2;color:var(--muted)}   /* 本文はふつうに幅いっぱいで折り返す（2026-10-17 text-wrap:pretty をやめた。iPhone で行の途中で早めに折り返したため） */
/* 下に1行（南邸・改修のご相談・UBAKU Lab）。margin-top:auto で3つの高さをそろえる */
.biz-extra{margin-top:auto;border-top:1px solid var(--rule-short-on-green);padding-top:16px;font-size:13px;line-height:1.9;color:var(--sub)}
.biz-extra span{display:block;color:var(--ink)}

/* What We Do の 04〜06 の上の横長の大雪山の写真（下から幕が上がるように現れる。拡大はしない） */
.work{container-type:inline-size}
.work-wide{height:calc((100cqw - 112px) / 3);padding:0;margin-bottom:56px}   /* 01〜03 の写真（3列・横3：縦2）の 1.5倍の高さ（横に長いので、同じ高さだと低く見えるため。2026-10-16）。112px は列のすき間2つ分 */
.work-wide img{object-position:50% 50%}   /* 雪の稜線と丘が入る位置 */
.work-wide.reveal{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.2,.7,.2,1)}
.work-wide.reveal.is-visible{clip-path:inset(0 0 0 0)}
.work-wide.reveal img,.work-wide.reveal.is-visible img{transform:none}
.work-item .label{font-size:12px}   /* 「Connect｜知る・つながる」の1行（01〜03 と同じ形。2026-10-17） */
.work-item h3.work-catch{text-wrap:pretty;word-break:auto-phrase;font-size:17px;line-height:1.7}   /* 見出しはキャッチの文（大雪山のふもとの、…）。01〜03 のキャッチと同じ大きさ。折り返すときは言葉の切れ目で（auto-phrase） */
.nw{white-space:nowrap}   /* この中では改行しない（言葉の途中で折り返さないように） */

/* =========================================================
   ④ Business
   ========================================================= */
.biz-name{font-family:var(--f-biz);font-weight:var(--f-biz-weight);letter-spacing:.04em;color:var(--green);line-height:1.1}
.biz-name-jp{white-space:nowrap;font-family:var(--f-serif-jp);font-size:.6em;letter-spacing:.08em}
.catch{font-family:var(--f-heading);font-weight:400;line-height:1.6;letter-spacing:.08em}

/* Villa（大きく1段） */
.villa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;margin-bottom:var(--block-gap)}
.villa .photo{grid-column:span 7;min-height:560px}
.villa .photo img{object-position:100% 50%}   /* 画面の幅で切り抜くときも、右端の看板が切れないよう右にそろえる */
.villa-text{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;gap:20px}
.villa-text .biz-name{font-size:44px}
.villa-text .catch{font-size:22px}
.facts{list-style:none;margin:0;padding:0;font-size:13px}
.facts li::before{content:"・"}
.minami{border-top:1px solid var(--rule-short);padding-top:20px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.minami strong{font-weight:300}

/* Media（1段・カードにしない。上下の余白はVillaと同じ） */
.media.reveal .media-photo{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.2,.7,.2,1)}
.media.reveal.is-visible .media-photo{clip-path:inset(0 0 0 0)}
.media .media-photo img,.reveal .media-photo img,.reveal.is-visible .media-photo img{transform:none}   /* 横長の写真は拡大させない */
.media{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;margin-bottom:var(--block-gap)}
.media-photo{grid-column:1 / -1;min-height:360px}
.media-photo img{object-position:50% 50%}   /* 大雪山の稜線と丘が入るように */
.media-name{grid-column:span 5;display:flex;flex-direction:column;gap:12px}
.media-name .biz-name{font-size:40px}
.media-text{grid-column:span 7;display:flex;flex-direction:column;gap:20px}
.media-text .catch{font-size:20px}

/* Design・Consulting（2列） */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:96px}
.two article{display:flex;flex-direction:column;gap:20px}
.two .photo{min-height:340px}
.two .biz-name{font-size:40px}
.two .catch{font-size:20px}
.two .body{line-height:2.1}
.design-body{display:flex;flex-direction:column;gap:20px}
.steps{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rule-short);padding-top:24px;margin-top:8px}
.steps ol{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 0;list-style:none;margin:0;padding:0;font-size:13px;line-height:1.6;color:var(--muted)}
.steps li{white-space:nowrap}   /* 項目の途中では改行しない（PCでは1行に収まる長さ） */
.steps li:not(:last-child)::after{content:"→";margin:0 8px;color:var(--sub)}
.sub{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--rule-short);padding-top:28px;margin-top:12px}
.lift-card{border-top:1px solid transparent}
.sub.lift-card{border-top-color:var(--rule-short)}
.lift-card:not(.reveal){transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
.sub h4{font-family:var(--f-heading);font-size:17px;color:var(--ink)}
.note{font-size:13px;color:var(--sub);margin-top:12px}

/* =========================================================
   ⑤ Ubaku in Numbers（クラフト色）
   ========================================================= */
.numbers{position:relative;background:var(--cream)}   /* 白（2026-10-16 決定：B 白＋丘。What We Do の淡いグレーが丘の形で終わる） */
.numbers .hill{display:block;width:100%;height:var(--hill-h);margin-bottom:calc(var(--hill-h) * -0.4)}
.numbers .hill-fill{fill:var(--kraft)}   /* 丘より上は、前のセクション（What We Do）と同じ淡いグレー */
.numbers + .team{padding-top:0}   /* Numbers と Team は同じ白が続くので、上の余白を足さない */
.numbers-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;list-style:none;margin:0;padding:0}
.numbers-grid li{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule-short);padding-top:20px}
.num{white-space:nowrap;font-family:var(--f-title);font-weight:300;font-size:40px;letter-spacing:.02em;line-height:1.2;color:var(--green)}
.num small{font-family:var(--f-body);font-size:14px;margin:0 2px;color:var(--muted)}   /* 単位（.01・%+・棟目 など）は小さな文字（東川ヴィレッジと同じ） */
.num .cnt{font-variant-numeric:tabular-nums}   /* 回っている間に幅がガタつかないように */
.odo-digit{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom}   /* スロットの窓（1けたぶん） */
.odo-strip{display:block}
.odo-strip span{display:block;height:1.2em;line-height:1.2}
.numbers-grid p{font-size:13px;line-height:1.8;color:var(--muted)}

/* =========================================================
   ⑥ Team
   ========================================================= */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.member{display:flex;flex-direction:column;gap:14px}
.member .photo{min-height:380px}
.member .photo img{object-position:center 30%}   /* 顔が切れないよう、少し上寄りで切り抜く */
.member h3{font-family:var(--f-biz);font-weight:var(--f-biz-weight);letter-spacing:.04em;font-size:32px;color:var(--green);line-height:1.1}

/* =========================================================
   ⑦ Journal
   ========================================================= */
.journal-flow{display:flex;flex-direction:column;gap:40px;overflow:hidden;padding:8px 0}
.flow-row{overflow:hidden}
.flow-track{display:flex;gap:var(--card-gap);width:max-content;animation:flow calc(var(--count) * var(--flow-speed)) linear infinite}
.flow-row.reverse .flow-track{animation-direction:reverse}
.flow-row:hover .flow-track{animation-play-state:paused}   /* マウスを乗せている間は止まる */
.flow-track.is-waiting{animation-play-state:paused}   /* Journal が画面に入るまでは止めておく（入ったら最新の記事が真ん中の位置から流れ始める。main.js） */
/* 同じ並びを2回つないでいるので、半分ぶん動いたら最初に戻る（つなぎ目は見えない） */
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--card-gap) / 2))}}
.note-card{width:var(--card-w);flex:none;display:flex;flex-direction:column;gap:12px}
.note-card .photo{aspect-ratio:1280 / 670;padding:0}
.note-card .meta{display:flex;gap:12px;align-items:baseline}
.note-card .date{font-family:var(--f-en);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.note-card .source{font-family:var(--f-en);font-size:11px;letter-spacing:.1em;color:var(--green)}
.note-card .title{font-size:14px;line-height:1.8;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.note-card:hover .title{color:var(--green)}
.note-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 32px;margin-top:56px}
/* 動きを減らす設定の人には流さず、指で横にスクロールする形にする */
@media (prefers-reduced-motion: reduce){
  .flow-row{overflow-x:auto}
  .flow-track{animation:none}
}

/* =========================================================
   ② Concept ＋ Values（横並び：左＝Concept図、右＝Values）
   ========================================================= */
.cv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start}
.cv-concept .concept-catch{margin-top:0;font-size:clamp(20px,2vw,28px)}
.cv-concept .tomoe{max-width:440px;margin-top:24px}        /* 図は少し小さく */
.cv-values .values-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
.cv-values .value{padding:clamp(28px,3vw,48px) 0;border-top:1px solid var(--rule-short)}   /* 【Values の間隔】左の Concept の図と高さが近くなるように、少し広め */
.cv-values .value:first-child{border-top:0;padding-top:0}
.cv-values .value h3{font-size:clamp(19px,1.7vw,23px)}

/* =========================================================
   ②' Concept（Valuesの下・3つの円）
   ========================================================= */
.concept{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.concept .kicker{font-family:var(--f-heading);font-size:13px;letter-spacing:.12em;color:var(--muted)}
.concept-title{font-family:var(--f-display);font-weight:500;font-size:clamp(56px,8vw,104px);line-height:1;color:var(--ink)}
.concept-catch{font-family:var(--f-heading);font-weight:400;font-size:clamp(22px,3.2vw,40px);line-height:1.7;letter-spacing:.08em;color:var(--ink);margin-top:24px}
.tomoe{width:100%;max-width:720px;margin-top:48px}
.tomoe svg{display:block;width:100%;height:auto}
.tomoe .fill-top{fill:var(--c-top)}
.tomoe .fill-br{fill:var(--c-br)}
.tomoe .fill-bl{fill:var(--c-bl)}
.tomoe .fill-center{fill:var(--cream)}
.tomoe .gap{fill:none;stroke:var(--cream);stroke-width:8}
/* 【Concept の英語】[People] など：Futura系の細字（図は縮小表示なので、見た目はこの約半分の大きさ） */
.tomoe .lbl-en{font-family:'Jost',sans-serif;font-weight:300;font-size:19.6px;letter-spacing:.1em;fill:var(--muted);text-anchor:middle}
.tomoe .lbl-jp{font-family:var(--f-serif-jp);font-weight:400;font-size:30px;letter-spacing:.08em;fill:var(--c-label);text-anchor:middle}
.tomoe .logo-letters{fill:var(--logo-color);stroke:var(--logo-color);stroke-width:1.1171;stroke-miterlimit:10}   /* 真ん中の UBAKŪ（ロゴのデータ。2026-10-16） */
.tomoe .logo-bar{fill:var(--logo-bar)}
.tomoe .lbl-brand{font-family:var(--f-display);font-weight:500;font-size:36px;letter-spacing:.04em;fill:var(--c-label);text-anchor:middle}
/* 画面に入ったら：円が少し回りながら広がり、文字が 上 → 右下 → 左下 → 真ん中 の順に現れる
   （main.js が .reveal → .is-visible を付ける。枠そのものは動かさない） */
.tomoe.reveal{opacity:1;transform:none}
.tomoe.reveal .shapes{opacity:0;transform:scale(.92) rotate(-6deg);transform-box:view-box;transform-origin:450px 400px;transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.tomoe.reveal .lbl{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.tomoe.reveal.is-visible .shapes,.tomoe.reveal.is-visible .lbl{opacity:1;transform:none}
.tomoe.is-visible .lbl-top{transition-delay:.6s}
.tomoe.is-visible .lbl-br{transition-delay:.8s}
.tomoe.is-visible .lbl-bl{transition-delay:1s}
.tomoe.is-visible .lbl-center{transition-delay:1.4s}


/* =========================================================
   ⑨ Contact / ⑩ フッター（深緑）
   ========================================================= */
.contact-lead{max-width:640px;display:flex;flex-direction:column;gap:12px;margin-bottom:64px}
.contact-lead-title{font-family:var(--f-heading);font-weight:400;letter-spacing:.08em;font-size:clamp(20px,2vw,26px);color:var(--on-green)}
.contact-lead p:not(.contact-lead-title){font-size:15px;line-height:2;color:var(--on-green-sub)}

/* フォーム */
.form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px;margin-bottom:120px}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1 / -1}
.field label{font-size:13px;letter-spacing:.08em;color:var(--on-green)}
.req{margin-left:8px;font-size:11px;color:var(--accent-sand)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--on-green);
  background:transparent;border:0;border-bottom:1px solid var(--rule-long-on-green);
  border-radius:0;padding:8px 0;
}
.field textarea{border:1px solid var(--rule-long-on-green);padding:12px;resize:vertical}
.field select option{color:var(--ink);background:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-sand)}
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.submit{font:inherit;font-size:14px;letter-spacing:.16em;color:var(--green);background:var(--on-green);border:0;padding:14px 48px;cursor:pointer}
.submit:hover{background:var(--accent-sand)}
.submit:disabled{opacity:.6;cursor:wait}
.form-status{font-size:14px;color:var(--on-green)}

/* メール・Instagram（同じ大きさで横に並べる） */
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}   /* 右側は縦に：アイコン → UBAKU のサイトの行 → プライバシーポリシー（2026-10-25） */
@media (min-width: 641px){footer > div:first-child > span:first-of-type{white-space:nowrap}}   /* 名乗りを途中で改行しない（パソコン） */
.links-row{display:flex;flex-wrap:wrap;gap:12px 40px;list-style:none;margin:0;padding:0}
.links-row li{display:flex;align-items:baseline;gap:12px}
.links-row .label{font-size:11px;color:var(--on-green-sub)}
.links-row a{font-size:13px;letter-spacing:.1em;color:var(--on-green);border-bottom:1px solid var(--rule-short-on-green);padding-bottom:2px}
/* SNS のアイコン（Instagram・note。2026-10-17）。線だけの小さなアイコンで、マウスを乗せると色が変わる */
.links-row li.sns{align-items:center;gap:16px}
.links-row a.sns-icon{display:inline-flex;width:22px;height:22px;padding:0;border:0;color:var(--on-green)}
.links-row a.sns-icon::after{display:none}
.links-row a.sns-icon--note{width:65px;height:15px}   /* 幅も決めておく（スマホで幅が広がり、アイコンの間が変に空いたため。2026-10-25） */   /* note は英字の「note」のロゴ（公式。素材/logo/note/logo.svg）。横長なので高さで合わせる */
.sns-icon--note svg{width:auto;height:100%}
.sns-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sns-icon svg .dot,.sns-icon svg .fill{fill:currentColor;stroke:none}

footer{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid var(--rule-long-on-green);padding-top:24px;font-size:12px;letter-spacing:.12em;line-height:1.9;color:var(--on-green-sub)}
footer .footer-logo{width:200px;margin-bottom:16px;--logo-color:var(--on-green)}
footer .footer-logo::before,footer .footer-logo::after{-webkit-mask-position:left center;mask-position:left center}

/* =========================================================
   タブレット（幅1000px以下）
   ========================================================= */
@media (max-width: 1000px){
  .biz3{grid-template-columns:minmax(0,1fr);gap:var(--block-gap)}
  .biz3 .photo{aspect-ratio:16 / 9}
  .work-wide{height:calc(100cqw * 9 / 16)}   /* 1列のときも 01〜03 の写真と同じ高さ */
  :root{--sec-y:120px;--block-gap:96px;--head-gap:56px;--ridge-h:90px}
  .nav ul{gap:18px;flex-wrap:wrap;justify-content:flex-end}
  .topbar-nav ul{gap:18px}
  .hero-main{flex-direction:column;align-items:flex-start}
  .values-grid,.two{grid-template-columns:minmax(0,1fr);column-gap:0}
  .cv-grid{grid-template-columns:minmax(0,1fr);gap:var(--block-gap)}
  .two{row-gap:var(--block-gap)}
  .work-grid,.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .villa .photo,.villa-text,.media-name,.media-text{grid-column:span 12}
  .villa .photo{min-height:380px}
  .media-photo{min-height:300px}
  .villa,.media{gap:32px}
  .form{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   スマホ（幅640px以下）
   ========================================================= */
@media (max-width: 640px){
  .work-wide{margin-bottom:40px}
  .biz3 .biz-name{font-size:28px}
  :root{--sec-y:96px;--block-gap:80px;--head-gap:40px;--ridge-h:60px;--hill-h:64px}
  .hero{padding-top:20px}
  /* ヒーローのメニュー（2026-10-26）：スマホは一覧をたたみ、右に「Menu ＋」ボタン。押すと下に一覧が開く（多くのサイトと同じ形） */
  .nav{position:relative;flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:8px}
  .nav ul{display:none}
  .nav .nav-menu{display:block;margin-left:auto}
  .nav.is-open ul{display:flex;flex-direction:column;flex-basis:100%;gap:0;margin-top:12px;border-top:1px solid var(--rule-short);font-size:14px}
  .nav.is-open ul li{border-bottom:1px solid var(--rule-short)}
  .nav.is-open ul a{display:block;padding:12px 0}
  /* 固定メニュー：スマホは右側を「Menu」ボタンにして、押すと帯の下に一覧が開く */
  .topbar-menu,.nav-menu{display:block;padding:8px 0 8px 16px;border:0;background:none;font:inherit;font-family:var(--f-title);font-weight:300;font-size:13px;letter-spacing:.18em;color:var(--ink);cursor:pointer}
  .topbar-menu::after,.nav-menu::after{content:"＋";margin-left:.6em;color:var(--accent-hl)}
  .topbar-menu[aria-expanded="true"]::after,.nav-menu[aria-expanded="true"]::after{content:"－"}
  .topbar-nav{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--rule-short);display:none}
  .topbar.is-open .topbar-nav{display:block}
  .topbar-nav ul{flex-direction:column;gap:0;padding:4px var(--pad-x) 12px;font-size:14px}
  .topbar-nav li + li{border-top:1px solid var(--rule-short)}
  .topbar-nav a{display:block;padding:14px 0}
  .hero-copy h1 .sp-br{display:inline}   /* スマホだけ「知る・泊まる・過ごす・住む。」の前で改行 */
  /* スマホは写真の下に3本のバーだけ（01・02・03 と写真の説明の文字は出さない。読み上げ用には残す） */
  .slide-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:14px}
  .slide-tabs button{font-size:0;gap:8px;padding:6px 0 10px}   /* 指で押しやすいよう、バーの上下に少し余白 */
  .slide-tabs .tab-long{display:none}
  .slide-tabs .tab-short{display:block;font-family:var(--f-title);font-weight:300;font-size:12px;letter-spacing:.2em}
  .panorama{--hero-ratio:1 / 1;--hero-bleed:0px;--hero-max-h:none;margin-top:28px}   /* 【ヒーロー写真】スマホは正方形で大きく、画面の端まで */
  #slide-2 img{object-position:72% 50%}   /* スマホでは左右が大きく切れるので、丘の一本の木を残す */
  .work-grid,.team-grid{grid-template-columns:minmax(0,1fr)}
  :root{--card-w:260px;--card-gap:20px}
  .note-links{justify-content:flex-start;flex-direction:column}
  .work-grid{gap:40px}
  /* What We Do の 04〜06：札「Connect｜知る・つながる」は1行のまま、その下に見出し（2026-10-17） */
  .work-item{gap:10px;padding-top:20px}
  .work-item h3.work-catch{font-size:17px}
  /* 「続きを読む」：閉じているあいだは隠す（Team の紹介文は3行まで見せる） */
  .fold:not(.is-open){display:none}
  .fold-clamp:not(.is-open){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .fold-btn[hidden]{display:none}
  .fold-btn{display:inline-block;align-self:flex-start;justify-self:start;padding:4px 0;border:0;border-bottom:1px solid var(--rule-long);background:none;font:inherit;font-size:13px;letter-spacing:.1em;color:var(--green);cursor:pointer}
  .fold-btn::after{content:"　＋"}
  .fold-btn[aria-expanded="true"]::after{content:"　－"}
  .fold-btn:focus-visible{outline:2px solid var(--green);outline-offset:4px}
  /* Team：写真を小さくして、名前の横に並べる */
  .team-grid{gap:36px}
  .member{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:6px}
  .member .photo{grid-row:1 / span 2;width:96px;min-height:0;aspect-ratio:1;padding:0}
  .member .label{grid-column:2;align-self:end}
  .member h3{grid-column:2;align-self:start;font-size:28px}
  .member .body,.member .fold-btn{grid-column:1 / -1}
  .member .body{margin-top:12px}
  /* Numbers：2列に並べて、縦の長さを半分に */
  .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .numbers-grid li{padding-top:12px;gap:4px}
  .num{font-size:26px}
  .num small{font-size:12px}
  .numbers-grid p{font-size:12px;line-height:1.6}
  .numbers .sec-head{margin-bottom:24px}
  .numbers .wrap{padding-top:40px;padding-bottom:48px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head .aside{text-align:left}
  .villa-text .biz-name{font-size:38px}
  .media-photo,.two .photo{min-height:240px}
  .form{margin-bottom:80px}
  footer{flex-direction:column;align-items:flex-start}
  .footer-right{align-items:flex-start;gap:16px}
  .links-row{flex-direction:column;gap:8px}
}


/* =========================================================
   オープニング（大雪山の稜線のイントロ）
   000→100と数字が進み、稜線が描かれ、「Find your place.」「Live your time.」の2行が1文字ずつ浮かび上がり、
   最後に幕のように上がって、サイトが現れる（動きは main.js の 0 番）
   ========================================================= */
html.is-opening,html.is-opening body{overflow:hidden}          /* オープニング中はスクロールさせない */
html.is-opening .intro,html.is-opening .panorama.intro .slide img{animation-play-state:paused}             /* ヒーローの登場は、幕が上がるまで待つ */
.opening{position:fixed;inset:0;z-index:100;background:var(--cream);color:var(--ink);cursor:pointer;transition:opacity .5s ease;--ridge-bottom:10%;--peak-x:57;--peak-y:12}   /* 稜線の下端の高さ（2026-10-17 30%→20%→10%：英文と旭岳の名前が近すぎたので稜線ごと下げた）。旭岳の山頂の位置は main.js が稜線から計算して入れる */
.opening[hidden]{display:none}
.opening:not(.ready) .op-logo,.opening:not(.ready) .op-coord,.opening:not(.ready) .op-count{opacity:0}   /* フォントが届くまで文字を出さない */
.op-logo,.op-coord,.op-count{transition:opacity .6s ease}
.op-logo{position:absolute;top:calc(26px + env(safe-area-inset-top,0px));left:var(--pad-x);width:110px}
.op-coord{position:absolute;top:calc(26px + env(safe-area-inset-top,0px));right:var(--pad-x);text-align:right;font-family:var(--f-en);font-size:11px;letter-spacing:.16em;line-height:1.7;color:var(--op-mist);font-variant-numeric:tabular-nums}
.op-big{position:absolute;left:50%;top:27%;transform:translateX(-50%);margin:0;display:flex;align-items:flex-end;gap:.24em;font-family:var(--f-title);font-weight:300;font-size:clamp(20px,calc(3vw - 3px),37px);letter-spacing:.03em;line-height:1;white-space:nowrap}   /* 2026-10-25：旭岳の名前・サイトの英字と同じ Jost の細い斜体に。大きさも少し小さく（旧：Cormorant 500・最大43px） */
/* 英文の動き：動詞だけが下から切り替わる（Find → Build → Live）。後ろの「your place.」は動かない */
.op-verb{position:relative;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;font-style:italic;padding:0 .18em 0 .12em;margin:0 -.18em 0 -.12em}   /* 斜体の文字は左右にはみ出すので、切れないように見えない余白を足す（並びの位置は変えない） */
.op-size{visibility:hidden}   /* 一番長い「Build」の幅だけをとる見えない文字 */
.op-verb i{position:absolute;right:.18em;top:0;font-style:italic;white-space:nowrap}   /* 3つの動詞を同じ場所に重ね、右にそろえる */
.op-verb i span{display:inline-block;transform:translateY(110%);transition:transform .6s cubic-bezier(.65,0,.25,1);transition-delay:calc(var(--i) * 45ms)}   /* 1文字ずつ 0.045秒ずつ遅れて動く */
.op-rest{display:inline-block;height:1.2em;line-height:1.2em;font-style:italic;opacity:0;transition:opacity .8s}   /* your place. も斜体（2026-10-17） */
.opening.s1 .op-rest{opacity:1}
.opening.s1 .op-verb i:nth-of-type(1) span{transform:none}                                   /* Find が下から入る */
.opening.s2 .op-verb i:nth-of-type(1) span{transform:translateY(-110%)}                     /* Find が上へ抜け */
.opening.s2 .op-verb i:nth-of-type(2) span{transform:none}                                   /* Build が下から入る */
.opening.s3 .op-verb i:nth-of-type(2) span{transform:translateY(-110%)}
.opening.s3 .op-verb i:nth-of-type(3) span{transform:none}                                   /* Live で止まる */
.op-ridge{position:absolute;left:0;bottom:var(--ridge-bottom);width:100%;height:auto;aspect-ratio:1000 / 120;overflow:visible}
.op-line{fill:none;stroke:var(--op-line);stroke-width:.8;stroke-linejoin:round}   /* 太さは main.js が画面幅に合わせて調整 */
.op-shade{fill:url(#op-mt);opacity:0}
.op-stop1{stop-color:var(--op-sky1)}
.op-stop2{stop-color:var(--op-sky2)}
.op-stop3{stop-color:var(--cream)}
.op-label{position:absolute;left:calc(var(--peak-x) * 1%);bottom:calc(var(--ridge-bottom) + (120 - var(--peak-y)) * 100vw / 1000 + 8px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;opacity:0;transition:opacity .9s ease}
.op-row{display:flex;align-items:baseline;gap:.7em;white-space:nowrap}
.op-label b{font-family:var(--f-en);font-weight:300;font-size:clamp(12px,1vw,14px);letter-spacing:.2em}
.op-label small{font-family:var(--f-en);font-weight:300;font-size:11px;letter-spacing:.18em;color:var(--op-mist);font-variant-numeric:tabular-nums}
.op-label i{width:1px;height:clamp(18px,3vw,36px);background:var(--op-line);transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.opening.peak .op-label{opacity:1}
.opening.peak .op-label i{transform:none}
.op-count{position:absolute;right:var(--pad-x);bottom:calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--f-en);font-size:11px;letter-spacing:.16em;color:var(--op-mist);font-variant-numeric:tabular-nums}
.opening.exit{pointer-events:none}
.opening.gone{opacity:0}
.opening.exit .op-big,.opening.exit .op-count,.opening.exit .op-logo,.opening.exit .op-coord,.opening.exit .op-label,.opening.exit .op-ridge{opacity:0;transition:opacity .7s ease}
@media (max-width: 640px){
  .opening{--ridge-bottom:16%}   /* スマホも稜線を下げる（2026-10-17 34%→16%） */
  .op-big{top:34%}   /* スマホは稜線を下げた分、英文も少し下げて、上下のバランスをとる */
  .op-count{bottom:calc(20px + env(safe-area-inset-bottom,0px))}   /* 100 の数字は画面の一番下近くに（2026-10-17） */
}

/* ---------- フッター：UBAKU のサイトの行（3ページ共通。2026-10-25） ---------- */
.footer-family{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0 0 10px;padding:0;font-family:var(--f-title);font-weight:300;font-size:12px;letter-spacing:.12em}
.footer-family a{color:var(--on-green-sub)}
.footer-family a:hover{color:var(--on-green)}

/* ---------- ページの一番上へ戻る矢印（2026-10-25）：右下の UBAKU Letter の札のすぐ上。ヒーローを過ぎたら出る（main.js） ---------- */
.to-top{position:fixed;right:24px;bottom:calc(24px + var(--lt-fab-h, 0px) + 12px);z-index:61;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.95);color:var(--logo-bar);border:1px solid var(--rule-short);box-shadow:0 4px 14px rgba(43,36,28,.08);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1),bottom .4s ease}
.to-top.is-shown{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.to-top:hover,a.to-top[href]:hover{background:var(--logo-bar);color:#fff;border-color:var(--logo-bar)}}   /* a[href]:hover の色に負けないよう強めに指定（矢印は白） */   /* 2026-10-25：マウスを乗せると東川町の青（下層は事業の色）に白い矢印 */
@media (max-width: 640px){.links-row li.sns{gap:22px}.to-top{right:16px;bottom:calc(16px + var(--lt-fab-h, 0px) + 10px);width:36px;height:36px}}

/* ---------- スマホをすっきり見せるための全体の調整（2026-10-26 精査） ---------- */
/* 見出しは、最後の行に1〜2文字だけ残らないよう、行の長さをそろえて折り返す（短い見出しだけ。本文の段落には使わない） */
h1,h2,h3,h4,.catch,.concept-catch,.work-catch,.contact-lead-title,.sec-head .aside,.biz-extra span{text-wrap:balance}
@media (max-width: 640px){
  /* フッターの UBAKU のサイトの行は 2×2 にそろえる */
  .footer-family{display:grid;grid-template-columns:repeat(2,max-content);gap:8px 28px}
  footer > div:first-child > span:first-of-type{display:block;text-wrap:balance}   /* 名乗りは行の長さをそろえて2行に */
}

/* ---------- 2026-10-26 スマホの調整 ---------- */
@media (max-width: 640px){
  .panorama.intro .slide img{animation:none}   /* 写真がゆっくり縮む動きはスマホではやめる（一瞬大きく見えるため）。ふわっと現れる動きは残す */
  /* 一番上の段：地名（トップ）・ロゴ（下層ページ）と「Menu ＋」の高さをそろえる */
  .nav{align-items:flex-start}
  .nav .nav-menu{padding:0 0 0 16px;line-height:20px}
  .nav-place{line-height:20px}
  /* Journal の3つの note のリンクは横に並べる */
  .note-links{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;gap:10px}
  .note-links .more{font-size:12px;letter-spacing:.04em;white-space:nowrap}
}