@charset "utf-8"; /* ========================================================================= 高島宗一郎 非公式ファンサイト — 共通スタイル ページ本体は 520px 幅のスマートフォン向けカラムを基準に組み立てられて いる。このファイルでは 1) 全ページ共通の土台（フォント・スクロール・下部ナビ） 2) PC で見たときの周辺の見せ方 3) プロフィールページのイントロ（SNS風スライドショー） を担当する。 ========================================================================= */ /* Web フォントは各ページの で読み込む（@import はここでの直列読み込みになり表示が遅れる） */ :root { --header-h: 61px; /* 上部の固定ヘッダーの高さ（写真40px + 上下余白 + 罫線） */ --nav-h: 86px; /* 下部タブバーが占める高さ */ --column: 520px; /* 本文カラムの最大幅 */ --navy-900: #050f21; --navy-800: #091a35; --navy-700: #0b1f3d; --navy-600: #13294a; --gold-400: #e8c26a; --gold-500: #d9b45e; --gold-600: #b08a2e; --slate-400: #93a7c4; } * { -webkit-tap-highlight-color: transparent; } html { background: var(--navy-900); /* ページ内リンク（#p03 など）を滑らかに送る */ scroll-behavior: smooth; /* iOS で慣性スクロールを止めない */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Noto Sans JP', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; } /* 画像は object-fit 指定込みで組まれているので、比率を保ったまま潰れないように */ img[style*='object-fit'] { display: block; } a { -webkit-touch-callout: none; } /* ========================================================================= 1. PC 表示 — スマートフォン幅のカラムを、意図した「作品」として見せる ========================================================================= */ @media (min-width: 760px) { body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(72, 130, 255, 0.20), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(176, 138, 46, 0.16), transparent 62%), linear-gradient(180deg, #061224 0%, #050f21 55%, #030a17 100%); } /* 本文カラムを浮かせて、周囲が余白であることを明示する */ body > div > div { position: relative; z-index: 1; } } /* 横に広い端末では、カラムの縁を少しだけ立ち上げる */ @media (min-width: 560px) { body > div > div { border-left: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06); } } /* ========================================================================= 2. 下部タブバー ========================================================================= */ .nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--column); z-index: 130; background: rgba(9, 26, 53, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Noto Sans JP', sans-serif; } .nav__link { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; text-decoration: none; color: var(--slate-400); font-size: 10.5px; font-weight: 700; line-height: 1.2; border-radius: 14px; background-color: transparent; /* ダブルタップ判定の待ち時間をなくして、指に即つくようにする */ touch-action: manipulation; /* ここは「離したあと」の戻り方。押した瞬間は下で 0s に上書きする */ transition: transform .26s cubic-bezier(.2, .8, .3, 1), background-color .3s ease, color .2s ease; } .nav__link.is-active { gap: 4px; color: var(--gold-400); font-weight: 800; } /* 「プロフィール」が 2 行に折り返さないようにする */ .nav__label { white-space: nowrap; } @media (max-width: 374px) { .nav__link { font-size: 9px; } } /* --- 押した感 ------------------------------------------------------------ タブバーは押すとすぐページが切り替わるので、反応をゆっくり効かせると 見えないまま画面が変わってしまう。押した瞬間は transition を 0s にして 即座に沈み込ませ、離したあとだけゆっくり戻す。 is-pressed は js/site.js が付け外しする（iOS の Safari は に :active が効かないことがあるため、CSS だけに頼らない）。 */ .nav__link.is-pressed { transform: scale(.9); background-color: rgba(255, 255, 255, .14); transition-duration: 0s; } .nav__link.is-pressed .nav__badge { filter: brightness(1.15); } /* 中央のホームボタンは、丸ごと縮めず「円が沈み込む」ようにする。 影を浅くすると、物理的に押し込まれたように見える。 */ .nav__link--center.is-pressed { transform: none; background-color: transparent; } .nav__link--center.is-pressed .nav__badge--home { transform: translateY(3px) scale(.92); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition-duration: 0s; } /* JS が動かない環境向けの保険（同じ見え方を :active でも用意しておく） */ .nav__link:active { transform: scale(.9); background-color: rgba(255, 255, 255, .14); transition-duration: 0s; } .nav__link--center:active { transform: none; background-color: transparent; } .nav__link--center:active .nav__badge--home { transform: translateY(3px) scale(.92); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition-duration: 0s; } @media (hover: hover) { .nav__link:hover { color: #cfe0ff; background-color: rgba(255, 255, 255, .06); } .nav__link.is-active:hover { color: var(--gold-400); } } .nav__badge { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, var(--gold-500), var(--gold-600)); align-items: center; justify-content: center; transition: filter .26s ease; } .nav__link.is-active .nav__label { border-bottom: 2px solid var(--gold-500); padding-bottom: 2px; } /* 中央のホームボタンだけ一段せり上がる */ .nav__link--center { gap: 5px; margin-top: -30px; } .nav__badge--home { width: 56px; height: 56px; background: var(--navy-600); border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); box-sizing: border-box; transition: transform .26s cubic-bezier(.2, .8, .3, 1), box-shadow .26s ease, filter .26s ease; } .nav__link--center.is-active .nav__badge--home { background: linear-gradient(160deg, var(--gold-500), var(--gold-600)); border-color: var(--navy-700); } /* 中央ボタンはラベルに下線を引かない */ .nav__link--center.is-active .nav__label { border-bottom: 0; padding-bottom: 0; } /* ========================================================================= 3. プロフィールページのイントロ（SNS風スライドショー） 旧実装は 1080x1920 の合成画面を「上端そろえ」で置いたうえに、編集用の 再生バー 44px 分を高さから引いていたため、写真の中心が画面の中心より 下にずれていた。ここでは - ビューポート = ヘッダー下端から画面下端までの実寸 - ステージ = translate(-50%,-50%) で厳密に中央へ - 拡大率 = 幅を基準に合わせ、足りない高さはステージを伸ばして埋める という組み方にして、縦横どちらの中心軸もビューポート中心に一致させる。 ========================================================================= */ .intro { position: fixed; top: var(--header-h); bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--column); z-index: 100; background: var(--navy-700); overflow: hidden; /* 再生中は下のページをスクロールさせない */ overscroll-behavior: contain; touch-action: none; } .intro[hidden] { display: none; } .intro__viewport { position: absolute; inset: 0; overflow: hidden; opacity: 1; transition: opacity .6s ease; /* 合成レイヤーを固定して、再生中の再ラスタライズを防ぐ */ will-change: opacity; contain: layout paint; } /* 冒頭に映る写真のデコードが済むまでは見せない（読み込み途中の画を出さない） */ .intro:not(.is-ready) .intro__viewport { opacity: 0; } .intro.is-fading .intro__viewport { opacity: 0; } /* --- レターボックスを埋める背景 ----------------------------------------- */ .intro__backdrop { position: absolute; inset: 0; background: #f3f2f2; /* 合成画面の地色。グリッド表示中はこの色で継ぎ目が消える */ transition: background-color .45s ease; } .intro__backdrop.is-photo { background: #0c0b0b; } /* --- 1080x1920 の合成ステージ ------------------------------------------- */ .intro__stage { position: absolute; /* 左上を表示領域の中心に置き、そこから自分の半分だけ戻して中央へ。 inset:0 + margin:auto は「要素が親より大きいと左マージンが 0 に 丸められる」（CSS 2.1 §10.3.7）ため、1080px 幅のこのステージでは 横方向の中央寄せに使えない。translate(-50%,-50%) は要素自身の ボーダーボックス基準なので、幅・高さがいくつでも必ず中心が合う。 */ left: 50%; top: 50%; width: 1080px; /* 高さは表示領域に合わせて JS が伸ばす（下端に帯を残さないため） */ height: 1920px; /* 中心を軸に拡大縮小するので、中心はビューポート中心から動かない */ transform: translate(-50%, -50%) scale(var(--intro-scale, .36)); transform-origin: 50% 50%; background: #f3f2f2; color: #201e1d; font-family: 'Archivo', 'Noto Sans JP', sans-serif; overflow: hidden; will-change: transform; backface-visibility: hidden; } /* カメラ（プロフィール画面全体を動かすレイヤー） */ .gv__camera { position: absolute; left: 0; top: 0; width: 1080px; height: 3929px; /* ヘッダー680 + 9行 x (358+3) */ transform-origin: 0 0; will-change: transform; backface-visibility: hidden; } .gv__header { position: absolute; left: 0; top: 0; width: 1080px; height: 680px; background: #f3f2f2; } .gv__clock { position: absolute; left: 40px; top: 22px; font-size: 34px; font-weight: 600; letter-spacing: .04em; } .gv__status { position: absolute; right: 40px; top: 34px; display: flex; gap: 8px; } .gv__bar { width: 26px; height: 18px; background: #201e1d; } .gv__bar--dim{ opacity: .55; } .gv__batt { width: 44px; height: 18px; border: 3px solid #201e1d; box-sizing: border-box; } .gv__id { position: absolute; left: 40px; top: 110px; display: flex; gap: 44px; align-items: center; } .gv__avatar { width: 210px; height: 210px; object-fit: cover; display: block; } .gv__name { font-size: 64px; font-weight: 700; line-height: 1.15; } .gv__rule { width: 76px; height: 6px; background: #ec3013; margin: 16px 0 18px; } .gv__role { font-size: 34px; font-weight: 500; letter-spacing: .02em; } .gv__bio { position: absolute; left: 40px; right: 40px; top: 350px; font-size: 29px; line-height: 1.65; letter-spacing: .01em; } .gv__divider { position: absolute; left: 40px; right: 40px; bottom: 88px; border-top: 2px solid #201e1d; } .gv__tab { position: absolute; left: 40px; bottom: 26px; font-size: 30px; font-weight: 600; letter-spacing: .06em; } .gv__tabRule { width: 100%; height: 5px; background: #ec3013; margin-top: 8px; } .gv__count { position: absolute; right: 40px; bottom: 34px; font-size: 28px; opacity: .55; } .gv__grid { position: absolute; left: 0; top: 680px; width: 1080px; display: grid; grid-template-columns: repeat(3, 358px); gap: 3px; background: #201e1d; } .gv__tile { width: 358px; height: 358px; overflow: hidden; } .gv__tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* タップされたタイルを示す赤枠 */ .gv__tap { position: absolute; width: 358px; height: 358px; border: 7px solid #ec3013; box-sizing: border-box; opacity: 0; will-change: opacity; } /* 全画面の写真カット */ .gv__feature { position: absolute; inset: 0; overflow: hidden; background: #0c0b0b; visibility: hidden; will-change: opacity; } .gv__feature.is-on { visibility: visible; } .gv__featureBg, .gv__featureImg { position: absolute; inset: 0; width: 100%; height: 100%; } .gv__featureBg { object-fit: cover; filter: blur(40px) brightness(.5); transform: scale(1.3); } .gv__featureImg { object-fit: contain; will-change: transform; backface-visibility: hidden; } /* --- スキップボタン ------------------------------------------------------ */ .intro__skip { position: absolute; bottom: calc(104px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 10; background: rgba(9, 26, 53, .86); color: #fff; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 10px 22px; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: opacity .25s ease, transform .18s ease, background-color .18s ease; } .intro__skip:active { transform: translateX(-50%) scale(.95); } @media (hover: hover) { .intro__skip:hover { background: rgba(19, 41, 74, .95); } } /* イントロ再生中は本文をスクロールさせない */ body.is-intro-locked { overflow: hidden; } /* ========================================================================= 4. 動きを抑える設定への配慮 ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .intro__viewport, .intro__backdrop, .intro__skip { transition: none; } /* 押した手応えは操作に対する返事なので残す。動き（縮小・沈み込み）だけ やめて、色の変化で伝える。 */ .nav__link, .nav__badge--home { transition: background-color .01s linear; } .nav__link.is-pressed, .nav__link:active { transform: none; } .nav__link--center.is-pressed .nav__badge--home, .nav__link--center:active .nav__badge--home { transform: none; } .nav__link--center.is-pressed, .nav__link--center:active { background-color: rgba(255, 255, 255, .14); } }