/* ------------------------------------------------------------------ 共通スタイル。色はトークンで持ち、アプリごとの色は .t-* クラスで差し替える。 **インラインの style="--accent:…" で書かないこと** —— インラインは @media より強いので、暗い配色に切り替わらなくなる。 ------------------------------------------------------------------ */ /* 欧文だけ表示用の書体（Instrument Sans）を当てている。読み込みは各ページの（tools/chrome.py の FONT_LINKS）。和文は端末側の書体に任せる —— 和文の webfont は数百 KB になり、Mac/iOS が大半のこのサイトでは割に合わない。 */ :root{ /* --- 地と文字（青に寄せた無彩色） --- */ --paper:#f6f8fb; --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; --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif; --w:880px; } @media (prefers-color-scheme: dark){ :root{ --paper:#0a0d15; --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} /* --- 動き ------------------------------------------------------------ 初回だけ、ほんの少し持ち上げて出す。速さで気持ちよさを出したいので長くしない。動きを減らす設定の人には一切出さない。 */ @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both} .rise:nth-child(2){animation-delay:.05s} .rise:nth-child(3){animation-delay:.1s} .rise:nth-child(4){animation-delay:.15s} @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)} /* --- トップのヒーロー -------------------------------------------------- */ .hero{position:relative;padding:76px 0 12px} /* 名前のうしろに、ごく淡い光を敷く。輪郭を出さずに奥行きだけ足す。上へはみ出させないこと —— ヘッダーはすりガラスで地の色が 7割乗るので、はみ出した分だけ明るさが変わり、ヘッダーの下端に横線が出てしまう。 */ .hero::before{ content:"";position:absolute;z-index:-1; left:-12%;right:-12%;top:0;height:420px; background:radial-gradient(46% 52% at 22% 34%, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),0) 70%); pointer-events:none; } .eyebrow{ font-size:11.5px;letter-spacing:.2em;color:var(--ink-3); margin-bottom:18px;text-transform:uppercase; } .lead{ font-family:var(--serif); font-size:clamp(24px,5.4vw,34px); line-height:1.7;letter-spacing:.03em;font-weight:500; } .lead.name{ font-family:var(--sans); font-weight:700; font-size:clamp(38px,8vw,60px); letter-spacing:-.035em; line-height:1.05; } .lede{margin-top:22px;color:var(--ink-2);font-size:15.5px;max-width:32em} /* --- プロフィール写真 -------------------------------------------------- */ .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)); } .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); } .card-icon.mono{ display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:23px;color:#fff;box-shadow:none; } .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} /* note のように文字を字面として置くアイコン。丸ゴシックの本文と大きさを揃える */ .card-icon.mono.word{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em} /* --- 自己紹介（一問一答） --------------------------------------------- 問いと答えを縦に積む。和文は横に長くなるので、左右2列にすると答えの行がぶつ切りになって読みにくい。 */ .doc .qa{margin-top:10px} .qa dt{ position:relative; font-size:14.5px;font-weight:700;letter-spacing:.01em; padding-top:24px;margin-top:24px;padding-left:20px; border-top:1px solid var(--line-2); } .qa dt:first-of-type{margin-top:20px;border-top:none} /* 問いの頭に短い縦棒。番号や Q. より静かで、答えとの境目がはっきりする */ .qa dt::before{ content:"";position:absolute;left:0;top:calc(24px + .58em); width:3px;height:1em;border-radius:2px;background:var(--accent); } .qa dt:first-of-type::before{top:.58em} .qa dd{margin-top:8px;margin-left:20px;font-size:15px;color:var(--ink-2)} .qa dd strong{font-weight:700;color:var(--ink)} .qa dd a{color:var(--accent);text-decoration:none} .qa dd a:hover{text-decoration:underline;text-underline-offset:3px} .qa dd ul{list-style:none;margin-top:4px} .qa dd li{padding-left:1.05em;position:relative;margin-bottom:6px} .qa dd li:last-child{margin-bottom:0} .qa dd li::before{ content:"";position:absolute;left:0;top:.82em; width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.6; } /* --- 見出しの帯（アプリのページ／自己紹介／お問い合わせ） ---------------- */ .app-hero,.page-hero{ position:relative; padding:60px 0 52px; border-bottom:1px solid var(--line); overflow:hidden; } .app-hero::before,.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%); } .app-hero .icon,.page-hero .avatar{ width:88px;height:88px;border-radius:21px;display:block; box-shadow:var(--shadow-lift);margin-bottom:24px; } .app-hero h1,.page-hero h1{font-size:clamp(30px,6.4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.25} .app-hero .sub,.page-hero .sub{margin-top:14px;font-family:var(--serif);font-size:17px;letter-spacing:.03em;color:var(--ink)} .app-hero .meta,.page-hero .meta{margin-top:22px;font-size:12.5px;color:var(--ink-2);letter-spacing:.05em} /* 読み幅は中身に効かせる。ラッパーを細めると左端がヒーローとずれる */ .body > *{max-width:38em} .body h2{ font-size:11.5px;letter-spacing:.2em;color:var(--ink-3); text-transform:uppercase; margin:48px 0 18px;font-weight:600; } .body h2:first-child{margin-top:0} .body p{margin-bottom:14px;font-size:15px} .body ul{list-style:none;margin-bottom:14px} .body li{font-size:15px;padding-left:1.15em;position:relative;margin-bottom:10px} .body li::before{ content:"";position:absolute;left:0;top:.8em; width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6; } .body strong{font-weight:700} .body .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} .hero{padding:52px 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%} }