@charset "UTF-8"; /* ============================================================ 丸天産業 AI診断アンケート Phase1：テーマ選択 → 設問回答 → スコア速報 ============================================================ */ /* 補助テキストの下限は11px。 欧文なら10pxでも読めるが、日本語は漢字の画数があるため 11pxを下回ると、特にスマホで急に読みづらくなる。 （2026-08-17 デザインレビューを受けて、10〜10.5pxを一律11pxに） ------------------------------------------------------------ */ /* ------------------------------------------------------------ 1. デザイントークン ------------------------------------------------------------ */ :root{ /* 面 */ --cream:#FBF8F3; --white:#FFFFFF; --sand:#F0E7DA; --line:#E7DFD2; --line-soft:#F0E9DE; /* 文字 */ --navy:#1B2A4A; --navy2:#2C3F63; --ink:#3D4A63; /* 補助テキスト。#6C7C96 はクリーム地でコントラスト比4.00、白地で4.23と、 小さい文字の基準（4.5:1）に届いていなかったため一段濃くした。 #5A6A84 はクリーム地5.18／白地5.48／サンド地4.48。見た目の印象は変えていない。 */ --navy-soft:#5A6A84; --apricot:#E8B48A; /* テーマ色（JSから --theme に流し込む） */ /* テーマ色。#C75B26 は白地でコントラスト4.24、サンド地で3.46と、 小さい文字の基準（4.5:1）に届いていなかったため一段濃くした。 #B75322 は白地4.91／クリーム地4.64／サンド地4.01。色みは変えていない。 */ --orange:#B75322; --theme:var(--orange); /* 余白 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px; --s8:60px; /* 文字サイズ */ --fs-xs:11px; --fs-sm:12.5px; --fs-md:14.5px; --fs-lg:17px; --fs-xl:21px; --fs-2xl:29px; /* 角丸 */ --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:99px; /* 動き */ --ease:cubic-bezier(.22,.61,.36,1); --bounce:cubic-bezier(.34,1.56,.64,1); /* 「はずむ」用 */ /* 紙の質感（SVGノイズをデータURIで埋め込み。外部画像は使わない） ─ 画像ファイルを読み込まないため表示が速く、PDF出力にも影響しない ─ 濃度は rect の opacity で調整する */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); /* 背景画像に重ねる白のベール。 数値を下げるほど背景の曲線が強く出る（0.70＝かなり見える／0.92＝ほぼ無地） */ --veil:rgba(255,255,255,.86); } /* 本文へのスキップリンク（アクセシビリティ） ふだんは画面の外に逃がしておき、Tabキーで focus が当たったときだけ現れる。 display:none で隠すと、そもそも focus が当たらず機能しないため、 位置で逃がす方法を使う。 */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100; background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0; font-size:14px;text-decoration:none} .skip-link:focus{left:0} /* ------------------------------------------------------------ 2. ベース ------------------------------------------------------------ */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* hidden属性は display の指定より優先させる （.btn-primary の display:block に負けて、空のボタンが表示される不具合を防ぐ） */ [hidden]{display:none !important} body{ background-color:#fff; color:var(--navy); font-family:'Hiragino Sans','Yu Gothic UI','Noto Sans JP','Meiryo',sans-serif; font-size:var(--fs-md); line-height:1.9; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit} /* ------------------------------------------------------------ 背景画像「はたらく」を、はずませよう ─ 素材は左3割が意図的に白紙。「絵柄は右・文字は左」の前提で作られている。 そのため background-position を右寄せにして、その意図どおりに使う。 ─ 色は原寸のまま（ベールで薄めない）。 ─ 適用はトップ画面のみ。設問や結果は文章を読む画面なので白地にする。 10問を読み続ける画面に模様を敷くと、目が疲れて離脱の原因になるため。 ------------------------------------------------------------ */ /* ------------------------------------------------------------ 背景の模様：画面に固定し、その上をコンテンツがスクロールしていく ─ background-attachment:fixed は iOS Safari で不安定なため、 position:fixed の専用レイヤーで実装する（全端末で確実に固定される） ─ 画面いっぱい（cover）に広げて見える範囲を最大にする ─ 上部は模様の色をほぼそのまま、下へいくほど白を重ねて文字を読みやすくする ------------------------------------------------------------ */ html{background:#fff} body{position:relative;background:transparent} body::before{ content:''; position:fixed; inset:0; z-index:-1; /* 本文より奥、htmlの白より手前 */ pointer-events:none; /* 背景の模様（2026-08-15 軽量化） 元は 3508×1974px・webp143KB＋png292KB の2枚組だった。 画面いっぱいに敷く装飾なので、2000×1125px・品質90 に落としても 見た目の違いは出ない（実機で並べて確認済み）。77KB になった。 PNGの控えは外した。webpに対応しない環境では模様が出ないだけで、 白い背景として成立し、文字の読みやすさには影響しないため。 */ background-image: linear-gradient(to bottom, rgba(255,255,255,.10) 0, rgba(255,255,255,.55) 42%, rgba(255,255,255,.78) 78%, rgba(255,255,255,.82) 100%), url("../img/hataraku-bg.webp"); background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:cover, cover; } /* スマホは画面が狭く、絵柄と文字を左右に分けられない（PCは絵柄が右・文字が左で分離できる）。 同じ濃度を共用すると必ず見出しと曲線が重なるため、スマホだけ白を強める。 */ @media (max-width:767px){ body::before{ background-image: linear-gradient(to bottom, rgba(255,255,255,.56) 0, rgba(255,255,255,.80) 42%, rgba(255,255,255,.90) 78%, rgba(255,255,255,.92) 100%), url("../img/hataraku-bg.webp"); } } /* --- 案A：模様の上に直接置く「文字」だけ、白い面に載せて読めるようにする --- */ .hd .r{ background:rgba(255,255,255,.92); border-radius:var(--r-pill); padding:5px 14px; } .pick-label{ display:block;width:fit-content; background:rgba(255,255,255,.92); border-radius:var(--r-pill); padding:7px 18px; margin:var(--s3) 0 var(--s3); } .wrap{max-width:430px;margin:0 auto;padding:0 var(--s4)} /* 小さめのタブレットや、ウィンドウを半分にして見る場合の中間幅。 430pxのままだと左右が大きく余って、内容だけが細く中央に残ってしまう。 広げすぎると1行が長くなって読みにくいので、560pxで止めている。 */ @media (min-width:600px) and (max-width:767px){ .wrap{max-width:560px;padding:0 var(--s5)} } .screen{display:none} .screen.active{display:block;animation:fadeUp .5s var(--ease) both} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ヘッダー */ .hd{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) 0 0} /* ロゴはトップへ戻る導線。押せることが分かるようにする */ /* ロゴは