/* ------------------------------------------------------------------ 共通スタイル。色はトークンで持ち、アプリごとの色は .t-* クラスで差し替える。 **インラインの style="--accent:…" で書かないこと** —— インラインは @media より強いので、暗い配色に切り替わらなくなる。 ------------------------------------------------------------------ */ /* 欧文だけ表示用の書体（Instrument Sans）を当てている。読み込みは各ページの（tools/chrome.py の FONT_LINKS）。和文は端末側の書体に任せる —— 和文の webfont は数百 KB になり、Mac/iOS が大半のこのサイトでは割に合わない。 */ :root{ /* --- 地と文字（青に寄せた無彩色） --- */ --paper:#f6f8fb; --paper-rgb:246,248,251; --raise:#ffffff; --paper-blur:rgba(246,248,251,.72); --ink:#0e1420; --ink-2:#4f5a70; --ink-3:#677286; --line:#e0e6ef; --line-2:#edf1f6; /* --- 差し色（既定。アプリのページと一覧の行は .t-* が上書きする） --- */ --accent:#1a63d8; --accent-rgb:26,99,216; --accent-soft:rgba(var(--accent-rgb),.09); --on-accent:#fff; /* --- かたち --- */ --r:12px; --r-lg:18px; --shadow:0 1px 2px rgba(14,20,32,.04), 0 10px 28px -16px rgba(14,20,32,.16); --shadow-lift:0 2px 6px rgba(14,20,32,.07), 0 22px 48px -20px rgba(14,20,32,.26); /* --- 書体 --- */ --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif; /* 明朝は「サウナ設計」のアイコン（湯）だけに使う。アイコンの代わりに置いた字面なので、絵として明朝のまま。 **地の文には使わないこと** —— 1行だけ書体が変わって浮く。 */ --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif; --w:880px; /* 外枠の幅。トップの 2×2 に合わせてあり、全ページ共通 */ --wc:1180px; } @media (prefers-color-scheme: dark){ :root{ --paper:#0a0d15; --paper-rgb:10,13,21; --raise:#121826; --paper-blur:rgba(10,13,21,.72); --ink:#e8edf7; --ink-2:#98a3b8; --ink-3:#767f92; --line:#1e2533; --line-2:#171d29; /* 明るい配色向けの濃い色は、暗い地では沈んで読めない。暗いとき用を持つ */ --accent:#5aa6ff; --accent-rgb:90,166,255; --on-accent:#0a0d15; --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.9); --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 26px 56px -22px rgba(0,0,0,1); } } /* --- アプリごとの色 -------------------------------------------------- 各ページのと、一覧の各カードにつけるクラス。 **サイト自体の色は青**（上の :root）で、ここはアプリのアイコンから採った各アプリの色。アプリの持ちものなので青に染めない。 */ .t-equitime{--accent:#b4530f;--accent-rgb:180,83,15} .t-fururi {--accent:#12768a;--accent-rgb:18,118,138} .t-kotozute{--accent:#7a5c3e;--accent-rgb:122,92,62} .t-sauna {--accent:#94602c;--accent-rgb:148,96,44} @media (prefers-color-scheme: dark){ .t-equitime{--accent:#ef8b4a;--accent-rgb:239,139,74} .t-fururi {--accent:#4fbdd4;--accent-rgb:79,189,212} .t-kotozute{--accent:#cfa87d;--accent-rgb:207,168,125} .t-sauna {--accent:#dda068;--accent-rgb:221,160,104} } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.85; font-size:16px; letter-spacing:.02em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"palt" 1; /* 和文の詰め。約物まわりの間延びを抑える */ } a{color:inherit} .wrap{max-width:var(--w);margin:0 auto;padding:0 28px} /* **外枠（ヘッダーとフッター）の幅は、中身の読み幅と切り離して全ページ共通にする。** `--w` は中身の幅で、トップだけ 1180px（アプリのカードを 2×2 に組むため）、ほかは 880px。これを外枠にも使っていたので、ページを移るたびにロゴとナビが左右へ 150px 跳んでいた（1280px 幅で実測）。 **狭いほう（880px）に揃えないこと。** トップのカードがヘッダーより外へ出て、枠から溢れて見える。外枠が中身より広いぶんには額縁になるが、逆は壊れて見える。 */ .site-head .wrap,.site-foot .wrap{max-width:var(--wc)} /* --- 動き ------------------------------------------------------------ 初回だけ、ほんの少し持ち上げて出す。速さで気持ちよさを出したいので長くしない。動きを減らす設定の人には一切出さない。 */ @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .rise{animation:rise .55s cubic-bezier(.2,.7,.3,1) both} /* 名前 → カード、の順に流す。1画面に全部載っているぶん、出る順番そのものが「読む順番」の案内になる。 */ .intro > *{animation:rise .55s cubic-bezier(.2,.7,.3,1) both} .intro > *:nth-child(2){animation-delay:.06s} .intro > *:nth-child(3){animation-delay:.12s} .intro > *:nth-child(4){animation-delay:.18s} .apps .rise:nth-child(2){animation-delay:.22s} .apps .rise:nth-child(3){animation-delay:.29s} .apps .rise:nth-child(4){animation-delay:.36s} .apps .rise:nth-child(5){animation-delay:.43s} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* --- ヘッダー（貼りつく・すりガラス） --------------------------------- */ .site-head{ position:sticky;top:0;z-index:50; padding:16px 0; font-size:13px; letter-spacing:.04em; background:var(--paper-blur); border-bottom:1px solid transparent; transition:border-color .3s; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){ .site-head{-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px)} } .site-head .wrap{display:flex;align-items:center;gap:14px 24px;justify-content:space-between;flex-wrap:wrap} .site-head a{text-decoration:none;color:var(--ink-2);transition:color .2s} .site-head a:hover{color:var(--ink)} .site-head .home{ font-weight:700;color:var(--ink); letter-spacing:-.01em;font-size:15px; } .site-head nav{display:flex;gap:6px} .site-head nav a{padding:5px 12px;border-radius:100px;transition:color .2s,background .2s} .site-head nav a:hover{background:var(--line-2)} /* いま見ているページ。下線ではなく色と面で示す（下線はリンクの合図に取っておく） */ .site-head nav a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--line-2)} /* --- 画面に貼りついた地の光 -------------------------------------------- 参考にした Mana のサイトは、装飾を画面に固定して中身だけを動かす。ここでは花柄のかわりに、差し色をごく薄く流した光を固定で敷いている。 position:fixed なのでスクロールしてもページを移動しても動かない。これが「外枠は同じで中身だけ入れ替わる」感じの土台になる。 */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(48% 42% at 10% 0%, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),0) 70%), radial-gradient(42% 38% at 100% 100%, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),0) 70%); } /* --- トップのヒーロー -------------------------------------------------- */ .intro{position:relative;padding:70px 0 12px} .eyebrow{ font-size:11.5px;letter-spacing:.2em;color:var(--ink-3); margin-bottom:18px;text-transform:uppercase; min-height:1.85em; } /* 肩書きを 4秒ごとに入れ替える。3つを重ねて置き、順に明滅させるだけなので JavaScript は要らない。箱の幅はいちばん長い1つ目が決める（2つ目以降は絶対配置）ので、 **長いものを先頭に置くこと** —— 短いものが先頭だと後ろがはみ出す。読み上げには HTML 側の .sr-only が3つまとめて渡している。 */ .roles{position:relative;display:inline-block} .roles > span{ display:inline-block;white-space:nowrap; opacity:0;animation:role 12s cubic-bezier(.4,0,.2,1) infinite; } .roles > span + span{position:absolute;left:0;top:0} .roles > span:nth-child(2){animation-delay:4s} .roles > span:nth-child(3){animation-delay:8s} @keyframes role{ 0% {opacity:0;transform:translateY(5px)} 4%,27% {opacity:1;transform:none} 31%,100% {opacity:0;transform:translateY(-5px)} } /* 読み上げにだけ渡す文字 */ .sr-only{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .lead.name{ font-weight:700; font-size:clamp(38px,8vw,60px); letter-spacing:-.035em; line-height:1.05; } /* text-wrap:pretty は最終行に1〜2文字だけ落ちるのを避ける。 balance と違って行の長さを揃え直さないので、和文でも崩れない。対応していないブラウザは無視するだけ。 */ .lede{margin-top:22px;color:var(--ink-2);font-size:15.5px;max-width:32em;text-wrap:pretty} .card-one{text-wrap:pretty} /* --- プロフィール写真 -------------------------------------------------- */ .avatar{ width:84px;height:84px;border-radius:50%; display:block;margin-bottom:24px; object-fit:cover;background:var(--line-2); box-shadow:var(--shadow); outline:1px solid var(--line);outline-offset:-1px; } .doc .avatar{margin-bottom:22px} /* --- セクション -------------------------------------------------------- */ section{padding:56px 0} .sec-title{ font-size:11.5px;letter-spacing:.2em;color:var(--ink-3); text-transform:uppercase; margin-bottom:22px; } /* --- つくったもの（カード） -------------------------------------------- */ .apps{ display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); } .apps .sec-title{grid-column:1/-1;margin-bottom:0} .card{ position:relative;isolation:isolate; display:grid;grid-template-columns:52px 1fr;column-gap:16px; padding:24px; background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s; } /* 角から差し色をひとなで。ふだんは見えず、触れたときだけ出す */ .card::before{ content:"";position:absolute;inset:0;z-index:-1; border-radius:inherit; background:radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),0) 60%); opacity:0;transition:opacity .28s; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--accent)} .card:hover::before{opacity:1} .card:focus-within{border-color:var(--accent)} .card-icon{ width:52px;height:52px;border-radius:13px;display:block; box-shadow:0 1px 3px rgba(14,20,32,.22);background:var(--line-2); } /* 「サウナ設計」だけアプリのアイコン画像が無いので、字面を絵として置いている。 **ここが明朝を使う唯一の場所** —— 絵だから。地の文には使わない。色はここで持つこと（以前は HTML にインラインで書いてあり、トップとアプリのページで違う茶色になっていた）。 */ .card-icon.mono,.slide-hero .icon.mono{ display:flex;align-items:center;justify-content:center; font-family:var(--serif);color:#fff;box-shadow:none; background:#94602c; } .card-icon.mono{font-size:23px} .slide-hero .icon.mono{font-size:clamp(30px,3.6vw,42px)} .card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card-name{ font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.4; text-decoration:none; } /* カードのどこを押しても、そのアプリのページへ行けるようにする。下の .card-foot a は z-index で上に出しているので、そちらが優先される。 **見出しがリンクのときだけ**当たり判定を作る（span の見出しに作ると、押せないのに押せそうに見えるうえ、文字の選択も邪魔になる）。 */ a.card-name::after{content:"";position:absolute;inset:0;border-radius:inherit} .card-one{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.8} .card-foot{margin-top:14px;font-size:13px;letter-spacing:.03em} .card-foot a{ position:relative;z-index:1; color:var(--accent);text-decoration:none; display:inline-flex;align-items:center;gap:6px; } .card-foot a:hover{text-decoration:underline;text-underline-offset:3px} .card-foot .none{color:var(--ink-3)} .chip{ font-size:10.5px;letter-spacing:.06em; padding:3px 10px;border-radius:100px; border:1px solid var(--line);color:var(--ink-3); white-space:nowrap;line-height:1.7; } .chip.live{ color:var(--accent);border-color:transparent; background:var(--accent-soft);font-weight:600; } .chip.soon{color:var(--ink-2);border-color:var(--line)} /* --- ひとまとまりの面（一問一答や、補足のかたまりを載せる） -------------- */ .panel{ background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:8px 28px 28px; margin-top:8px; } .panel + .panel{margin-top:16px} .panel h2{ font-size:11.5px;letter-spacing:.2em;color:var(--ink-3); text-transform:uppercase;margin:28px 0 14px; } .panel p{font-size:15px;margin-bottom:12px} .panel ul{list-style:none} .panel li{position:relative;padding-left:1.05em;font-size:15px;margin-bottom:8px} .panel li::before{ content:"";position:absolute;left:0;top:.82em; width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.6; } .panel a{color:var(--accent);text-decoration:none} .panel a:hover{text-decoration:underline;text-underline-offset:3px} /* --- 見出しの帯（お問い合わせ） ---------------- */ .page-hero{ position:relative; padding:72px 0 60px; border-bottom:1px solid var(--line); overflow:hidden; } .page-hero::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(70% 100% at 12% 0%, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),0) 70%), linear-gradient(rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),0) 72%); } .page-hero .avatar{ width:88px;height:88px;border-radius:21px;display:block; box-shadow:var(--shadow-lift);margin-bottom:24px; } /* 下層でも見出しは大きく取る。1画面に載る情報が少ないぶん、いま何のページを見ているかを字の大きさで即答させる。 */ .page-hero h1{font-size:clamp(32px,6.6vw,54px);font-weight:700;letter-spacing:-.025em;line-height:1.2} /* 見出しの下の1行。**明朝にしないこと** —— サイトの地の文はすべてゴシックで、ここだけ書体が変わると1行だけ浮く。太さと大きさで見出しとの差をつける。 */ .page-hero .sub{margin-top:16px;font-size:17px;font-weight:500;letter-spacing:.01em;color:var(--ink)} .page-hero .meta{margin-top:22px;font-size:12.5px;color:var(--ink-2);letter-spacing:.05em} /* 読み幅は中身に効かせる。ラッパーを細めると左端がヒーローとずれる */ /* --- アプリのページの本文 ------------------------------------------------ 2026-08-27 まで `.wrap.body` で囲って `.body ○○` と書いていたが、アプリのページをデッキにしたときにその囲いが無くなった。 **`.body` を前置きに使わないこと** —— 囲いが無いので全部死ぬ（実際、抜き文の縦線と「決めていること」の作りが黙って消えた）。 */ .deck.app .slide p{margin-bottom:14px;font-size:15px;max-width:34em} .deck.app .slide p:last-child{margin-bottom:0} .deck.app .slide ul{list-style:none;margin-bottom:14px;max-width:34em} .deck.app .slide li{font-size:15px;padding-left:1.15em;position:relative;margin-bottom:10px} .deck.app .slide li::before{ content:"";position:absolute;left:0;top:.8em; width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6; } .deck.app .slide strong{font-weight:700} .deck.app .slide .quiet{color:var(--ink-2);font-size:13.5px} .btn{ display:inline-flex;align-items:center;gap:9px; background:var(--accent);color:var(--on-accent);text-decoration:none; padding:14px 26px;border-radius:100px;font-weight:600;font-size:15px; letter-spacing:.02em;margin:6px 10px 6px 0; box-shadow:var(--shadow); transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, opacity .2s; } .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .btn:active{transform:none} .btn.ghost{ background:transparent;color:var(--accent); border:1px solid var(--accent);box-shadow:none; } .btn .ico{width:1em;height:1em} .linkrow{margin:28px 0 0;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 20px} .linkrow a{color:var(--accent);text-decoration:none} .linkrow a:hover{text-decoration:underline;text-underline-offset:3px} /* --- 規約ページ（プライバシーポリシー等） ------------------------------ */ .doc{padding-top:56px} .doc > *{max-width:42em} .doc h1{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin-bottom:10px} .doc .stamp{font-size:12.5px;color:var(--ink-3);letter-spacing:.05em;margin-bottom:38px} .doc h2{ font-size:16px;font-weight:700;letter-spacing:.01em; margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--line-2); } .doc h2:first-of-type{border-top:none;padding-top:0} .doc p{margin-bottom:14px;font-size:15px} .doc ul{margin:0 0 14px 1.2em} .doc li{font-size:15px;margin-bottom:8px} .doc strong{font-weight:700} /* 下層から親へ戻るリンク（アプリのプライバシーポリシーやサポート） */ .back{ display:inline-block;margin-bottom:20px; font-size:13px;letter-spacing:.03em; color:var(--ink-2);text-decoration:none;transition:color .2s; } .back:hover{color:var(--ink)} /* --- リンクにつけるアイコン -------------------------------------------- SVG は 24×24 で描いてあり、大きさはここで決める。色は文字に追従する。 1em だとロゴが文字の大文字より背が高くなって悪目立ちするので、大文字の高さに寄せた 0.88em にしてある。 */ .ico{width:.88em;height:.88em;fill:currentColor;flex:none;vertical-align:-.11em} .ico-link{display:inline-flex;align-items:center;gap:6px} /* --- フッター ---------------------------------------------------------- */ .site-foot{ margin-top:56px;padding:36px 0 64px; border-top:1px solid var(--line); font-size:13px;color:var(--ink-2); } .site-foot .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center} .site-foot a{color:var(--ink-2);text-decoration:none;transition:color .2s} .site-foot a:hover{color:var(--ink)} /* アイコンだけのリンク。文字が無いぶん少し大きくし、押せる範囲を広げる。読み上げ用の名前は HTML 側の aria-label が持っている。 */ .social{display:flex;align-items:center;gap:4px;margin-left:auto} .social a{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:100px; transition:color .2s,background .2s; } .social a:hover{color:var(--ink);background:var(--line-2)} .social .ico{width:17px;height:17px} .site-foot .copy{color:var(--ink-3);font-size:12px} /* --- 狭い画面 ---------------------------------------------------------- 小さい画面向けの上書きは、散らさずここにまとめる。 */ @media (max-width:520px){ body{font-size:15.5px} .wrap{padding:0 20px} .intro{padding:46px 0 4px} section{padding:44px 0} .apps{grid-template-columns:1fr;gap:12px} .card{padding:20px;column-gap:14px;grid-template-columns:46px 1fr} .card-icon{width:46px;height:46px;border-radius:11px} .doc{padding-top:40px} /* 長い和文の見出しが1文字だけ次行に落ちるのを避ける */ .doc h1{font-size:23px} .social{margin-left:0} /* 指で押す前提なので、狭い画面では押せる範囲を広げる */ .social a{width:40px;height:40px} .site-foot .wrap{gap:6px 18px} .site-foot .copy{margin-left:0;width:100%} } /* --- ページの移り変わり ------------------------------------------------ ヘッダーとフッターに名前をつけておくと、ページを移動してもそこだけは動かず、中身だけが差し替わる。参考にしたサイトが内側のスクロール箱（.scroll-wrap）でやっていたことを、ブラウザの機能で素直にやる。対応していないブラウザでは、ただの普通の遷移になるだけ。 */ @view-transition{navigation:auto} .site-head{view-transition-name:head} .site-foot{view-transition-name:foot} ::view-transition-old(root){animation:vt-out .16s ease both} ::view-transition-new(root){animation:vt-in .34s cubic-bezier(.2,.7,.3,1) both} @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0;transform:translateY(10px)}} /* 外枠は動かさない。ここを明示しないと、既定の morph でわずかに揺れる */ ::view-transition-old(head),::view-transition-new(head), ::view-transition-old(foot),::view-transition-new(foot){animation:none} /* 上の一括指定（*）は擬似要素ツリーには届かないので、ここで改めて止める */ @media (prefers-reduced-motion: reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; } .roles > span{animation:none;opacity:0} .roles > span:first-child{opacity:1} } /* --- トップを1画面で完結させる ---------------------------------------- ヘッダー / 中身 / フッターの3段グリッドにして、中身を天地の中央に置く。スクロールが要らない高さと幅のときだけ効かせる —— 入りきらない画面で無理に 100svh を守ると、カードが切れて見えなくなるほうが害が大きい。 svh（small viewport height）を使うのは、iOS でアドレスバーが伸び縮みしても高さが変わらないようにするため。vh だとフッターがちらつく。 */ /* 1040px から。900px 台でも段は組めるが、カードが痩せて「サウナ設計＋試験稼働中」のような見出しが折り返す。折り返した 1枚だけ背が伸びて 2×2 が崩れるので、そこは素直に縦積みにする。 */ @media (min-width:1040px) and (min-height:680px){ body.home{ --w:1180px; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; } /* 動く先がないので、貼りつく必要もない */ body.home .site-head{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none} body.home .stage{display:grid;align-items:center;min-height:0} body.home .stage .wrap{ display:grid; grid-template-columns:minmax(300px,.82fr) 1.18fr; gap:0 44px;align-items:center; width:100%; } body.home .intro{padding:0} /* 左半分は写真で持たせる（参考にしたサイトが蝶を置いていた位置） */ body.home .avatar{width:112px;height:112px;margin-bottom:26px} body.home .lead.name{font-size:clamp(56px,6vw,80px)} body.home .lede{margin-top:20px;font-size:14.5px;line-height:1.9} /* 1画面に4枚を収めるため、カードを詰める。長い説明は各アプリのページが持っているので、ここは1行でいい。 */ body.home .apps{grid-template-columns:1fr 1fr;gap:14px} /* 見出しはヘッダーの「つくったもの」と重なるうえ、これがあると右列だけ上にずれて左右の重心が合わない */ body.home .apps .sec-title{display:none} body.home .card{padding:18px;grid-template-columns:44px 1fr;column-gap:13px} body.home .card-icon{width:44px;height:44px;border-radius:11px} body.home .card-icon.mono{font-size:20px} body.home .card-name{font-size:17px} /* 見出しの行に「サウナ設計＋試験稼働中」が収まる余白をつくる */ body.home .chip{font-size:10px;padding:3px 8px} body.home .card-one{font-size:12.5px;line-height:1.75;margin-top:6px} body.home .card-foot{margin-top:11px;font-size:12px} body.home .site-foot{margin-top:0;padding:24px 0 30px} } /* 1画面に収まらない画面では、ふつうに縦に積んで流す */ @media (max-width:1039px), (max-height:679px){ .stage .wrap > .intro{margin-bottom:8px} .apps{padding-bottom:8px} .stage{padding-bottom:40px} } /* --- 自己紹介：1画面ずつめくる ------------------------------------------ ja.webcreatormana.com の About のオマージュ。向こうは **1画面 = 1つの言い切り** を縦に並べ、全面の写真の上に大きな英字と日本語2行、下に次を示す矢印を置いている。こちらには使える写真が1枚（パグ）しかないので、**巨大な文字そのものを絵として扱う**。地は現行の青のまま、光の位置だけ画面ごとに振って場面が変わったことを伝える。スナップは `html` にしか効かないので、このページだけを付けている。 */ html.deck{scroll-snap-type:y mandatory} /* **写真を敷くデッキ（＝自己紹介）だけ、端末の明暗によらず暗く固定する。** アプリのページもデッキだが、あちらは全面写真が無く、かわりにアプリごとの色がある。暗く固定するとその色の出方が同じになって 4本の違いが消えるので、**`.dark` を付けない**。写真を主役にするページなので、地は暗いほうが写真が生きる。薄く敷く形（地の色を8割重ねる）も試したが、写真ごとの明るさの差が明るい配色と暗い配色でそれぞれ別の出方をして、画面ごとに別のサイトのように見えた。暗さを固定すると扱いが1つに揃う。ここで使っている値は :root の暗い配色と同じ。**別の色を作らないこと。** */ body.deck.dark{ --paper:#0a0d15; --paper-rgb:10,13,21; --raise:#121826; --ink:#e8edf7; --ink-2:#98a3b8; --ink-3:#767f92; --line:#1e2533; --line-2:#171d29; --accent:#5aa6ff; --accent-rgb:90,166,255; --on-accent:#0a0d15; --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.9); --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 26px 56px -22px rgba(0,0,0,1); background:var(--paper); color:var(--ink); } /* 見出しがヘッダーの下にもぐらないよう、スナップ位置を下げる */ .slide{scroll-margin-top:0} /* ヘッダーを流れから外す。sticky のままだと 1枚目だけヘッダーの高さぶん背が伸びて、以降のスナップ位置が全部ずれる。 **すりガラスの面はここでは使えない。** 全面の光の上に地の色が 7割乗るので、パネルの下端がそのまま横線として出てしまう。面のかわりに、地の色から透明へ落ちるかすみを敷いて端を消す。 */ body.deck .site-head{ position:fixed;left:0;right:0;top:0; padding-bottom:30px; background:linear-gradient( rgba(var(--paper-rgb),.92) 0%, rgba(var(--paper-rgb),.66) 52%, rgba(var(--paper-rgb),0) 100%); -webkit-backdrop-filter:none;backdrop-filter:none; border-bottom:none; } .slide{ position:relative; min-height:100svh; display:grid;align-content:center;justify-items:center; /* 列を明示しないと `auto` 列が中身の max-content まで広がり、子の max-width:100% がその広がった列を基準に解決されて画面からはみ出す（狭い画面で資格の一覧が切れる）。 */ grid-template-columns:minmax(0,1fr); text-align:center; padding:104px 24px; scroll-snap-align:start; } /* 差し色の光と、文字の下に敷く膜。**膜は写真を入れたときに要る。** 写真を敷いたままだと、明るく写った部分の上で本文（--ink-2）のコントラストが 4.41 まで落ちた（必要 4.5）。中央だけ地の色に戻し、写真は周りに残す。順番は「上に光 → 下に膜」。 */ /* 差し色の光と、写真の上に置く黒の膜。 **膜は文字の下でいちばん濃く、画面の端では薄い。** 端では写真がそのまま出る。濃さは実測で決めてある（`tools/bg.py` で明るさを揃えた写真に対して、小さなラベルで 5.3、本文で 7.0、見出しで 8.2）。**変えたら測り直すこと。** */ .slide::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(44% 38% at var(--gx) var(--gy), rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 70%); } /* 写真を敷くデッキだけ、その上に地の色の膜を重ねる */ .deck.dark .slide::before{ background: radial-gradient(44% 38% at var(--gx) var(--gy), rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),0) 70%), radial-gradient(82% 68% at 50% 47%, rgba(var(--paper-rgb),.70) 0%, rgba(var(--paper-rgb),.50) 55%, rgba(var(--paper-rgb),.24) 100%); } /* 画面ごとの背景写真。**主役は文字なので、気配まで落とす。** 写真をはっきり見せる形（参考サイトのやり方）も検討したが、それにはその画面だけ暗い配色に固定して白文字を乗せる必要がある。ここは明暗どちらにも対応したままにしたいので、薄く敷くほうを選んだ。薄いので、元が 350〜656px の切り出しでも拡大の甘さは出ない（元は生成AIが6場面を1枚に溶かして出したもの。`tools/bg.py` が切り直す）。 CSS からではなく HTML ので置いている —— `tools/stamp.py` がハッシュ付きの名前に書き換えるのは HTML と XML だけで、CSS の url() は見ていない。CSS に書くと参照が切れる。 */ .slide > .bg{ position:absolute;inset:0;z-index:-3; width:100%;height:100%; object-fit:cover; pointer-events:none; } /* 開いたときに、中身だけ少し持ち上げて出す。トップとお問い合わせは既に .rise でそうしているのに、デッキだけ何もせず出ていた。ページを移ったときの感じを揃えるための追加。 **背景写真（.bg）は動かさない。** inset:0 で敷いているので 10px ずらすと下端に地の色が覗く。矢印（.down）は下で別に指定している（ここで巻き込むと、ゆらす animation を上書きして止めてしまう）。 */ .slide > *:not(.bg):not(.down){ animation:rise .5s cubic-bezier(.2,.7,.3,1) both; } /* ドットは transform で上下中央に置いているので、rise（transform を触る）は使えない。透明度だけで出す。 */ @keyframes fade{from{opacity:0}to{opacity:1}} body.deck .pager{animation:fade .5s ease .1s both} /* 光を左右に振る。色は変えない —— 場面の切り替わりは位置だけで伝わる */ .slide:nth-child(odd) {--gx:26%;--gy:36%} .slide:nth-child(even){--gx:74%;--gy:40%} /* 写真の上に乗る文字は、地の文の色（--ink-2 / --ink-3）ではなく白に寄せる。くすんだ灰色は明るい地のための色で、写真の上では沈む。白に寄せるぶん膜を弱くでき、結果として写真がよく見える。 */ .slide .tag{ font-size:11px;letter-spacing:.28em;color:var(--ink-2); margin-bottom:22px; } .deck.dark .slide .tag{color:#cdd6e2} .deck.dark .slide h1,.deck.dark .slide h2{color:#fff} .deck.dark .slide .say{color:#eef2f8} .deck.dark .slide .say strong{color:#fff} .deck.dark .slide .certs{color:#eef2f8} .deck.dark .slide .down{color:#cdd6e2} .deck.dark .slide .down:hover{color:#fff;background:rgba(255,255,255,.12)} .slide .down:hover{color:var(--ink);background:var(--line-2)} .slide h1,.slide h2{ font-size:clamp(44px,10vw,120px); font-weight:700;line-height:1.02; /* この大きさで字間を詰めると、語と語の空きまで潰れて "I Build" が "IBuild" に見える。字間は控えめにして、語間は別に足す。 */ letter-spacing:-.028em;word-spacing:.1em; /* 英字だけの見出しなので、和文の詰めは切っておく */ font-feature-settings:normal; } .slide .say{ margin-top:30px; font-size:clamp(15px,1.5vw,17.5px); color:var(--ink-2);line-height:2.05; max-width:min(38em,100%); } .slide .say strong{color:var(--ink);font-weight:700} .slide .say a{color:var(--accent);text-decoration:none} .slide .say a:hover{text-decoration:underline;text-underline-offset:3px} /* 1枚目に置くアプリのアイコン。何をつくっているかを字より先に見せる */ .slide .icons{display:flex;gap:12px;margin-bottom:26px} .slide .icons img{width:44px;height:44px;border-radius:11px;box-shadow:var(--shadow)} /* 資格の一覧。**行頭に点を打たない。** まわりが中央揃えの組みなので、左揃えの箇条書きだけが別の作りに見える。映画の終わりのクレジットのように、中央へ静かに積む。区分（3級・G検定など）は小さく添えて、名前のほうを主にする。 */ .certs{ list-style:none;margin:34px auto 0; display:grid;gap:13px; max-width:min(34em,100%); text-align:center; font-size:15px;line-height:1.55; } .certs li{position:relative} .certs span{ display:inline-block; font-size:11.5px;letter-spacing:.06em; /* #9fabbd まで落とすと書架の明るいところで 3.9 になる。5.2 に上げてある */ color:#bac4d2; margin-left:.5em; vertical-align:.08em; } .slide .say.close{margin-top:30px;font-size:14px} /* 次の画面があることを示す矢印。押すとそこへ飛ぶ */ .down{ position:absolute;left:50%;bottom:34px; width:40px;height:40px;margin-left:-20px; display:flex;align-items:center;justify-content:center; color:var(--ink-3);border-radius:100px; transition:color .2s,background .2s; /* 出るときは本文と一緒に上げ、出きってから揺れはじめる */ animation:rise .5s cubic-bezier(.2,.7,.3,1) both, nudge 2.4s ease-in-out .5s infinite; } .down svg{width:22px;height:22px} .down:hover{color:var(--ink);background:var(--line-2)} @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* 最後の画面だけ背を詰めて、フッターを同じ画面の底に入れる */ body.deck .site-foot{margin-top:0;padding:24px 0 30px} .slide.last{min-height:calc(100svh - 88px)} @media (max-width:520px){ /* 右端のドットに文字が重ならないよう、左右とも広げる（右だけ広げると、中央揃えの自己紹介がずれる） */ .slide{padding:92px 34px} .slide .say{line-height:1.95} .slide .face{width:112px;height:112px} .down{bottom:22px} } /* 低い画面ではスナップを切る。1画面に収まらない中身を引き戻してしまい、資格の一覧が読めなくなる。 */ @media (max-height:640px){ html.deck{scroll-snap-type:none} .slide{min-height:0;padding:88px 34px} .down{display:none} } /* --- アプリの画面 -------------------------------------------------------- 画面を1枚ずつ大きく置き、その説明を横に組む。左右は交互。 2026-08-27 まで小さな3枚を横一列に並べ、別に「できること」の箇条書きを置いていたが、**同じことを2箇所で説明していた**ので1つにまとめた。幅は各画面の左右余白が決めるので、ここでは広げない。読み幅に閉じ込めると、写真と説明を横に組めない。 */ .walk{ display:grid;gap:60px; max-width:none; margin:0 0 8px; } /* 縦長のスクリーンショットの横に短い文を置くので、絵を大きくしすぎると右側が空きすぎる。220px で釣り合った。 */ .step{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:0 44px;align-items:center; } .step > img{ grid-column:1;grid-row:1; width:100%;height:auto;display:block; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow-lift); background:var(--line-2); } .step > figcaption{grid-column:2;grid-row:1} /* 左右を交互にする。**文字は常に左揃えのまま**（和文を右揃えにすると読みにくい） */ .step:nth-child(even){grid-template-columns:minmax(0,1fr) 220px} .step:nth-child(even) > img{grid-column:2} .step:nth-child(even) > figcaption{grid-column:1} /* ブラウザで動く「サウナ設計」は横長で、数字を読ませたいので大きく置く */ .walk.wide .step{grid-template-columns:340px minmax(0,1fr)} .walk.wide .step:nth-child(even){grid-template-columns:minmax(0,1fr) 340px} .step-lead{ font-size:clamp(17px,1.8vw,19px); font-weight:700;line-height:1.65; color:var(--ink); letter-spacing:.01em; margin-bottom:12px; } .step figcaption p:not(.step-lead){ font-size:14.5px;line-height:1.95;color:var(--ink-2); max-width:23em;margin:0; } .step figcaption strong{color:var(--ink);font-weight:700} @media (max-width:720px){ /* 横に組めない幅では、絵を上・説明を下にして積む。絵は本文の幅いっぱいにせず、左に寄せて置く（縦長なので、幅いっぱいにすると1枚で画面が埋まってしまう） */ .walk{gap:40px} .step, .step:nth-child(even), .walk.wide .step, .walk.wide .step:nth-child(even){grid-template-columns:minmax(0,1fr)} .step > img, .step:nth-child(even) > img{grid-column:1;grid-row:1;max-width:210px;margin-bottom:20px} .walk.wide .step > img, .walk.wide .step:nth-child(even) > img{max-width:100%} .step > figcaption, .step:nth-child(even) > figcaption{grid-column:1;grid-row:2} } /* --- アプリのページ：本文の入口 ----------------------------------------- 見出し（「どういうアプリか」）を置かず、最初の段落を大きく出す。本文が 15px と 11.5px の2種類しかなく、落差が無かったので足している。 */ .deck.app .slide p.lede-body{ font-size:clamp(17px,1.9vw,20px); line-height:1.9; color:var(--ink); max-width:30em; margin-bottom:0; } /* なぜつくったか、の一文。ページでいちばん読ませたい行なので大きく置く。本文と同じ 15px で流すと埋もれる。 */ .deck.app .slide p.pull{ font-size:clamp(19px,2.3vw,24px); line-height:1.75;letter-spacing:.01em; color:var(--ink); max-width:24em; margin:30px 0 0; padding-left:22px; border-left:3px solid var(--accent); } /* --- 決めていること ----------------------------------------------------- **「できること」と同じ見た目にしないこと。** あちらは機能の一覧で、こちらは「何をしないと決めたか」。後者は設計した人にしか書けないぶん、このサイトでいちばん読ませたい。決めごとを太く大きく、理由を下に小さく。行頭の点は打たない。 */ .deck.app .slide ul.calls{list-style:none;margin:0 0 16px;max-width:34em} .deck.app .slide ul.calls li{ position:relative; padding:0 0 0 20px; margin-bottom:24px; font-size:14px;line-height:1.85;color:var(--ink-2); } .deck.app .slide ul.calls li:last-child{margin-bottom:0} /* 「できること」の丸い点を、アプリの色の縦線に差し替える。 height:auto を書かないと、点のほうの height:5px が残って top/bottom が効かない */ .deck.app .slide ul.calls li::before{ content:"";position:absolute; left:0;top:.45em;bottom:.3em;height:auto; width:2px;border-radius:2px; background:var(--accent);opacity:.9; } .deck.app .slide ul.calls strong{ display:block; font-size:17px;font-weight:700;color:var(--ink); letter-spacing:.01em;line-height:1.55; margin-bottom:6px; } @media (max-width:520px){ .deck.app .slide ul.calls strong{font-size:16px} .deck.app .slide p.pull{padding-left:16px;margin-top:24px} } /* --- アプリのページのデッキ --------------------------------------------- 自己紹介と同じ「1画面ずつ」だが、扱いは3つ変えている。 1. **暗く固定しない**（`.dark` を付けない）。全面写真が無く、かわりにアプリごとの色があるので、暗くするとその色の出方が同じになる 2. **中央揃えにしない。** あちらは短い言い切りなので中央でよいが、こちらは説明文で、和文を中央揃えにすると読みにくい。かたまりごと中央に置き、中の字は左揃え 3. **画面の左右を入れ替えない。** 1枚ずつ別の段に置くと、隣り合わないので入れ替えても見えない。ぜんぶ絵が左 */ /* 中身を中央に寄せるのは**左右の余白でやる。** 子に width:100% を当てると、アイコンのような固有の大きさを持つものまで引き伸ばされる（2026-08-27 に実際そうなった）。 */ .deck.app .slide{ justify-items:stretch; text-align:left; padding:112px max(28px, calc((100% - (var(--w) - 56px)) / 2)) 96px; } /* --- 1枚目：アイコンと名前 --- */ .slide-hero .icon{ width:clamp(76px,9vw,104px);aspect-ratio:1;height:auto; border-radius:24%;display:block; box-shadow:var(--shadow-lift);margin-bottom:30px; } /* 1画面ぶん使えるので、名前は大きく取る（自己紹介の英字と同じ考え） */ .slide-hero h1{ font-size:clamp(40px,9vw,96px); font-weight:700;letter-spacing:-.035em;line-height:1.05; } .slide-hero .sub{ margin-top:24px;font-size:clamp(17px,2vw,21px); font-weight:500;letter-spacing:.01em;color:var(--ink); } .slide-hero .meta{ margin-top:26px;font-size:12.5px;color:var(--ink-2);letter-spacing:.05em; } /* --- 2枚目：リードと抜き文 --- */ .deck.app .slide .lede-body{margin-bottom:0} .deck.app .slide .pull{margin-top:34px} /* --- 画面の枚 --- */ .deck.app .slide-step .step{ grid-template-columns:auto minmax(0,24em); gap:0 52px;align-items:center; justify-content:start; } /* **画面のスクショに loading="lazy" を付けないこと。** ここは width も height も auto（縦の余裕に合わせて大きさを決めたい）ので、読み込みが済むまで元の寸法が分からず、箱が 2×2px に潰れる。スナップで飛んだ瞬間に文字だけが中央にあり、絵が入った瞬間に跳ねる。 1ページ 2〜3枚・数十 KB なので、最初から読んでよい。 */ .deck.app .slide-step .step > img{ width:auto;height:auto; max-width:min(300px,34vw); max-height:62svh; } .deck.app .walk.wide .step > img{max-width:min(440px,46vw)} /* 1枚おきに、絵と文を入れ替える（`.alt`）。入れ替えた側はかたまりごと右へ寄せる —— 位置まで変えないと、 1枚ずつ別の画面なので入れ替わったことが分からない。 **付けるのは HTML 側**（`slide-step alt`）。:nth-of-type だと画面の並びを変えたときに黙ってずれる。 */ .deck.app .slide-step.alt .step{ grid-template-columns:minmax(0,24em) auto; justify-content:end; } .deck.app .slide-step.alt .step > img{grid-column:2;grid-row:1} .deck.app .slide-step.alt .step > figcaption{grid-column:1;grid-row:1} .deck.app .slide-step .step-lead{font-size:clamp(18px,2vw,22px);margin-bottom:14px} .deck.app .slide-step figcaption p:not(.step-lead){font-size:15px;max-width:24em} /* --- 決めていること／入手する --- */ .deck.app .slide .calls{margin-top:4px} .deck.app .slide .btn{margin:6px 12px 6px 0} .deck.app .slide .quiet{margin-top:20px;color:var(--ink-2);font-size:13.5px} .deck.app .slide .linkrow{margin-top:34px} @media (max-width:720px){ .deck.app .slide{padding:100px 34px 80px} /* 横に組めない幅では絵を上、説明を下。絵は幅いっぱいにしない */ /* 横に組めない幅では入れ替えも無し。絵が上、説明が下で揃える */ .deck.app .slide-step .step, .deck.app .slide-step.alt .step{grid-template-columns:minmax(0,1fr);justify-content:start} .deck.app .slide-step .step > img, .deck.app .slide-step.alt .step > img{ grid-column:1;grid-row:1;max-width:min(210px,52vw);max-height:46svh;margin-bottom:22px; } .deck.app .walk.wide .step > img{max-width:100%;max-height:40svh} .deck.app .slide-step .step > figcaption, .deck.app .slide-step.alt .step > figcaption{grid-column:1;grid-row:2} } /* 低い画面ではスナップを切る（自己紹介と同じ理由） */ @media (max-height:640px){ .deck.app .slide{min-height:0;padding:88px 34px} } /* --- 画面送りのドット ---------------------------------------------------- デッキ（自己紹介とアプリの4本）で、全部で何枚あり、いま何枚目かを示す。数はページから数えて `tools/apply-pager.py` が入れる。**手で書かない。** **JavaScript が無くても成立させること。** ドットはなので押せば飛ぶし、1枚目に aria-current を付けた状態で出る。 `assets/deck.js` がやるのは、スクロールに合わせて現在地を移すことだけ。 */ .pager{ position:fixed;z-index:60; right:20px;top:50%;transform:translateY(-50%); display:grid;gap:10px;justify-items:center; color:var(--ink-2); } /* 点は 7px だが、押せる範囲は 24px 取る（指でも押せるように） */ .pager a{ width:24px;height:24px; display:grid;place-items:center; border-radius:100px; color:inherit; } .pager a::before{ content:""; width:7px;height:7px;border-radius:50%; background:currentColor;opacity:.3; transition:opacity .2s, transform .2s, background-color .2s; } .pager a:hover::before{opacity:.65} .pager a[aria-current]::before{ background:var(--accent);opacity:1;transform:scale(1.3); } /* 写真の上に乗るので、暗いデッキでは明るめに */ .deck.dark .pager{color:#cdd6e2} @media (max-width:720px){ .pager{right:5px;gap:8px} .pager a{width:22px;height:22px} .pager a::before{width:6px;height:6px} }