@charset "UTF-8"; /* ============================================================= rurucoa.com 共通スタイル ■ 色・太さ・余白・フォントは、すぐ下の :root の値だけを書き換えれば 全ページに反映されます。各ページのHTMLを触る必要はありません。 ■ このサイトの決めごと ・文字色は灰色 1色に統一（リンクも同じ色。訪問後に紫にならない） ・下線は一切使わない ・トップのタイトルと全ページのメニューは、文字を選択できない ・メニューの反応は「色を変えず」に、右へ少し寄る＋「・」の印で示す ============================================================= */ :root { /* ---- 色 ------------------------------------------------ */ /* 文字色。サイト全体でこの1色。 もっと黒に寄せたいときは #3a3a3a、 もっとグレーに寄せたいときは #5a5a5a あたり。 */ --ink: #4a4a4a; --paper: #ffffff; /* トップ以外の背景（白） */ --placeholder: #f0eeec; /* 画像が未設置のときに見える下地 */ /* ---- 文字の太さ ---------------------------------------- */ /* 砧書体 新エンピツ StdN は 400（標準）と 700（太字）が使えます。 線が細くて読みにくかったため 700 にしています。 細くしたいときは 400 に戻してください。 */ --weight: 700; /* ---- トップページの背景イラスト ------------------------ */ /* img/bg.jpg が背景になります。読み込めない場合は下の --top-fallback が出るので、ページが崩れることはありません。 */ --top-image: url("../img/bg.jpg?v=c6408226"); --top-fallback: linear-gradient(160deg, #f4f1ee 0%, #e8e3dc 55%, #ded8d0 100%); /* イラストの「どこを中心に見せるか」。画面の形に合わせて切り取られるため、 見せたい部分がずれる場合はここを調整します。 例: center top / center 30% / left center */ --top-position: center; /* イラストの上にかける薄い白。 いまのイラストは全体が明るいパステル調で、白をかけなくても 灰色の文字が読めるため 0（かけない）にしている。 暗いイラストに差し替えて文字が読みにくくなったら、 0.2 → 0.4 のように数値を上げてください。 */ --top-veil: rgba(255, 255, 255, 0); /* ---- 寸法 ---------------------------------------------- */ --nav-width: 11rem; /* スマホのとき、画面上端に固定したメニューの下から本文を始めるための余白。 メニューが本文に重なる／離れすぎる場合はここを調整します（PCでは未使用）。 */ --nav-bar-space: 6.5rem; /* 日付「2026 07 27」の数字のあいだの空き幅。 マイナスの値も使えます（空白の幅を削る指定になります）。 0.2em … はっきり離れる -0.28em … ほぼくっついて見える（いまここ） -0.4em … 完全に一体化して「20260727」のように見える */ --date-gap: -0.28em; /* ---- フォント ------------------------------------------ */ /* Adobe Fonts の「砧書体 新エンピツ StdN」（キットID: zoh7mfd）。 読み込み用のコードは各HTMLの に入れてあります。 ★ 2番目以降は「控え」です。Adobe Fonts の読み込みに失敗したときに 文字が消えないための保険なので、消さないでください。 */ --font: "kinuta-shin-enpitsu-stdn", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; } /* ============================================================= 土台 ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* スマホを横向きにしたとき文字が勝手に拡大するのを防ぐ */ color-scheme: light; /* 端末のダークモードで白背景が反転しないように固定 */ } body { margin: 0; font-family: var(--font); font-size: 16px; font-weight: var(--weight); line-height: 1.9; letter-spacing: 0.04em; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } /* リンクは本文と同じ灰色。訪問後に紫にならないよう明示的に固定。下線も付けない */ a, a:visited, a:hover, a:active { color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; /* スマホでタップしたときの色の点滅を消す */ } /* キーボード操作でも今どこにいるか分かるように（マウス操作では出ません） */ a:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.35em; } /* ============================================================= メニュー（全ページ共通） ・ユーザーが選択できない ・カーソルを合わせると、右へ少し寄って左に「・」が出る（色は変えない） ============================================================= */ .nav { -webkit-user-select: none; user-select: none; } .nav ul { list-style: none; margin: 0; padding: 0; } /* 項目どうしの間隔。狭めたいときはこの数値を小さくします */ .nav li + li { margin-top: 0; } .nav a { position: relative; display: inline-block; padding: 0.15em 0; font-size: 1.05rem; line-height: 1.25; /* 本文より詰めて、メニューを密に見せる */ letter-spacing: 0.22em; transition: transform 0.25s ease; } .nav a::before { content: "・"; position: absolute; left: -1.05em; opacity: 0; transition: opacity 0.2s ease; } .nav a:hover, .nav a:focus-visible { transform: translateX(0.3em); } .nav a:hover::before, .nav a:focus-visible::before { opacity: 1; } /* 今開いているページには印を出したままにする */ .nav a[aria-current="page"]::before { opacity: 1; } /* 動きが苦手な人の端末設定を尊重する */ @media (prefers-reduced-motion: reduce) { .nav a, .nav a::before, .diary-list a, .work-link a::after { transition: none; } } /* ============================================================= トップページ ============================================================= */ .top { background-image: var(--top-image), var(--top-fallback); background-position: var(--top-position); background-size: cover; background-repeat: no-repeat; background-attachment: scroll; /* fixed はスマホで正しく動かないため使わない */ } .top-inner { position: relative; min-height: 100vh; min-height: 100svh; /* スマホのアドレスバーを除いた高さ（対応ブラウザのみ） */ } /* イラストの上にかける薄い白。文字の読みやすさを確保する */ .top-inner::before { content: ""; position: absolute; inset: 0; background: var(--top-veil); pointer-events: none; } .top-title { position: absolute; left: 50%; top: 38%; /* 「中央やや上」。位置を変えたいときはこの % を調整 */ transform: translate(-50%, -50%); z-index: 1; margin: 0; max-width: 88vw; /* 名前が長くなっても画面からはみ出さない */ font-size: clamp(1.9rem, 7vw, 3.6rem); font-weight: var(--weight); line-height: 1.4; letter-spacing: 0.3em; text-indent: 0.3em; /* 字間の分だけ右にずれるのを打ち消して中央に見せる */ text-align: center; -webkit-user-select: none; user-select: none; } /* メニューは全ページ共通で「画面の左下」に固定する。 ページを切り替えても同じ位置に留まり、スクロールしても動かない。 （404ページのメニューは中央に置きたいので、この指定の対象外にしている） */ .top .nav, .page .nav { position: fixed; left: clamp(1.75rem, 5vw, 4rem); bottom: clamp(1.75rem, 5vw, 3.5rem); z-index: 10; } /* ============================================================= トップ以外のページ（背景は白） ============================================================= */ /* メニューが画面左下に固定されるため、本文は1段組みにして 左側にメニュー分の余白を確保する（本文がメニューに重ならないように）。 */ .page { max-width: 64rem; margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem) 6rem; padding-left: calc(var(--nav-width) + clamp(1.5rem, 4vw, 2.5rem)); } .content { min-width: 0; /* 長い文字列でレイアウトが崩れるのを防ぐ */ overflow-wrap: anywhere; /* 長いURLなどが画面からはみ出さないように折り返す */ } /* ============================================================= わたし（プロフィール） ============================================================= */ /* アイコンを左、名前とひとことを右に並べる。 メンバーが増えたら .member のかたまりを下に足すだけで済む形。 */ .member { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 2rem); align-items: center; } .member + .member { margin-top: clamp(2.25rem, 6vw, 3.25rem); } .member-icon { width: clamp(5.5rem, 18vw, 8rem); aspect-ratio: 1 / 1; border-radius: 1.1rem; /* 丸ではなく「角を丸くした四角」 */ object-fit: cover; background: var(--placeholder); /* 画像が未設置でも形が保たれるように */ } .member-name { margin: 0 0 0.4rem; font-size: 1.3rem; font-weight: var(--weight); letter-spacing: 0.2em; } .member-word { margin: 0; } /* ============================================================= にっき（活動記録） ============================================================= */ /* ---- 一覧（にっきページ）: 日付とタイトルを並べ、押すと個別ページへ ---- */ .diary-list { list-style: none; margin: 0; padding: 0; } .diary-list a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.35rem; align-items: baseline; padding: 1.15rem 0; transition: transform 0.25s ease; } /* 押せることは「右へ少し寄る」だけで示す（「・」の印は出さない） */ .diary-list a:hover, .diary-list a:focus-visible { transform: translateX(0.3em); } .diary-list-date { font-size: 0.85rem; letter-spacing: 0.14em; word-spacing: var(--date-gap); white-space: nowrap; } .diary-list-title { font-size: 1.05rem; } /* ---- 個別ページ ---- */ /* 日付は一覧に出ているので、個別ページには表示していない */ .diary-title { margin: 0 0 1.9rem; font-size: 1.45rem; font-weight: var(--weight); letter-spacing: 0.12em; line-height: 1.6; } .diary-body p { margin: 0 0 1em; } .diary-body p:last-child { margin-bottom: 0; } /* 万一ブラウザが日付を電話番号と誤認してリンクにしてしまった場合の保険。 HTMLの format-detection でほぼ防げるが、見た目と誤タップの両方を止めておく。 */ .diary-list-date a { color: inherit; text-decoration: none; pointer-events: none; } /* 本文中で *文字* と囲んだところ。大きく表示する。 大きさを変えたいときは 1.3em の数値を調整してください。 */ .big { font-size: 1.3em; line-height: 1.5; } /* ============================================================= つくった（作品一覧） ============================================================= */ .works-group { margin-bottom: 3.5rem; } .works-group:last-child { margin-bottom: 0; } .works-group-title { margin: 0 0 1.25rem; font-size: 0.9rem; font-weight: var(--weight); letter-spacing: 0.24em; } .work { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.55rem 0; } .work-icon { width: 4.5rem; aspect-ratio: 1 / 1; border-radius: 0.6rem; object-fit: cover; background: var(--placeholder); } .work-name { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: var(--weight); } .work-desc { margin: 0 0 0.5rem; font-size: 0.92rem; } /* 下線を使わないため、リンクだと分かるように「→」を添える。 不要な場合は、この ::after の2ブロックを消してください。 */ .work-link { margin: 0; font-size: 0.88rem; } .work-link a { display: inline-block; } .work-link a::after { content: " →"; display: inline-block; transition: transform 0.25s ease; } .work-link a:hover::after, .work-link a:focus-visible::after { transform: translateX(0.3em); } /* ============================================================= 404（見つからないページ） ============================================================= */ .notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; min-height: 100vh; min-height: 100svh; padding: 2rem 1.5rem; text-align: center; } /* ============================================================= スマホ（幅768px以下）専用 ・メニューは画面の上端に固定し、全ページで同じ位置に置く ・トップのタイトルは画面の上寄りに置く ※ この { } の中は幅768px以下でしか読まれないため、 PC表示には一切影響しません。PC用の指定は上の方にあります。 ============================================================= */ @media (max-width: 768px) { /* ---- メニュー: 画面の上端に固定（ページを移動しても同じ位置） ---- */ .top .nav, .page .nav { position: fixed; top: 0; right: 0; bottom: auto; /* PC用の「下端から」の指定を打ち消す */ left: 0; display: flex; justify-content: center; padding: 1.3rem 1rem 1rem; z-index: 10; } /* トップ以外は本文がメニューの下を通り過ぎるため、白地を敷いて 文字が重なって読めなくなるのを防ぐ */ .page .nav { background: var(--paper); } .nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; /* 横並びのときの項目どうしの間隔 */ } .nav li + li { margin-top: 0; } /* 横並びでは「・」が隣の項目と重なるので、絶対配置をやめる。 ただし今開いているページの印は残したいので、文字の前に普通に並べる。 */ .nav a::before { display: none; } .nav a[aria-current="page"]::before { display: inline; position: static; left: auto; opacity: 1; } /* タップ操作では「右に寄る」動きが分かりにくいので無効化 */ .nav a:hover { transform: none; } /* ---- トップページ: タイトルを画面の上寄りに置く ---- */ /* もっと上げたい/下げたいときは 24vh の数値を調整してください */ .top-inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(6.5rem, 24vh, 11rem) 1.25rem 4rem; } .top-title { position: static; transform: none; } /* ---- トップ以外: 固定したメニューの下から本文を始める ---- */ .page { padding-top: var(--nav-bar-space); padding-left: clamp(1.25rem, 5vw, 2.5rem); padding-right: clamp(1.25rem, 5vw, 2.5rem); } /* ---- にっき一覧: 横に並べる幅が無いので、日付を上・タイトルを下に積む ---- */ .diary-list a { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } .diary-list a:hover { transform: none; } } @media (max-width: 420px) { .work { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; } .work-icon { width: 3.25rem; } }