/* ============================================================ bondband corporate site — custom styles Base: Bootstrap 5 (CDN) ============================================================ */ :root { --bb-red: #e2311d; --bb-orange: #f7931e; --bb-gold: #fdb913; --bb-dark: #15181f; --bb-navy: #1c2333; --bb-sns-bg: #111111; /* SNSアイコンの丸い地色 */ --bb-gray-bg: #f6f6f7; --bb-text: #2b2b2b; --bb-gradient: linear-gradient(90deg, var(--bb-red) 0%, var(--bb-orange) 55%, var(--bb-gold) 100%); /* 本文はbodyのNoto Sans JP。英字の装飾（セクション見出しの透かし・数字・番号バッジ等） だけはセリフ体にしてコントラストを付ける。書体を変えるならここ1箇所でまとめて効く */ --bb-font-serif: Georgia, "Times New Roman", serif; /* サブページFVの英文キャッチ（.bb-page-hero__eyebrow-text）だけに使う手書き風フォント。 読み込みは about-1.html の Google Fonts のみ（他ページでは使っていない）。 別の書体に変えたい場合はここだけ差し替える（Yellowtail / Sacramento / Great Vibes 等） */ --bb-font-hand: "Kaushan Script", "Caveat", cursive; /* ヘッダー／フッター用。ほぼ黒に近い紺地に、鮮やかな青の光が斜めから 滲むように差し込むグロー効果（参考: SalesPortのブランドカード）。 地色はプルシアンブルー、光の色はビビッドな電光ブルー */ --bb-navy-glow-base: #030c22; --bb-navy-glow: radial-gradient(130% 190% at 20% 130%, #1c5df1 0%, rgba(28, 93, 241, 0) 55%), radial-gradient(100% 150% at 85% -40%, rgba(70, 110, 220, 0.4) 0%, rgba(70, 110, 220, 0) 60%); /* 額縁レイアウト。縁の太さ・地色・罫線色・上辺（ヘッダー）の高さ。 本文の余白もヘッダーの位置もここから出すので、変えるならこの4つだけ */ --frame-w: 14px; --frame-bg: #fff; --frame-rule: rgba(28, 35, 51, 0.16); --bar-h: 58px; --logo-slot: 220px; /* ヘッダー下辺の弧（アーチ）の深さ。ナビの高さ(--bar-h)には含めない、 純粋に装飾用の余白 */ --header-arc: 22px; /* 縦ナビ（.bb-side-nav）の帯幅。ナビ自体の幅と、本文側に空ける 右余白(body[data-nav="side"])の両方をここから出す */ --side-nav-w: 136px; } @media (max-width: 767.98px) { :root { --side-nav-w: 96px; } } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--frame-w) + var(--bar-h) + var(--header-arc) + 16px); /* .bb-map-arc / .bb-footer-arc など、演出用に画面幅より広い要素をわざと はみ出させている箇所があるため、横スクロールバーが出ないよう封じる */ overflow-x: hidden; } /* 上は額縁の上辺＋ヘッダー（弧の部分も含む）、下は額縁の下辺のぶんだけ空ける。 左右は空けない。全幅の背景を持つ節を画面端まで通したいので、 縁は本文の上に重ねて切り取る形にしている */ body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; color: var(--bb-text); background-color: var(--frame-bg); padding-top: calc(var(--frame-w) + var(--bar-h) + var(--header-arc)); padding-bottom: var(--frame-w); /* overflow-xはhtml側だけに付ける。html・body両方に付けると両方が スクロールコンテナ扱いになり、Missionセクションの多重position:sticky （写真ズーム＋見出しカードの2段sticky）の計算が壊れてしまう。 */ } /* ---------- ヘッダー無しレイアウト（）---------- 上部の余白は額縁ぶんだけにし、代わりに右側へ縦ナビの帯ぶんの余白を空ける。 index.html だけの試作なので、他ページは従来どおり上部ヘッダー用の余白のまま。 */ html[data-nav="side"] { scroll-padding-top: calc(var(--frame-w) + 16px); } html[data-nav="side"] body { padding-top: var(--frame-w); padding-right: var(--side-nav-w); } a { text-decoration: none; } /* ============================================================ Loading（ロゴを見せる読み込み画面） 読み込み中は で背後のスクロールを止め、 完了すると .bb-loader に .is-done が付いて上方向に開きながら消える。 ============================================================ */ html.is-loading, html.is-loading body { overflow: hidden; } /* 幕そのものは透明な入れ物。白地は中の縦パネルが受け持つ */ .bb-loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; } /* 開き終わったら描画対象から完全に外す */ .bb-loader.is-hidden { display: none; } /* ---- 幕を構成する縦パネル ---- */ /* 6枚を横に並べ、左から順に少しずつ遅らせて上へ引き上げる。 1枚の板が上がるより、細い板が波打つように抜けるほうが動きが出る */ .bb-loader__panels { position: absolute; inset: 0; display: flex; } .bb-loader__panels span { position: relative; flex: 1; background: #fff; will-change: transform; transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1); transition-delay: calc(var(--i, 0) * 0.07s); /* 板の継ぎ目に隙間が出ないよう、隣とわずかに重ねる */ margin-right: -1px; } /* 幕が開き始めたら、まだ要素が残っていてもクリックは背後のページへ通す */ .bb-loader.is-done { pointer-events: none; } .bb-loader.is-done .bb-loader__panels span { transform: translateY(-100%); } /* 引き上がる板の下端にグラデーションの線を出し、光が上へ抜けるように見せる */ .bb-loader__panels span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bb-gradient); opacity: 0; transition: opacity 0.3s ease; transition-delay: calc(var(--i, 0) * 0.07s); } .bb-loader.is-done .bb-loader__panels span::after { opacity: 0.9; } .bb-loader__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.6rem; } /* 退場が始まったら、ロゴ以外は先に引いて主役を1つに絞る */ .bb-loader.is-exiting .bb-loader__bar, .bb-loader.is-exiting .bb-loader__mark { opacity: 0; transition: opacity 0.35s ease; } /* ロゴの背後で薄く回り続けるシンボルマーク */ .bb-loader__mark { position: absolute; top: 50%; left: 50%; width: clamp(150px, 24vw, 210px); translate: -50% -50%; opacity: 0.07; animation: bb-loader-spin 14s linear infinite; } @keyframes bb-loader-spin { to { rotate: 360deg; } } .bb-loader__logo { width: clamp(150px, 26vw, 230px); opacity: 0; animation: bb-loader-logo-in 1s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes bb-loader-logo-in { from { opacity: 0; translate: 0 14px; scale: 0.96; filter: blur(6px); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } } /* 進捗バーの溝。 fill-mode に forwards ではなく backwards を使うのは、退場時に .is-exiting で opacity を上書きできるようにするため。アニメーションの forwards が残っていると 後から書いたクラスの指定より強く、フェードアウトが効かなくなる。 backwards なら遅延中だけ from（透明）を保ち、終わったら下の opacity:1 に戻る */ .bb-loader__bar { position: relative; width: clamp(120px, 20vw, 180px); height: 2px; border-radius: 2px; overflow: hidden; background: rgba(28, 35, 51, 0.12); opacity: 1; animation: bb-loader-fade-in 0.6s 0.5s ease backwards; } @keyframes bb-loader-fade-in { from { opacity: 0; } to { opacity: 1; } } /* 溝の中を左から右へ伸びるグラデーション */ .bb-loader__bar i { position: absolute; inset: 0; transform-origin: left center; background: var(--bb-gradient); scale: 0 1; animation: bb-loader-bar 1.5s 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes bb-loader-bar { from { scale: 0 1; } to { scale: 1 1; } } /* 動きを抑える設定の環境では、板の引き上げもロゴの移動も行わず、 全体を静かにフェードさせるだけにする */ @media (prefers-reduced-motion: reduce) { .bb-loader { transition: opacity 0.4s ease; } .bb-loader.is-done { opacity: 0; } .bb-loader.is-done .bb-loader__panels span { transform: none; transition: none; } .bb-loader__panels span::after { display: none; } .bb-loader__mark, .bb-loader__logo, .bb-loader__bar, .bb-loader__bar i { animation: none; opacity: 1; } .bb-loader__mark { opacity: 0.07; } .bb-loader__bar i { scale: 1 1; } } /* ---------- 額縁 ---------- 四辺を地色の帯で覆い、その内側に細い罫線を1本引く。 本文は帯の下を流れて四辺で切り取られるので、ページが一枚の紙のように見える。 帯は border ではなく実体のある4枚にしている。border だと本文が縁の外まで 描かれてしまい、全幅の背景（グレーの節・写真の節）が画面端まで抜けてしまう。 重なり順は、通常の本文より上・Our Productの詳細パネル(1050)とその背景(1040)より下。 モーダルを開いたときだけ額縁の上に出るようにするため。 */ /* 地色は4枚の帯にだけ乗せる。共通側(.bb-frame span)に background を書くと 「クラス＋要素型」で詳細度が上がり、罫線側(.bb-frame__rule)の指定に勝ってしまう。 罫線は画面いっぱいに広がる要素なので、そうなると全面が地色で塗り潰される */ .bb-frame span { position: fixed; z-index: 1035; pointer-events: none; } .bb-frame__t, .bb-frame__b, .bb-frame__l, .bb-frame__r { background: var(--frame-bg); } .bb-frame__t { top: 0; left: 0; right: 0; height: var(--frame-w); } .bb-frame__b { bottom: 0; left: 0; right: 0; height: var(--frame-w); } .bb-frame__l { top: 0; bottom: 0; left: 0; width: var(--frame-w); } .bb-frame__r { top: 0; bottom: 0; right: 0; width: var(--frame-w); } .bb-frame__rule { inset: var(--frame-w); border: 1px solid var(--frame-rule); } /* ---------- Side Nav（ヘッダー無しレイアウトの試作）---------- 画面右端に額縁と一体化した縦の帯を常時固定表示し、ヘッダーの役割を丸ごと置き換える。 開閉はせず、リンクは常に見えている。ロゴは列の一番上＝画面右上に固定。 index.html のみ（）で使用。 */ .bb-side-nav { position: fixed; top: var(--frame-w); right: var(--frame-w); bottom: var(--frame-w); z-index: 1036; width: var(--side-nav-w); display: flex; flex-direction: column; align-items: center; background: var(--frame-bg); border-left: 1px solid var(--frame-rule); padding: 1.6rem 0.6rem 1.4rem; overflow-y: auto; } .bb-side-nav__group { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bb-side-nav__list { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; list-style: none; margin: 0; padding: 0; text-align: center; } .bb-side-nav__link { font-weight: 600; font-size: 0.82rem; line-height: 1.4; color: var(--bb-text); transition: color 0.25s ease; } .bb-side-nav__link:hover, .bb-side-nav__link:focus-visible { color: var(--bb-red); } .bb-side-nav__link[aria-current="page"] { color: var(--bb-red); } .bb-side-nav__link--cta { display: inline-block; margin-top: 0.3rem; background: var(--bb-gradient); color: #fff; font-weight: 700; border-radius: 999px; padding: 0.5rem 1rem; white-space: nowrap; transition: filter 0.25s ease; } .bb-side-nav__link--cta:hover { color: #fff; filter: brightness(1.05); } .bb-side-nav__sns { display: flex; gap: 0.5rem; margin-top: 0.9rem; } .bb-side-nav__logo { margin-bottom: 0.8rem; } .bb-side-nav__logo img { display: block; width: 96px; height: auto; } @media (max-width: 767.98px) { .bb-side-nav { padding: 1.3rem 0.4rem 1rem; } .bb-side-nav__list { gap: 0.85rem; } .bb-side-nav__link { font-size: 0.72rem; } .bb-side-nav__link--cta { padding: 0.42rem 0.7rem; } .bb-side-nav__logo img { width: 60px; } } /* ---------- Mobile Nav（〜767px）---------- 右端の縦ナビ(.bb-side-nav)は帯幅ぶん(--side-nav-w)を本文から恒久的に奪う。 390px幅の端末ではそれが画面の1/4にあたり、本文が280px程度しか残らないため、 見出しの透かし文字や本文が軒並み画面外へはみ出していた。 〜767pxでは縦ナビを畳み、上端バー＋全画面メニューに置き換えて本文を全幅に戻す。 768px以上では .bb-mnav-bar / .bb-mnav とも display:none。 */ /* 上端バーの高さ。body の padding-top と .bb-mnav の top をここから出す */ :root { --mnav-h: 52px; } .bb-mnav-bar, .bb-mnav-circle, .bb-mnav { display: none; } .bb-mnav-bar { position: fixed; top: var(--frame-w); left: var(--frame-w); right: var(--frame-w); height: var(--mnav-h); z-index: 1037; /* .bb-side-nav(1036)より上、Our Productの詳細パネル(1050)より下 */ align-items: center; justify-content: space-between; padding: 0 0.9rem; background: var(--frame-bg); border-bottom: 1px solid var(--frame-rule); } .bb-mnav-bar__logo img { display: block; height: 26px; width: auto; } /* ハンバーガー。3本線が開いたときに×へ変形する */ .bb-mnav-toggle { position: relative; width: 44px; /* タップ領域は44px角を確保する */ height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 1; } .bb-mnav-toggle span { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--bb-text); border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; } .bb-mnav-toggle span:nth-child(1) { top: 15px; } .bb-mnav-toggle span:nth-child(2) { top: 21px; } .bb-mnav-toggle span:nth-child(3) { top: 27px; } .bb-mnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bb-mnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .bb-mnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* 全画面メニュー。バーの下端から額縁の内側いっぱいに広がる。 白い面そのものは .bb-mnav-circle（中央から広がる円）が作るので、この要素自体は 透明にしてリンクを載せるだけの器にしている。 閉じている間は visibility:hidden なので、キーボードのフォーカスも読み上げも入らない */ .bb-mnav { position: fixed; top: calc(var(--frame-w) + var(--mnav-h)); left: var(--frame-w); right: var(--frame-w); bottom: var(--frame-w); z-index: 1036; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 1.5rem 1rem; background: transparent; overflow-y: auto; visibility: hidden; } .bb-mnav.is-open { visibility: visible; } .bb-mnav__list { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; text-align: center; } .bb-mnav__list a { display: block; padding: 0.3rem 0.6rem; font-weight: 700; font-size: 1.05rem; color: var(--bb-text); } .bb-mnav__list a[aria-current="page"] { color: var(--bb-red); } .bb-mnav__cta { display: inline-block; margin-top: 0.4rem; padding: 0.75rem 2.2rem; background: var(--bb-gradient); color: #fff; font-weight: 700; border-radius: 999px; white-space: nowrap; } .bb-mnav__cta:hover, .bb-mnav__cta:focus-visible { color: #fff; } .bb-mnav__sns { display: flex; gap: 0.9rem; margin-top: 0.6rem; } /* ---- 開くときの演出（中央から円が広がってメニュー面になる）---- 円は2枚重ねてある。先に走るのがブランドのグラデーション（赤→オレンジ→ゴールド）で、 0.25秒遅れて白い円が追いかけ、最終的にその白がメニューの地になる。 結果として「オレンジ〜赤がサッと画面を拭ってから白に落ち着く」動きになる。 閉じるときは逆に白が先に縮んでオレンジが顔を出し、そのオレンジが遅れて縮む。 どちらの円も額縁(z-index:1035)より下なので、塗り替わるのは縁の内側だけ */ .bb-mnav-circle { position: fixed; /* 画面中央に置くため、50%から半径(50px)ぶん戻した位置から始める */ top: calc(50% - 50px); left: calc(50% - 50px); width: 100px; height: 100px; border-radius: 50%; transform: scale(0); pointer-events: none; } /* 色の層。開くときは真っ先に、閉じるときは最後に動く */ .bb-mnav-circle--accent { z-index: 1033; background: var(--bb-gradient); transition: transform 0.6s ease 0.25s; } /* 白い層。開くときは遅れて、閉じるときは真っ先に動く。 これが開き切ったあとのメニューの地になる */ .bb-mnav-circle--panel { z-index: 1034; background: var(--frame-bg); transition: transform 0.6s ease 0s; } /* 直径100px × 50 ＝ 5000px。縦長の端末でも四隅まで確実に覆える大きさ。 transition-delay をここで入れ替えることで、開くときだけ色が先行する */ html.is-mnav-open .bb-mnav-circle { transform: scale(50); } html.is-mnav-open .bb-mnav-circle--accent { transition-delay: 0s; } html.is-mnav-open .bb-mnav-circle--panel { transition-delay: 0.25s; } /* ハンバーガーは開閉のたびにボタンごと1回転しながら、3本線と×を行き来する。 1回転（360deg）なので、線の傾きは下の span 側の指定だけで決まる */ .bb-mnav-toggle { transition: transform 0.6s ease; } .bb-mnav-toggle[aria-expanded="true"] { transform: rotate(360deg); } /* 白い層が画面を覆いきってから中身を出す（0.45秒待ってフェードイン）。 .is-open が外れるとアニメーションごと無くなるので、閉じるときは即座に消える */ .bb-mnav__list, .bb-mnav__cta, .bb-mnav__sns { opacity: 0; } .bb-mnav.is-open .bb-mnav__list, .bb-mnav.is-open .bb-mnav__cta, .bb-mnav.is-open .bb-mnav__sns { animation: bb-mnav-in 0.8s ease 0.45s both; } @keyframes bb-mnav-in { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 767.98px) { .bb-mnav-circle { display: block; } } @media (prefers-reduced-motion: reduce) { .bb-mnav-circle, .bb-mnav-toggle { transition: none; } .bb-mnav.is-open .bb-mnav__list, .bb-mnav.is-open .bb-mnav__cta, .bb-mnav.is-open .bb-mnav__sns { animation-delay: 0s; animation-duration: 0.01ms; } } /* メニューを開いている間は背後の本文をスクロールさせない（JSが .is-mnav-open を付ける） */ html.is-mnav-open, html.is-mnav-open body { overflow: hidden; } @media (max-width: 767.98px) { .bb-mnav-bar { display: flex; } .bb-mnav { display: flex; } /* 縦ナビは畳む。本文の右余白も無くし、画面幅をフルに使う。 代わりに上端バーのぶんだけ padding-top を足す */ .bb-side-nav { display: none; } html[data-nav="side"] body { padding-right: 0; padding-top: calc(var(--frame-w) + var(--mnav-h)); } html[data-nav="side"] { scroll-padding-top: calc(var(--frame-w) + var(--mnav-h) + 12px); } } @media (prefers-reduced-motion: reduce) { .bb-mnav, .bb-mnav-toggle span { transition: none; } } /* ---------- Header ---------- 額縁の上辺がそのままヘッダーになる。左右にナビを振り分け、ロゴは中央。 額縁と一体に見せるため位置は固定。本文が下に潜らないよう、body に 上辺ぶんの余白を入れている（下辺ぶんも同様に確保する）。 */ .bb-header { position: fixed; top: var(--frame-w); left: var(--frame-w); right: var(--frame-w); z-index: 1036; background-color: var(--frame-bg); border-bottom: 1px solid var(--frame-rule); } /* ヘッダー下辺の弧。ナビ本体（.bb-header__bar / 高さ--bar-h）はそのまま四角のまま 崩さず、その下にだけ左右の端から弧を足す。ロゴ・ナビの当たり判定には 一切影響しない。 幅=高さの2倍にして、左右とも0に収束する正しい半円にしている（片側だけ 垂直に切り立つ変形防止）。中央はヘッダーの地の直線のまま（へこんで見える）、 左右の端だけ半円が下に垂れる形。::before=左端、::after=右端 */ .bb-header::before, .bb-header::after { content: ""; position: absolute; top: 100%; width: calc(var(--header-arc) * 2); height: var(--header-arc); background: var(--frame-bg); border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; } .bb-header::before { left: 0; } .bb-header::after { right: 0; } .bb-header__bar { position: relative; display: flex; align-items: center; width: 100%; min-height: var(--bar-h); padding: 0 clamp(1rem, 2.5vw, 2rem); } /* ---- ロゴ ---- */ .bb-header .navbar-brand { margin: 0; padding: 0; } .bb-header .navbar-brand img { display: block; height: 26px; width: auto; max-width: calc(var(--logo-slot) - 32px); object-fit: contain; } /* 共通ヘッダー（partials/header.html）のハンバーガー。 トップページのものと同じ .bb-mnav-toggle だが、あちらは上端バー(.bb-mnav-bar)の中、 こちらはヘッダーの中に入る。992px以上は横並びナビが出るので隠しておく。 見た目と×への変形は下の Mobile Nav セクションの .bb-mnav-toggle が担当する */ .bb-header .bb-mnav-toggle { display: none; margin-left: auto; } /* ---- ナビ ---- */ .bb-header .nav-link { font-weight: 600; font-size: 0.82rem; color: var(--bb-text); padding: 0.5rem 0.7rem; transition: color 0.25s ease; } .bb-header .nav-link:hover, .bb-header .nav-link:focus-visible { color: var(--bb-red); } .bb-header__actions { display: flex; align-items: center; gap: 0.55rem; } .bb-header .btn-contact { background: var(--bb-gradient); color: #fff; font-weight: 700; border-radius: 999px; padding: 0.42rem 1.2rem; white-space: nowrap; transition: filter 0.25s ease; } .bb-header .btn-contact:hover { color: #fff; filter: brightness(1.05); } /* SNSアイコン（ヘッダー／縦ナビ／モバイルメニューの3か所で共通）。 丸い地色はCSSで描き、画像（assets/img/icon-sns-*.svg）は白抜きのマークだけを持つ。 こうしておくと、ホバー時の色替えも並べ替えもCSSだけで完結する */ .bb-sns-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background-color: var(--bb-sns-bg); transition: background-color 0.25s ease, box-shadow 0.25s ease; } /* 既定のホバー色。下で個別指定していないもの（YouTube）はこれが効く */ .bb-sns-icon:hover, .bb-sns-icon:focus-visible { background-color: var(--bb-red); } .bb-sns-icon img { position: relative; /* Instagramのグラデ層(::before)より手前に描くため */ display: block; width: 15px; height: 15px; transition: filter 0.25s ease; } /* ---- ホバー時は各SNSらしい見た目に切り替える ---- */ /* Instagram: 公式のグラデーション。background-image は色の補間ができず パッと切り替わってしまうので、同じ大きさの層を重ねて不透明度でフェードさせる */ .bb-sns-icon--instagram::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); opacity: 0; transition: opacity 0.25s ease; } .bb-sns-icon--instagram:hover::before, .bb-sns-icon--instagram:focus-visible::before { opacity: 1; } /* グラデーションがフェードインしきるまでの下地は黒のまま（赤が透けないように） */ .bb-sns-icon--instagram:hover, .bb-sns-icon--instagram:focus-visible { background-color: var(--bb-sns-bg); } /* X: 白黒を反転させる。丸を白にし、白一色のSVGは filter で黒へ反転させる。 輪郭は border だと28pxの箱が広がって並びがずれるので、内側の影で描く */ .bb-sns-icon--x:hover, .bb-sns-icon--x:focus-visible { background-color: #fff; box-shadow: inset 0 0 0 1px var(--bb-sns-bg); } .bb-sns-icon--x:hover img, .bb-sns-icon--x:focus-visible img { filter: invert(1); } /* ---- lg以上: 左右にナビ、中央にロゴ ---- */ @media (min-width: 992px) { /* 中央にロゴ用の列を確保する。両端に寄せるだけだと、ナビが長くなったぶん 内側へ伸びてロゴに重なる。 Bootstrapが .navbar-expand-lg .navbar-collapse に display:flex !important を 当てているので、こちらも !important でないとグリッド指定が効かない */ .bb-header .navbar-collapse { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--logo-slot) minmax(0, 1fr); align-items: center; width: 100%; } .bb-header__nav { display: flex; align-items: center; gap: 0.1rem; } .bb-header__nav--left { grid-column: 1; justify-content: center; } .bb-header__nav--right { grid-column: 3; justify-content: flex-end; } /* ロゴは中央に固定して置く（ナビの並びからは外す） */ .bb-header .navbar-brand { position: absolute; left: 50%; top: 50%; translate: -50% -50%; } /* 幅の狭いlgでも収まるよう、文字と余白は画面幅に合わせて詰める */ .bb-header .nav-link { padding: 0.5rem clamp(0.25rem, 0.55vw, 0.7rem); font-size: clamp(0.74rem, 0.8vw, 0.85rem); white-space: nowrap; } .bb-header .btn-contact { padding: 0.4rem clamp(0.7rem, 0.9vw, 1.2rem); font-size: clamp(0.74rem, 0.8vw, 0.85rem); } } /* ---- lg未満: ハンバーガー＋全画面メニューに切り替える ---- 共通ヘッダーを使うページ（about-1 / news）向け。Bootstrapのcollapseで 上からニュッと出していたのをやめ、トップページと同じ「中央から円が広がる」 全画面メニュー（.bb-mnav--sub）に統一した。開閉は assets/js/nav.js。 トップページ自身の .bb-mnav（〜767px・上端バーの中）とは別物なので、 下層ページ側だけ --sub 修飾子を付けて切り替え幅を991pxにしている。 */ @media (max-width: 991.98px) { .bb-header__bar { padding: 0.6rem 1rem; } /* ヘッダー内の横並びナビは畳む。991px以下のナビは全画面メニューが担う */ .bb-header .navbar-collapse { display: none !important; } .bb-header .bb-mnav-toggle { display: block; } .bb-mnav-circle--sub { display: block; } /* 上端バー(--mnav-h)ではなくヘッダー(--bar-h)の下から広がる */ .bb-mnav--sub { display: flex; top: calc(var(--frame-w) + var(--bar-h)); } } /* ============================================================ Hero（ファーストビュー）— バナー型 写真カード(.bb-hero-stage)を中央に据え、その上端と左右にコピーを回り込ませる。 .bb-hero-frame の grid で「上コピー / 左縦組み・写真・右縦組み / CTA」の3段に組む。 登場演出は .bb-hero.is-ready（JSが読み込み後に付与）を起点に、 各要素の style="--d:◯s" で指定した遅延で順番に立ち上がる。 ============================================================ */ .bb-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: 3rem; padding-bottom: 5.5rem; background: #fff; } /* ---- 背景レイヤー ---- */ .bb-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } /* ぼかした光。写真カードのまわりをほんのり暖色に染める */ .bb-hero-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0; will-change: transform; animation: bb-hero-blob-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, bb-hero-drift 20s ease-in-out infinite alternate; } .bb-hero-blob--orange { width: 44vw; max-width: 600px; aspect-ratio: 1; top: -18%; left: -10%; background: radial-gradient(circle, rgba(247, 147, 30, 0.22), transparent 68%); } .bb-hero-blob--gold { width: 40vw; max-width: 540px; aspect-ratio: 1; bottom: -20%; right: -8%; background: radial-gradient(circle, rgba(253, 185, 19, 0.24), transparent 68%); animation-delay: 0.15s, 3s; animation-duration: 1.6s, 24s; } @keyframes bb-hero-blob-in { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } } @keyframes bb-hero-drift { from { translate: 0 0; } to { translate: 4% -6%; } } /* 方眼グリッド。中央から外側へ向けて薄くフェードさせる */ .bb-hero-grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(28, 35, 51, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 35, 51, 0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 25%, transparent 100%); opacity: 0; animation: bb-hero-fade-in 1.4s 0.2s ease forwards; } @keyframes bb-hero-fade-in { to { opacity: 1; } } /* ---- バナー全体の骨組み ---- */ /* 中央=写真、左右=残りの余白を均等に分けた列。 左右の列を文字幅ぴったり(auto)にすると、縦組みコピーが余白の中央ではなく 写真寄りに詰まって見えるため、余白そのものを列にして justify-self:center で中央に置く。 列間のgapを0にしているのも、「写真の端〜画面端まで」を丸ごと1列として扱い、 その中央に文字を来させるため（gapがあるとその分だけ中心がずれる） */ .bb-hero-frame { /* 左の欧文を絶対配置にするための基準 */ position: relative; display: grid; grid-template-columns: 1fr minmax(0, 82%) 1fr; grid-template-rows: auto auto auto; gap: 1rem 0; align-items: center; } /* 共通の登場モーション。--d で1要素ずつ遅らせる。 ここで transform ではなく translate プロパティを使うのは、 マウス追従の視差（JSが transform を直接書き込む）と重ならないようにするため。 translate と transform は別プロパティなので、両方が同時にかかっても打ち消し合わない */ .bb-hero-topline, .bb-hero-side, .bb-hero-tag, .bb-hero-stage__sub, .bb-hero-cta { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); } .bb-hero.is-ready .bb-hero-topline, .bb-hero.is-ready .bb-hero-side, .bb-hero.is-ready .bb-hero-tag, .bb-hero.is-ready .bb-hero-stage__sub, .bb-hero.is-ready .bb-hero-cta { opacity: 1; translate: 0 0; } /* ---- 上端の導入文 ---- */ .bb-hero-topline { grid-column: 1 / -1; grid-row: 1; margin: 0; text-align: right; font-size: clamp(0.8rem, 1.4vw, 0.95rem); font-weight: 700; letter-spacing: 0.08em; color: var(--bb-navy); translate: 0 -14px; } .bb-hero-topline span { color: #9aa0a8; font-weight: 500; } .bb-hero-topline span::before { content: "／"; margin: 0 0.4em; color: var(--bb-orange); } /* ---- 左右の縦組みコピー ---- */ /* 文字まわり（書体・大きさ・色）は左右まとめて下の .bb-hero-side--left/--right で指定する */ .bb-hero-side { margin: 0; font-weight: 700; white-space: nowrap; } /* 左右とも同じ欧文を縦に立て、写真を挟んで対にする。写真に添えるキャプションでは なく飾りの一部として大きく見せたいので、文字は塗らずに輪郭線だけの袋文字に している（背景の明るい面から浮きすぎない）。 縦組みのまま文字を大きくすると、その列がFVの高さを決めてしまい写真の上下に 余白ができる。左右とも絶対配置にして行の高さの計算から外し、飾りとして左右の 余白に重ねている（中央列は82%固定なので写真の大きさは変わらない）。 */ .bb-hero-side--left, .bb-hero-side--right { position: absolute; /* 絶対配置でも grid-row / grid-column を指定すると、そのマス（＝写真の行の 左右の列）が位置の基準になる。以前は .bb-hero-frame 全体（上のコピー行・ 写真・ボタン行を含む）の50%を基準に +22px で手調整していたため、 写真の中心より約41px下にずれ、狭い幅では写真の下端からはみ出していた。 写真の行を基準にすれば、top:50% と translateY(-50%) だけで どの画面幅でも写真の上下のちょうど真ん中に来る。 ※ 終わりの線まで「2 / 3」と書くこと。絶対配置の要素で「grid-row: 2」だけに すると、終わりがグリッドの下端扱いになり、基準がボタン行まで伸びてずれる。 */ grid-row: 2 / 3; top: 50%; writing-mode: vertical-rl; font-family: "Archivo Black", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-style: normal; /* 縦組みなので、文字を大きくするほど縦に長くなる。写真の高さに収まる範囲が 実測で 2.1vw・上限1.7rem だったので、そこを上限にしている。 */ font-size: clamp(1rem, 2.1vw, 1.7rem); letter-spacing: 0.1em; color: transparent; -webkit-text-stroke: 0.8px #b4b9c2; } /* 左は下から上へ読ませる（vertical-rl を180度回すと下から上になる）。 rotate/translate を個別プロパティで書くと縦組みでの % の解釈がずれるため、 transform にまとめて指定する（上下中央に置いてから180度回す）。 */ .bb-hero-side--left { grid-column: 1 / 2; /* 額縁の線（14px）の内側に必ず収まるよう、左端から少し離して置く */ left: calc(var(--frame-w) + 0.6rem); transform: translateY(-50%) rotate(180deg); } /* 右は回さず、そのまま上から下へ読ませて左と向きの対をつくる */ .bb-hero-side--right { grid-column: 3 / 4; right: calc(var(--frame-w) + 0.6rem); transform: translateY(-50%); } /* ---- 写真カード ---- */ .bb-hero-stage { position: relative; grid-column: 2; grid-row: 2; /* 写真の大きさは .bb-hero-frame の中央列（フレーム幅の82%）が決める。 左右の余白は縦組みコピー用の列として確保してある */ width: 100%; justify-self: center; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 8.5; background: var(--bb-navy); box-shadow: 0 24px 60px rgba(28, 35, 51, 0.18); /* 下から上へ開くように現れる */ clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); } .bb-hero.is-ready .bb-hero-stage { clip-path: inset(0 0 0 0); } /* 写真の重ね置き場。ゆっくり寄る動き（ケンバーンズ）は個々の写真ではなく この入れ物にかける。そうすれば切り替わる2枚が同じ倍率のままなので、 フェード中に大きさが飛ばない */ .bb-hero-stage__photos { position: absolute; inset: 0; will-change: transform; animation: bb-hero-kenburns 20s ease-in-out infinite alternate; } /* 全部を同じ位置に重ね、.is-active の1枚だけを見せる */ .bb-hero-stage__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; } .bb-hero-stage__photos img.is-active { opacity: 1; } @keyframes bb-hero-kenburns { from { scale: 1; } to { scale: 1.1; } } /* 文字を載せるための暗幕。下側と左側ほど濃くする */ .bb-hero-stage__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 24, 31, 0.82) 0%, rgba(21, 24, 31, 0.35) 42%, rgba(21, 24, 31, 0.05) 70%), linear-gradient(to right, rgba(21, 24, 31, 0.55), transparent 55%); } /* ---- 写真上のコピー ---- */ .bb-hero-stage__copy { position: absolute; left: clamp(1.1rem, 3.5vw, 3rem); right: clamp(1.1rem, 3.5vw, 3rem); bottom: clamp(1.1rem, 3.5vw, 2.6rem); } .bb-hero-title { margin: 0.6rem 0 0; font-size: clamp(1.5rem, 4.6vw, 3.2rem); font-weight: 900; line-height: 1.3; letter-spacing: 0.02em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); } /* JSが1文字ずつ包んだ。--ci は文字の並び順 */ .bb-hero-title .bb-hero-char { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(4deg); filter: blur(6px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(0.75s + var(--ci, 0) * 0.055s); } .bb-hero.is-ready .bb-hero-title .bb-hero-char { opacity: 1; transform: translateY(0) rotate(0deg); filter: blur(0); } /* 「絆」だけブランドグラデーションで強調し、ゆっくり明滅させる */ .bb-hero-title .bb-hero-char.is-accent { background: var(--bb-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } .bb-hero.is-ready .bb-hero-title .bb-hero-char.is-accent { animation: bb-hero-accent 3.6s 2s ease-in-out infinite; } @keyframes bb-hero-accent { 0%, 100% { filter: drop-shadow(0 0 0 rgba(247, 147, 30, 0)); } 50% { filter: drop-shadow(0 4px 18px rgba(247, 147, 30, 0.6)); } } .bb-hero-stage__sub { margin: 0.7rem 0 0; font-size: clamp(0.82rem, 1.6vw, 1.05rem); font-weight: 500; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.88); translate: 0 14px; } /* ---- 写真上のタグ ---- */ .bb-hero-tag { display: inline-block; padding: 0.34em 1.1em; border-radius: 3px; background: rgba(21, 24, 31, 0.78); backdrop-filter: blur(6px); font-size: clamp(0.66rem, 1.2vw, 0.78rem); font-weight: 700; letter-spacing: 0.14em; color: #fff; translate: 0 12px; } /* 右上に置く小さいタグ。枠線だけの軽い見た目にする */ .bb-hero-tag--corner { position: absolute; top: clamp(0.9rem, 2.4vw, 1.6rem); right: clamp(0.9rem, 2.4vw, 1.6rem); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.55); text-transform: uppercase; translate: 0 -12px; } /* ---- 左上の丸スタンプ ---- */ .bb-hero-stamp { position: absolute; top: clamp(0.9rem, 3vw, 2rem); left: clamp(0.9rem, 3vw, 2rem); display: grid; place-items: center; width: clamp(74px, 11vw, 124px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.93); box-shadow: 0 10px 30px rgba(21, 24, 31, 0.28); opacity: 0; scale: 0.6; rotate: -14deg; transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s, scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s, rotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s; } .bb-hero.is-ready .bb-hero-stamp { opacity: 1; scale: 1; rotate: -8deg; } /* スタンプの中身はシンボルマークのみ */ .bb-hero-stamp img { grid-area: 1 / 1; width: 62%; opacity: 0.16; } /* ---- CTA ---- */ .bb-hero-cta { position: relative; grid-column: 2; grid-row: 3; justify-self: start; margin-top: 0.6rem; overflow: hidden; translate: 0 16px; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), transform 0.35s ease, box-shadow 0.35s ease; } .bb-hero-cta > span { position: relative; z-index: 1; } /* ホバーで白い光が左から右へ抜ける */ .bb-hero-cta::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transition: left 0.7s ease; } .bb-hero.is-ready .bb-hero-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(226, 49, 29, 0.35); } .bb-hero-cta:hover::before { left: 130%; } /* ---- スクロール誘導 ---- */ /* 右端は縦ナビレールが占めるので、スクロール誘導は左へ寄せる */ .bb-hero-scroll { position: absolute; left: max(1rem, 2.5vw); bottom: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: #9aa0a8; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.28em; writing-mode: vertical-rl; opacity: 0; animation: bb-hero-fade-in 1.2s 1.6s ease forwards; } .bb-hero-scroll:hover { color: var(--bb-red); } .bb-hero-scroll__line { position: relative; width: 1px; height: 52px; background: rgba(28, 35, 51, 0.16); overflow: hidden; } /* 線の中を光が上から下へ繰り返し流れる */ .bb-hero-scroll__line::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; background: var(--bb-gradient); animation: bb-hero-scroll-run 1.9s ease-in-out infinite; } @keyframes bb-hero-scroll-run { 0% { transform: translateY(-110%); } 100% { transform: translateY(260%); } } /* 縦組みコピーは狭い画面だと写真を圧迫するので、1カラムに畳んで隠す */ @media (max-width: 767.98px) { .bb-hero { padding-bottom: 3.5rem; } .bb-hero-frame { grid-template-columns: minmax(0, 1fr); } .bb-hero-topline, .bb-hero-stage, .bb-hero-cta { grid-column: 1; } .bb-hero-side { display: none; } .bb-hero-stage { aspect-ratio: 4 / 3.4; /* 1カラムに畳んだ後は左右に余白を残す（PCの縦組みコピー用の列は無くなるため） */ width: 88%; } .bb-hero-scroll { display: none; } } /* 動きを抑える設定の環境では、演出を止めて最終状態だけを見せる */ @media (prefers-reduced-motion: reduce) { .bb-hero-blob, .bb-hero-grid, .bb-hero-scroll, .bb-hero-stage__photos, .bb-hero-scroll__line::after, .bb-hero.is-ready .bb-hero-title .bb-hero-char.is-accent { animation: none; opacity: 1; } .bb-hero-topline, .bb-hero-tag, .bb-hero-stage__sub, .bb-hero-cta, .bb-hero-title .bb-hero-char { opacity: 1; translate: none; transform: none; filter: none; transition: none; } /* 縦組みコピーの transform は演出ではなく配置（縦に回す・上下中央に置く）なので、 ここで none にすると文字の向きと位置が崩れる。opacity だけ最終状態にする。 */ .bb-hero-side { opacity: 1; translate: none; filter: none; transition: none; } .bb-hero-stage { clip-path: none; transition: none; } .bb-hero-stamp { opacity: 1; scale: 1; rotate: -8deg; transition: none; } /* 写真の自動切り替えはJS側で止まるので、ここでは1枚目を即座に出すだけにする */ .bb-hero-stage__photos img { transition: none; } } .bb-btn-gradient { display: inline-block; background: var(--bb-gradient); color: #fff; font-weight: 700; padding: 0.85rem 2rem; border-radius: 999px; box-shadow: 0 8px 20px rgba(226, 49, 29, 0.25); } .bb-btn-gradient:hover { color: #fff; filter: brightness(1.05); } /* ---------- Section heading pattern ---------- */ .bb-section { padding: 5rem 0; } .bb-section-alt { background-color: var(--bb-gray-bg); } .bb-section-head { position: relative; text-align: center; margin-bottom: 3rem; } .bb-section-head .bb-watermark { font-family: var(--bb-font-serif); font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 700; color: rgba(0, 0, 0, 0.06); letter-spacing: 0.05em; line-height: 1; margin: 0; } .bb-section-head .bb-label { display: inline-block; background: var(--bb-dark); color: #fff; font-weight: 700; letter-spacing: 0.15em; padding: 0.4rem 1.4rem; margin-top: -1rem; font-size: 0.85rem; } .bb-section-head .bb-label-jp { display: block; margin-top: 0.9rem; font-weight: 700; color: var(--bb-text); letter-spacing: 0.2em; } .bb-section-head.bb-on-photo .bb-watermark { color: rgba(255, 255, 255, 0.6); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3); } .bb-section-head.bb-on-photo .bb-label-jp { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* Missionセクションの見出しは中央ではなく右寄せに配置する */ #mission .bb-section-head { text-align: right; } /* [data-reveal-right] 画面内に入ったら右側からスライドインさせる（Missionセクション見出し等） */ [data-reveal-right] { opacity: 0; transform: translateX(60px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-reveal-right].is-in-view { opacity: 1; transform: translateX(0); } /* [data-reveal-left] 画面内に入ったら左側からスライドインさせる（Case Studiesの奇数カード等。 [data-reveal-right]と対になる左右反転版で、JS側は同じ処理を共有している） */ [data-reveal-left] { opacity: 0; transform: translateX(-60px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-reveal-left].is-in-view { opacity: 1; transform: translateX(0); } /* 横スライドの初期位置(±60px)は、要素が画面幅いっぱいに広がるモバイルでは そのまま「画面外へのはみ出し」になる。しかも transform によるはみ出しは スクロール可能領域に算入されるため、モバイルのブラウザはレイアウト ビューポートを広げてしまい、ページ全体が横に振れる。このとき position:fixed のヘッダーも広がった幅を基準に置かれるので、ロゴごと 画面外へずれる。 html の overflow-x:hidden や overflow-x:clip は「見た目を隠す」だけで このビューポート計算は止められないため、狭い画面では横方向の移動そのものを やめ、下から立ち上がる動き（[data-reveal-up] と同じ向き）に置き換える。 */ @media (max-width: 767.98px) { [data-reveal-left], [data-reveal-right] { transform: translateY(40px); } [data-reveal-left].is-in-view, [data-reveal-right].is-in-view { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-reveal-right], [data-reveal-left] { opacity: 1; transform: none; transition: none; } .bb-stats-card__icon { opacity: 1; transform: none; transition: none; } } /* ---------- News ---------- .bb-news-item は index.html（トップ3件）と news.html（一覧全件、JSで描画）の 両方で使う要素。クリックで news.html?id=N の詳細（.bb-news-detail）へ遷移する。 */ .bb-news-item { display: flex; gap: 1.25rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid #e6e6e6; color: inherit; text-decoration: none; transition: padding-left 0.2s ease, color 0.2s ease; } .bb-news-item:hover, .bb-news-item:focus-visible { padding-left: 0.5rem; color: var(--bb-red); } .bb-news-date { flex: 0 0 auto; font-weight: 700; color: #fff; background: var(--bb-navy); border-radius: 999px; padding: 0.25rem 0.9rem; font-size: 0.85rem; } .bb-news-text { flex: 1 1 auto; } /* news.html の詳細表示（#newsRoot に assets/js/main.js がJSで生成） */ .bb-news-detail { max-width: 760px; margin: 0 auto; } .bb-news-detail .bb-news-date { display: inline-block; margin-bottom: 1.2rem; } .bb-news-detail__title { font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--bb-navy); margin-bottom: 1.5rem; line-height: 1.6; } /* bodyはBB_NEWS_ITEMSのHTML文字列がそのまま入る（

/

/
    等）ので、 pre-wrapは使わずブロック要素側の余白で整形する */ .bb-news-detail__body { line-height: 2; color: var(--bb-text); } .bb-news-detail__body p { margin: 0 0 1.2rem; } .bb-news-detail__lede { font-weight: 700; color: var(--bb-navy); } /* 本文中に置く画像（展示会バナーなど）。画像の実寸を上限に中央寄せする */ .bb-news-detail__figure { margin: 0 0 1.6rem; text-align: center; } .bb-news-detail__figure img { max-width: 100%; height: auto; border-radius: 8px; } /* 【サービス概要】のような、本文中に挟む補足ブロック */ .bb-news-detail__box { margin-top: 2rem; padding: 1.8rem 1.8rem 0.4rem; background: var(--bb-gray-bg); border-radius: 16px; } .bb-news-detail__box-title { font-weight: 800; color: var(--bb-navy); margin-bottom: 0.8rem; } .bb-news-detail__dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0 0 1.4rem; } .bb-news-detail__dl dt { color: var(--bb-navy); font-weight: 700; } .bb-news-detail__dl dd { margin: 0; } .bb-news-detail__list { margin: 0 0 1.4rem; padding-left: 1.3rem; } .bb-news-detail__list li { margin-bottom: 0.4rem; } .bb-news-detail__back { display: inline-block; margin-top: 2.5rem; font-weight: 700; color: var(--bb-navy); } .bb-news-detail__back:hover { color: var(--bb-red); } /* ---------- View more（細線＋矢印のリンク） ---------- */ .bb-view-more { display: inline-flex; flex-direction: column; align-items: center; gap: 0px; text-decoration: none; color: #1c2333; } .bb-view-more__text { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; white-space: nowrap; } .bb-view-more__arrow { width: 150px; height: 9px; display: block; margin-left: 4px; } /* .bb-view-more（inline-flex）自体はブロック要素ではないため、 これ単体にmargin-left:autoを指定しても効かない。 この専用ラッパーだけをwidth:fit-contentのブロックにして右へ寄せることで、 お知らせ本文（#newsTopRoot）側の左寄せには影響を与えない */ .bb-view-more-wrap { width: fit-content; margin-left: auto; } /* ---------- Mission: scroll zoom photo ---------- */ .bb-mission-zoom { position: relative; overflow: clip; background-color: var(--bb-gray-bg); } /* sticky写真：拡大しきった後もsectionの下端までstickyのまま留まり続け、 後から来るコンテンツ(.bb-mission-content)がその上にかぶさってスクロールしていく */ .bb-zoom-scroll__sticky { position: sticky; top: 0; z-index: 0; height: 100vh; /* 写真の上下に流れる文字(.bb-zoom-marquee)を置くため縦並びにする。 写真が拡大していくと上下の文字は自然と画面外へ押し出されて消える */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.2rem, 3.5vh, 2.6rem); overflow: visible; pointer-events: none; } /* ---- 写真の上下を流れる装飾文字 ---- */ .bb-zoom-marquee { width: 100vw; overflow: hidden; white-space: nowrap; user-select: none; font-family: var(--bb-font-serif); font-weight: 700; font-size: clamp(2rem, 5.5vw, 4.2rem); line-height: 1.2; color: rgba(28, 35, 51, 0.1); } .bb-zoom-marquee__track { display: inline-flex; will-change: transform; } /* 上段は右から左へ、下段は左から右へ。 トラックには同じ文字列が2セット入っているので、 1セット分(=50%)ずらし切った時点が最初と同じ見た目になり、途切れずループする */ .bb-zoom-marquee--top .bb-zoom-marquee__track { animation: bb-marquee-to-left 30s linear infinite; } .bb-zoom-marquee--bottom .bb-zoom-marquee__track { animation: bb-marquee-to-right 30s linear infinite; } @keyframes bb-marquee-to-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bb-marquee-to-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .bb-zoom-marquee__track { animation: none; } } .bb-zoom-scroll__box { position: relative; width: 26vw; min-width: 220px; aspect-ratio: 3 / 2; /* 縦長の画面では assets/js/main.js が高さを実値(px)で書き込んで画面いっぱいまで 広げる。親(.bb-zoom-scroll__sticky)は縦並びのflexなので、既定のflex-shrinkが 効くとその高さが押し戻されてしまう。縮まないように固定しておく */ flex-shrink: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); will-change: width, height, border-radius; } .bb-zoom-scroll__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; } .bb-zoom-scroll__box img.is-active { opacity: 1; } /* コンテンツ側：上のpadding-top分だけ、写真が拡大しながらstickyし続ける「余白スクロール量」を確保する。 padding-topを過ぎるとカードが写真の上にかぶさるように現れる */ .bb-mission-content { position: relative; z-index: 1; padding-top: 70vh; } /* 写真ズームが終わって見出し＋カードが出きったところで、この階層ごと画面上端に固定する。 #mission自体をstickyにするとJS側の進捗計算(getBoundingClientRect基準)が 壊れてしまうため、固定するのはこの内側の階層だけにしている。 */ .bb-mission-pin { position: sticky; top: 0; } /* 上の .bb-mission-pin が固定され続ける距離。 stickyの可動域は「親(.bb-mission-content)のcontentボックスの高さ − sticky要素自身の高さ」で、 親のpaddingは可動域に含まれない。そのため“余白”ではなく、このスペーサー要素の高さで確保する。 SERVICEが画面下から上まで覆いきるのに約1画面分(100vh)必要なので、それを上回る長さにしてある。 この区間はMissionの写真(sticky)が背景として残り、そこへSERVICEがせり上がってくる */ .bb-mission-pin-spacer { height: 130vh; } .bb-mission-card { background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 20px; padding: 3rem 2.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } /* backdrop-filter非対応ブラウザ向けフォールバック（すりガラス風にできない分、背景を不透明寄りに） */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bb-mission-card { background: rgba(255, 255, 255, 0.92); } } @media (prefers-reduced-motion: reduce) { .bb-zoom-scroll__sticky { position: relative; height: auto; padding: 2rem 0; } .bb-mission-content { padding-top: 2rem; padding-bottom: 2rem; } .bb-mission-pin { position: relative; } .bb-mission-pin-spacer { height: 0; } } @media (max-width: 767.98px) { .bb-mission-content { padding-top: 62vh; } .bb-mission-card { padding: 2rem 1.25rem; } } /* ---------- Mission ---------- */ .bb-mission-mark img { width: 92px; height: 92px; } .bb-mission p { font-size: 1.1rem; line-height: 2.1; } /* ミッション本文は中央寄せ（ロゴマークも中央）。 auto-phrase で日本語の文節をまたがずに折り返し、「持続的」のような熟語が 途中で割れるのを防ぐ（.bb-service .tab-pane p と同じ考え方。未対応ブラウザでは 従来どおりの折り返しに戻るだけ）。 */ #mission .bb-mission p { text-align: center; word-break: auto-phrase; } /* ---------- Service ---------- 以前は建物写真を背景に敷いていたが、下のセクションと絵柄がかぶって見づらいため廃止し、 同系色（ネイビー〜ダーク）のグラデーションのみにした。 MissionセクションのJSスクロール演出(getBoundingClientRect基準)を壊さないよう、 #mission自体は一切position:stickyにせず、代わりに内側の.bb-mission-pin （見出し＋カード）だけをsticky化して画面に留め、SERVICE側へ負のmargin-topを付けて その「留まっている間」に食い込ませることで、z-indexが高いSERVICEがせり上がって Missionにかぶさる「紙芝居」風の見た目にしている。 */ .bb-service { position: relative; z-index: 2; margin-top: -110vh; /* 下端の白へのフェード(::after)がコンテンツにかからないよう、下の余白を多めにとる */ padding-bottom: clamp(9rem, 22vh, 15rem); /* Missionの上にせり上がってくるカードの上端。画面幅に応じて丸みを変える */ border-radius: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px) 0 0; /* Missionの上にせり上がって見せるための上向きの影。 spreadを指定しない大きなぼかしだと下辺からも影が滲み出し、 下のフェードが白へ抜けた先に薄いグレーの帯として残ってしまうため、 マイナスspreadで影の矩形を内側に縮めて下辺へ回り込まないようにしている */ box-shadow: 0 -24px 48px -12px rgba(0, 0, 0, 0.4); background: linear-gradient(150deg, #232d4d 0%, var(--bb-navy) 45%, var(--bb-dark) 100%); color: #fff; } .bb-service::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 60%); pointer-events: none; } /* SERVICE(濃紺)の下端 → 次のOUR PRODUCTセクション(白背景)へのなじませ。 ストップの間隔を詰めた「イージングのかかった」指定は、変化が中盤に圧縮されて フェードの開始位置が帯のような線に見えてしまう。 そのためここでは smoothstep(3t²-2t³) に沿った左右対称のカーブを等間隔の 多段ストップで置き、始まりと終わりの両方をなだらかにして境目を消している。 末端は 82% の時点で完全な白(#fff)に到達させ、そこから下は白一色で保持する。 「ほぼ白」の状態のままセクションの境界へ到達させると、8bitの階調の段差 (バンディング)が境界付近で1本の薄いグレーの線として見えてしまうため、 境目のまわりを単色にして段差が出ないようにしている。 */ .bb-service::after { content: ""; position: absolute; left: 0; right: 0; /* セクションの高さが端数になったときに下端へ濃紺が覗くのを防ぐため、わずかに下へはみ出させる （はみ出す先も白背景なので影響はない） */ bottom: -2px; height: clamp(300px, 42vh, 560px); background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.034) 8%, rgba(255, 255, 255, 0.127) 16%, rgba(255, 255, 255, 0.263) 25%, rgba(255, 255, 255, 0.429) 33%, rgba(255, 255, 255, 0.61) 41%, rgba(255, 255, 255, 0.79) 49%, rgba(255, 255, 255, 0.905) 57%, rgba(255, 255, 255, 0.963) 66%, rgba(255, 255, 255, 0.991) 74%, #fff 82%, #fff 100% ); pointer-events: none; z-index: 0; } .bb-service > .container { position: relative; z-index: 1; } .bb-service-lead { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; line-height: 2; } /* 業種タブの下に置くAI／DX相談への導線カード。 SERVICEの濃紺背景から浮かせるため、Missionカード(.bb-mission-card)と同じ すりガラス調（半透明の白＋backdrop-filter）で揃えている */ .bb-service-cta { max-width: 720px; margin: 3.5rem auto 0; padding: 2.8rem 2.4rem; border-radius: 20px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); text-align: center; } /* backdrop-filter非対応ブラウザ向けフォールバック（ぼかせない分、背景を濃いめの単色に） */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bb-service-cta { background: rgba(255, 255, 255, 0.12); } } .bb-service-cta__title { font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.4rem); margin-bottom: 0.9rem; } .bb-service-cta__text { margin-bottom: 1.8rem; line-height: 2; } @media (max-width: 767.98px) { .bb-service-cta { padding: 2rem 1.4rem; } } @media (max-width: 767.98px) { .bb-service { border-radius: 32px 32px 0 0; } } @media (prefers-reduced-motion: reduce) { .bb-service { margin-top: 0; } } .bb-industry-tabs { max-width: 900px; margin: 0 auto; background: #fff; color: var(--bb-text); border-radius: 12px; padding: 2.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } .bb-industry-tabs .nav-pills .nav-link { font-weight: 700; color: var(--bb-text); border-radius: 999px; padding: 0.5rem 1.5rem; margin: 0 0.25rem 0.5rem; border: 1px solid #ddd; } .bb-industry-tabs .nav-pills .nav-link.active { background: var(--bb-gradient); color: #fff; border-color: transparent; } .bb-industry-tabs .tab-content { margin-top: 2rem; } .bb-industry-tabs h3 { font-weight: 800; color: var(--bb-navy); margin-bottom: 1rem; } .bb-industry-tabs p { line-height: 2; } /* ---------- Our Product: 円形バースト ---------- */ /* 見出しと円の間に置くリード文 */ .bb-product-lead { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; line-height: 2; color: var(--bb-text); } .bb-product-circles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 900px; margin: 0 auto; padding: 1rem 0; } .bb-product-circle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(160px, 20vw, 230px); aspect-ratio: 1 / 1; border-radius: 50%; text-align: center; color: #fff; font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.3; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22); cursor: pointer; will-change: transform; } .bb-product-circle:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .bb-product-circle__name { display: block; transition: opacity 0.2s ease; } .bb-product-circle__more { display: block; margin-top: 0.6rem; font-size: 0.78rem; font-weight: 500; color: #fff; opacity: 0.9; transition: opacity 0.2s ease; } /* 準備中カード（SMART-BB / Vault）の詳細パネル内ボタン無効化。 href除去で遷移自体は止めているが、見た目でも分かるよう薄くする */ .bb-product-detail__link.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ホバーすると円の色が変わり、プロダクト名が消えて「Click」に切り替わる。 グラデーション同士はtransitionで滑らかに変化しないため、 ::before に濃色のオーバーレイを重ねて、その不透明度をフェードさせている。 円自体にはバーストアニメーション用のtransformがJSからインラインで付くので、 円側にはtransformを足さず疑似要素だけで完結させている。 ホバーを持たないタッチ端末では、タップ後に状態が残るのを避けるため適用しない */ @media (hover: hover) { .bb-product-circle::before, .bb-product-circle::after { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } /* 色が変わる部分。白地は背景（白）と同化してしまうので、内側に薄い輪郭を入れる */ .bb-product-circle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(21, 24, 31, 0.08); } /* 名前と入れ替わって出てくる「Click」。 背景を敷いて文字型に切り抜くグラデーション文字。 inset:0で全面に広げるとグラデーションが円全体に伸びて中間色しか乗らないため、 文字サイズぴったりの箱にして中央寄せしている */ .bb-product-circle::after { content: "Click"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bb-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.12em; } /* 名前・リンクは色オーバーレイより前面に置いたうえで、ホバー時に消す */ .bb-product-circle__name, .bb-product-circle__more { position: relative; z-index: 1; } /* !important は、円形バーストのJS(assets/js/main.js)がスクロールのたびに これらの要素へインラインで opacity を書き込んでいるため。 インラインスタイルはCSSより強いので、これが無いとホバーしても文字が消えない */ .bb-product-circle:hover .bb-product-circle__name, .bb-product-circle:hover .bb-product-circle__more, .bb-product-circle:focus-visible .bb-product-circle__name, .bb-product-circle:focus-visible .bb-product-circle__more { opacity: 0 !important; } /* 「を詳しく見る」は見えなくなるので、見えないリンクを踏んで 意図せず遷移してしまわないよう、ホバー中は当たり判定も無効にする （＝円のどこを押しても詳細パネルが開く。キーボードでリンクに フォーカスした場合は円が:focus-visibleにならないため影響しない） */ .bb-product-circle:hover .bb-product-circle__more { pointer-events: none; } .bb-product-circle:hover::before, .bb-product-circle:hover::after, .bb-product-circle:focus-visible::before, .bb-product-circle:focus-visible::after { opacity: 1; } /* 詳細パネルを開いている間は元の見た目に戻す */ .bb-product-circle.is-open::before, .bb-product-circle.is-open::after { opacity: 0; } /* パネルを開いている間は、ホバーしていても元の文字を出す （上のホバー指定と同じ強さなので、後に書いてあるこちらが勝つ） */ .bb-product-circle.is-open .bb-product-circle__name, .bb-product-circle.is-open .bb-product-circle__more { opacity: 1 !important; } } .bb-product-circle--sharecareer { background: linear-gradient(135deg, #1467e3, #17b6e8); } .bb-product-circle--smartbb { background: linear-gradient(135deg, #14213d, #2a3a5c); } .bb-product-circle--vault { background: var(--bb-gradient); } /* ---------- Our Product: クリックで出てくる詳細パネル ---------- 画面中央に大きく固定表示するモーダル風パネル。 開いた時にJS(assets/js/main.js)がdocument.body直下へ一時的に移動（ポータル）するため、 .bb-product-circle.is-open .bb-product-detail という子孫セレクタが効かなくなる場合に備え、 パネル自身の .is-open でも表示できるようにしている。 閉じるボタン(.bb-product-detail__close)を本文と分離した固定ヘッダー扱いにするため、 本文側(.bb-product-detail__scroll)だけをスクロールさせる二層構造にしている。 */ .bb-product-detail { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.96); width: min(600px, 92vw); /* 本文を短くまとめてスクロールなしで収まるようにしたので、高さは内容なりに縮ませる。 max-heightは画面が低いときのための安全弁（overflow:hiddenで静かに収める）。 中身が確実に収まるよう、動画側の大きさも画面の高さから逆算している */ max-height: 92vh; display: flex; flex-direction: column; /* 背面のバックドロップが暗いので、透過をそのまま残すとカードが灰色に沈んでしまう。 白の不透明度を上げるのに加え、backdrop-filterのbrightnessでガラス越しに 透ける背景そのものを明るく持ち上げることで、すりガラス感を保ったまま 「白いカード」として明るく見えるようにしている */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--bb-text); text-align: left; border-radius: 20px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1050; overflow: hidden; backdrop-filter: blur(28px) saturate(150%) brightness(1.7); -webkit-backdrop-filter: blur(28px) saturate(150%) brightness(1.7); } /* backdrop-filter非対応ブラウザ向けフォールバック（ぼかしも明度の持ち上げも効かないため、白一色にする） */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bb-product-detail { background: #fff; } } /* 表示は「JSが明示的に付けた .is-open」だけをきっかけにする。 以前はキーボード操作用に :focus-within でも表示していたが、 円は tabindex="0" を持つためクリック時にまずフォーカスが当たり、 パネルがまだ円の中にある状態で一瞬表示されてしまっていた。 円にはバーストアニメーション用のtransformがインラインで付いており、 transformを持つ祖先は position:fixed の基準になるため、 その一瞬だけ画面中央ではなく円の脇にパネルが出て、直後に中央へ飛ぶ、 というちらつきの原因になっていた。 キーボードでの開閉は assets/js/main.js の keydown(Enter/Space)で .is-open をトグルしているので、:focus-within は不要。 */ .bb-product-circle.is-open .bb-product-detail, .bb-product-detail.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } /* 閉じている間、パネルはまだ円(.bb-product-circle)の子として残っている。 円にはバーストアニメーション用のtransformがインラインで付いており、 transformを持つ祖先は position:fixed の基準（包含ブロック）になるため、 このパネルは「画面中央」ではなく「円の中央」に置かれる。 幅は min(600px, 92vw) あるので、円が画面の右寄りにある狭い画面では パネルの右端が画面外へ出たままになり、visibility:hidden でも スクロール領域だけは広がって横スクロールが発生していた（390px幅で文書幅459px）。 そこで閉じている間は箱の大きさを0にしてレイアウトから外す。 開くときは assets/js/main.js の portalOut() が先に document.body 直下へ 移動させるのでこのセレクタは外れ、通常の大きさに戻る。 width/height はtransitionの対象外なので、フェード＋拡大の見え方は変わらない。 */ .bb-product-circle:not(.is-open) .bb-product-detail { width: 0; height: 0; max-height: 0; border-width: 0; } /* Our Product の詳細パネルを開いている間、背面を暗くするバックドロップ */ .bb-product-backdrop { position: fixed; inset: 0; background: rgba(10, 14, 26, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s; z-index: 1040; } .bb-product-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .bb-product-detail__close { position: absolute; top: 0.9rem; right: 1rem; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.08); color: var(--bb-text); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background 0.15s ease; z-index: 1; } .bb-product-detail__close:hover, .bb-product-detail__close:focus-visible { background: rgba(0, 0, 0, 0.16); } .bb-product-detail__scroll { font-weight: 400; font-size: 0.92rem; line-height: 1.8; padding: 2.4rem 2.2rem 2rem; text-align: center; } .bb-product-detail p { margin: 0 0 0.9rem; } .bb-product-detail p:last-of-type { margin-bottom: 1rem; } /* カード上部の小さなカテゴリ表記（本文より一段弱いトーン） */ .bb-product-detail__eyebrow { font-size: 0.78rem; letter-spacing: 0.04em; color: #8a8f98; margin-bottom: 0.4rem !important; } .bb-product-detail__title { font-weight: 800; font-size: 1.2rem; line-height: 1.5; color: var(--bb-navy); margin-bottom: 1.2rem !important; } /* サービス紹介動画。自動再生・ループさせる（自動再生の要件上ミュート必須）。 素材が1080x1080の正方形なので枠も正方形にして、上下が切れず・黒帯も出ないようにしている。 ここ（縦積み時）のサイズは「画面の高さ − 動画以外が使う高さ」＝残り全部。 パネルはスクロールしない設計なので、単純に大きくすると下のCTAボタンが切れてしまう。 350pxは動画以外の実測のおおよその合計。max()は画面が極端に低いときの下限 */ .bb-product-detail__video { display: block; width: min(100%, max(200px, 86vh - 350px)); aspect-ratio: 1 / 1; object-fit: contain; border-radius: 14px; margin: 0 auto 1.3rem; /* 動画自体の白背景とカードの白地の境目が四角い線として見えてしまうため、 四辺をマスクでフェードさせて自然に溶け込ませる。 縦横2枚のグラデーションを重ね、両方が不透明な中央部分だけを残す （mask-compositeはintersect／WebKit旧文法はsource-in）。 中央の被写体（ノートPC）を削らないよう、フェードは端6%までに留めている */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; } /* チェックマーク付きの要点リスト */ .bb-product-detail__points { list-style: none; margin: 0 0 1.4rem; padding: 0; text-align: left; } .bb-product-detail__points li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; font-weight: 700; line-height: 1.7; } .bb-product-detail__points li::before { content: "✓"; position: absolute; left: 0.2rem; color: var(--bb-red); } /* 一番下のCTA。カード幅いっぱいのボタンにする */ .bb-product-detail__link { display: block; padding: 0.9rem 1.2rem; border-radius: 999px; background: var(--bb-gradient); color: #fff; font-weight: 700; text-align: center; text-decoration: none; } .bb-product-detail__link:hover, .bb-product-detail__link:focus-visible { color: #fff; opacity: 0.9; } /* ---------- 動画付きパネルの横並びレイアウト（PC幅のみ） ---------- 縦積みだと動画とテキストが縦方向のスペースを取り合い、 スクロールしない設計上どうしても動画を大きくできない。 横幅に余裕がある画面では「左＝テキスト／右＝動画」に並べ替えることで、 動画の大きさを画面の高さではなく“列の幅”で決められるようにし、大きく見せている。 :has()非対応のブラウザでは縦積みのまま（表示は崩れない）フォールバックになる。 */ @media (min-width: 900px) { .bb-product-detail:has(.bb-product-detail__video) { width: min(1040px, 94vw); } .bb-product-detail__scroll:has(.bb-product-detail__video) { display: grid; /* 動画側をやや広めに取る */ grid-template-columns: 1fr 1.15fr; align-items: center; gap: 2.6rem; padding: 2.6rem; text-align: left; } /* 横並び時は列の幅いっぱいまで使う。 縦は「画面の高さ − カードの上下余白ぶん」で頭打ちにして、はみ出しを防ぐ */ .bb-product-detail__scroll:has(.bb-product-detail__video) .bb-product-detail__video { width: min(100%, max(240px, 88vh - 170px)); margin: 0; } } @media (max-width: 767.98px) { .bb-product-detail { width: 92vw; max-height: 82vh; } .bb-product-detail__scroll { padding: 2.4rem 1.4rem 1.6rem; } /* スマホはカードのmax-heightが82vhなので、それに合わせて逆算し直す */ .bb-product-detail__video { width: min(100%, max(180px, 78vh - 330px)); } } /* ---------- Company ---------- */ .bb-company { position: relative; color: #fff; background-size: cover; background-position: center; } .bb-company::before { content: ""; position: absolute; inset: 0; background: rgba(10, 15, 28, 0.82); } .bb-company > .container { position: relative; z-index: 1; } .bb-company-table { max-width: 900px; margin: 0 auto; background: rgba(255, 255, 255, 0.96); color: var(--bb-text); border-radius: 12px; overflow-x: auto; } .bb-company-table table { width: 100%; margin-bottom: 0; } .bb-company-table th { background: var(--bb-navy); color: #fff; font-weight: 700; white-space: nowrap; width: 9rem; padding: 1rem 1.2rem; vertical-align: top; } .bb-company-table td { padding: 1rem 1.2rem; line-height: 1.9; } .bb-company-table tr:not(:last-child) th, .bb-company-table tr:not(:last-child) td { border-bottom: 1px solid #e6e6e6; } /* ---------- Map: scroll reveal arc（半円が広がる演出） ---------- */ .bb-map-section { position: relative; overflow: hidden; } .bb-map-arc { position: absolute; z-index: 0; left: 50%; bottom: 0; width: min(160%, 1900px); aspect-ratio: 2 / 1; background: linear-gradient(135deg, #f4a89c, #fbc98a 55%, #fde9a8 100%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateX(-50%) scaleY(0); transform-origin: bottom center; will-change: transform; pointer-events: none; } .bb-map-section .container { position: relative; z-index: 1; } .bb-map-section .bb-section-head .bb-watermark { color: rgba(0, 0, 0, 0.05); } /* グレーの「MAP」と、その上に寸分違わず重なる白い複製。 複製側は assets/js/main.js が毎フレーム clip-path: inset(上% 0 0 0) を 書き換え、半円が実際にかぶっている高さぶんだけ下から現れるようにする */ .bb-watermark-wrap { position: relative; } .bb-watermark-wrap .bb-watermark { margin: 0; } .bb-map-section .bb-section-head .bb-watermark.bb-watermark--reveal { position: absolute; inset: 0; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); clip-path: inset(100% 0 0 0); pointer-events: none; } @media (max-width: 767.98px) { .bb-map-arc { width: 280%; aspect-ratio: 1.3 / 1; } } /* ---------- Map ---------- */ .bb-map-frame { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .bb-map-frame iframe { width: 100%; height: 420px; border: 0; display: block; } /* ---------- Stats（数字で見るボンドバンド） ---------- カード自体は最初から表示（ホバーで浮くのみ）。数字は assets/js/main.js の countup（[data-countup]）で常に0からカウントアップし、これはフェード演出の 対象にしない。画面に入ったタイミングで同じ処理が .is-in-view を付け、 カード上部のアイコンだけを下からふわっと遅れて浮かび上がらせる。 コンテナ幅を通常の.containerより少し広く取り、白いカードを グレー地に浮かせることで余白多めの「おしゃれ」な見せ方にしている。 */ .bb-stats .container { max-width: 1240px; } .bb-stats-grid { margin: 0; } .bb-stats-card { position: relative; height: 100%; /* 数字ブロックとラベルの開始位置を5枚で揃えるため縦並びのフレックスにする */ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1.2rem 2.4rem; background: #fff; border-radius: 20px; box-shadow: 0 18px 40px rgba(21, 24, 31, 0.07); transition: box-shadow 0.35s ease, transform 0.35s ease; } .bb-stats-card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(21, 24, 31, 0.12); } /* 各カード上部に添える短いグラデーションの飾り線 */ .bb-stats-card::before { content: ""; position: absolute; top: 0; left: 50%; width: 44px; height: 4px; border-radius: 999px; background: var(--bb-gradient); transform: translate(-50%, -2px); } /* カード上部のアイコンだけが、画面に入ったタイミングで下からふわっと 浮かび上がる。列ごとにわずかに遅延させて順番に浮かぶ。 */ .bb-stats-card__icon { display: block; width: 52px; height: 52px; margin: 0 auto 1.1rem; opacity: 0; transform: translateY(16px) scale(0.8); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .bb-stats-card.is-in-view .bb-stats-card__icon { opacity: 1; transform: translateY(0) scale(1); } .bb-stats-grid .bb-stats-col:nth-child(1) .bb-stats-card__icon { transition-delay: 0s; } .bb-stats-grid .bb-stats-col:nth-child(2) .bb-stats-card__icon { transition-delay: 0.12s; } .bb-stats-grid .bb-stats-col:nth-child(3) .bb-stats-card__icon { transition-delay: 0.24s; } .bb-stats-grid .bb-stats-col:nth-child(4) .bb-stats-card__icon { transition-delay: 0.36s; } .bb-stats-grid .bb-stats-col:nth-child(5) .bb-stats-card__icon { transition-delay: 0.48s; } .bb-stats-card__icon svg { width: 100%; height: 100%; display: block; } /* 数字と単位は必ず同じ行に置く。以前はカード幅に収まらず「歳」「時間」だけが 下の行に落ち、そのぶんラベルの位置もカードごとにずれていた。 min-height を決めておくと、文字サイズの違う男女比カードとも高さが揃う。 */ .bb-stats-card__num { font-family: var(--bb-font-serif); margin: 0 0 0.7rem; display: flex; align-items: flex-end; justify-content: center; min-height: 3rem; white-space: nowrap; font-weight: 700; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1; background: var(--bb-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .bb-stats-card__unit { margin-left: 0.12em; font-size: 0.4em; font-weight: 700; white-space: nowrap; } /* 男女比カードは「8人：7人」と数字ふたつぶんの横幅が必要なので、 ひと回り小さいサイズにして他のカードとバランスを取る */ .bb-stats-card__num--ratio { font-size: clamp(1.7rem, 2.6vw, 2.3rem); } .bb-stats-card__num--ratio .bb-stats-card__unit { font-size: 0.5em; } .bb-stats-card__sep { margin: 0 0.25em; } /* ラベルは2行のカードと3行のカードが混在するので、3行ぶんの高さを確保して どのカードも同じ位置から書き出されるようにする */ .bb-stats-card__label { margin: 0; min-height: calc(3 * 1.7em); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--bb-text); line-height: 1.7; } @media (max-width: 767.98px) { .bb-stats-card { padding: 2.4rem 1rem 1.8rem; } } /* ---------- Person（社員紹介）---------- 参考: otoden.co.jp のPeopleセクション。 カードを弧に沿って扇状に並べ、中央だけが正立して手前に来る。 外側へ行くほど傾いて沈む量は、JS(assets/js/main.js)がスクロール位置から 計算して transform で当てる。ここでは「傾いても崩れない箱」を用意しておく。 otodenの黄×青はそのまま使わず、ブランドの赤〜金グラデーションとネイビーに置き換えている。 */ .bb-person { position: relative; overflow: hidden; background: linear-gradient(180deg, #fffaf3 0%, #fdeed9 50%, #fffaf3 100%); } /* 上下端のグラデーション罫。セクションの区切りを細く示す */ .bb-person::before, .bb-person::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--bb-gradient); opacity: 0.4; } .bb-person::before { top: 0; } .bb-person::after { bottom: 0; } /* ---- 導入部（人数バッジ・キャッチ・リード） ---- */ .bb-person-intro { position: relative; margin: -1.5rem 0 3rem; text-align: center; } /* 人数のバッジ。数字はJSが0から数え上げる */ .bb-person-badge { display: inline-flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.9rem; padding: 0.35rem 1.2rem 0.45rem; border-radius: 999px; background: var(--bb-gradient); color: #fff; box-shadow: 0 10px 24px rgba(226, 49, 29, 0.22); } .bb-person-badge__num { font-family: var(--bb-font-serif); font-size: 1.7rem; font-weight: 700; line-height: 1; /* 数え上がる間に幅が変わって文字が揺れないよう、数字の幅を揃える */ font-variant-numeric: tabular-nums; } .bb-person-badge__txt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; } /* キャッチ。行ごとに下から上へ拭き出すように現れる。 遅延は行の順番から出すので、HTML側に番号を書く必要はない */ .bb-person-catch { margin: 0 0 1.2rem; font-size: clamp(1.4rem, 3.2vw, 2.3rem); font-weight: 900; line-height: 1.5; letter-spacing: 0.02em; color: var(--bb-navy); } .bb-person-catch__line { display: block; clip-path: inset(0 0 100% 0); transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .bb-person-catch__line:nth-child(1) { transition-delay: 0.1s; } .bb-person-catch__line:nth-child(2) { transition-delay: 0.25s; } .bb-person-intro.is-in-view .bb-person-catch__line { clip-path: inset(0 0 0 0); } .bb-person-lead { max-width: 44rem; margin: 0 auto; line-height: 2; color: #5d626b; } /* ---- 弧に沿った並び ---- */ .bb-person-slider { position: relative; } /* カードを横一列に並べ、JSが一定速度で左へ流し続ける。 スクロールスナップとスムーススクロールは指定しない。どちらも scrollLeft への 書き込みと競合し、流れが引き戻されたり1フレームごとに補間されたりするため。 左右の余白は本文の始まりに揃う程度の固定量。 下の余白は、外側のカードが沈み込んでも切れないための逃げ。 overflow-x を指定すると縦もはみ出せなくなるため、はみ出しは余白で吸収する */ .bb-person-track { display: flex; align-items: flex-start; gap: 1.6rem; margin: 0; padding: 3rem clamp(1rem, 5vw, 4rem) 7rem; list-style: none; overflow-x: auto; /* スクロールバーは見せない（左右ボタンとドラッグで操作させる） */ scrollbar-width: none; } .bb-person-track::-webkit-scrollbar { display: none; } /* 傾きと沈み込みは transform、登場時のせり上がりは translate。 別プロパティなので同時にかかっても打ち消し合わない。 transform はJSが毎フレーム書き換えるので、遷移は付けない。 付けると常に前のフレームを追いかける形になり、弧の動きが鈍って見える */ .bb-person-card { flex: 0 0 auto; width: clamp(250px, 26vw, 320px); transform-origin: 50% 50%; will-change: transform; opacity: 0; translate: 0 36px; } /* 画面に入ったら時間差でせり上がる。--i はJSが並び順から付ける */ .bb-person-card.is-in-view { opacity: 1; translate: 0 0; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.12s), translate 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.12s); } /* ---- カード本体 ---- */ .bb-person-card__frame { position: relative; padding: 2.4rem 1.3rem 1.5rem; border-radius: 10px; background: #fffdf9; box-shadow: 0 18px 40px rgba(28, 35, 51, 0.16); } /* 中央に来たカードだけ、影を強めて手前に出ていることを示す */ .bb-person-card.is-active .bb-person-card__frame { box-shadow: 0 26px 60px rgba(28, 35, 51, 0.26); } /* 番号バッジ。カードの左上角に食い込ませる */ .bb-person-card__no { font-family: var(--bb-font-serif); position: absolute; top: -18px; left: -10px; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; margin: 0; border-radius: 50%; background: var(--bb-gradient); box-shadow: 0 8px 18px rgba(226, 49, 29, 0.3); font-size: 1.2rem; font-weight: 700; line-height: 1; color: #fff; } /* 写真の上に置く職種（英字）。氏名は載せないため、ここは役割で持たせる */ .bb-person-card__role-en { margin: 0 0 0.7rem; padding-bottom: 0.55rem; border-bottom: 1px dashed rgba(28, 35, 51, 0.3); text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; /* 字間ぶん右にずれて見えるのを戻す */ text-indent: 0.24em; text-transform: uppercase; color: #8b8f98; } /* ---- 写真 ---- */ .bb-person-card__photo { position: relative; aspect-ratio: 3 / 3.6; border-radius: 6px; background: var(--bb-navy); } /* 写真の切り抜き枠。ここで overflow を切るので、拡大しても枠からはみ出さない。 縦書きキャッチは枠の外（.bb-person-card__photo 直下）に置いたまま はみ出させたいので、img だけをこの span で包んでいる */ .bb-person-card__crop { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; } /* 写真ごとの寄せ方は img の style で指定する。 --focus … 顔の位置（左右 上下）。ここを枠の中心に寄せる --zoom … 拡大率。全身写真など人物が小さく写っているときだけ 1 より大きくする --focus を object-position と transform-origin の両方に使うので、 拡大しても顔の位置がずれない */ .bb-person-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 50%); } /* 写真がまだ届いていない枠。届いたら is-empty と .bb-person-card__soon を外し、 を入れるだけで通常のカードに戻る */ .bb-person-card__photo.is-empty { background: #eef0f4; border: 1px dashed rgba(28, 35, 51, 0.25); } .bb-person-card__soon { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; gap: 0.35rem; margin: 0; text-align: center; color: rgba(28, 35, 51, 0.42); } .bb-person-card__soon b { font-family: var(--bb-font-serif); font-size: 0.8rem; letter-spacing: 0.28em; text-indent: 0.28em; } .bb-person-card__soon span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; } /* 写真をいったん覆っておき、カードが画面に入ったら下へ引いて中身を見せる */ .bb-person-card__mask { position: absolute; inset: 0; z-index: 2; border-radius: 6px; background: var(--bb-gradient); transform-origin: bottom center; transition: scale 0.9s cubic-bezier(0.76, 0, 0.24, 1); transition-delay: calc(0.25s + var(--i, 0) * 0.12s); } .bb-person-card.is-in-view .bb-person-card__mask { scale: 1 0; } /* 縦書きのキャッチ。写真の右側にはみ出す白い短冊 */ .bb-person-card__catch { position: absolute; top: 12px; right: -12px; z-index: 3; margin: 0; padding: 0.9rem 0.5rem; background: #fff; box-shadow: 0 8px 20px rgba(28, 35, 51, 0.18); writing-mode: vertical-rl; font-size: clamp(0.82rem, 1.1vw, 0.95rem); font-weight: 900; line-height: 1.7; letter-spacing: 0.1em; color: var(--bb-navy); /* 下から立ち上がるように出す */ clip-path: inset(0 0 100% 0); transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(0.55s + var(--i, 0) * 0.12s); } .bb-person-card.is-in-view .bb-person-card__catch { clip-path: inset(0 0 0 0); } /* ---- 本文 ---- */ .bb-person-card__content { padding-top: 1.1rem; text-align: center; } /* 氏名のかわりに職種を見出しにする。日本語で長くなるぶん、氏名より一段小さく */ .bb-person-card__role { margin: 0 0 0.55rem; font-size: 1.05rem; font-weight: 900; letter-spacing: 0.1em; color: var(--bb-text); } .bb-person-card__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0 0 1rem; padding: 0; list-style: none; } .bb-person-card__meta li { padding: 0.25em 0.8em; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; } .bb-person-card__meta .is-role { background: var(--bb-gradient); color: #fff; } .bb-person-card__meta .is-from { background: var(--bb-navy); color: #fff; } /* ---- Q&A ---- */ .bb-person-card__qa { display: grid; grid-template-columns: 5.8em 1fr; gap: 0; margin: 0; text-align: left; } .bb-person-card__qa dt, .bb-person-card__qa dd { padding: 0.6rem 0; border-top: 1px dashed rgba(28, 35, 51, 0.22); font-size: 0.75rem; line-height: 1.7; } .bb-person-card__qa dt { padding-right: 0.5rem; font-weight: 700; color: var(--bb-navy); } .bb-person-card__qa dd { margin: 0; color: #5d626b; } /* ---- 左右ボタン ---- */ .bb-person-nav { display: flex; justify-content: center; gap: 1rem; margin-top: -3.5rem; } .bb-person-nav__btn { width: 48px; height: 48px; padding: 0; border: 1px solid rgba(28, 35, 51, 0.18); border-radius: 50%; background: #fff; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; } /* 矢印は span を回転させた border で描く */ .bb-person-nav__btn span { display: block; width: 9px; height: 9px; margin: 0 auto; border-top: 2px solid var(--bb-navy); border-right: 2px solid var(--bb-navy); transition: border-color 0.3s ease; } [data-person-prev] span { rotate: -135deg; translate: 2px 0; } [data-person-next] span { rotate: 45deg; translate: -2px 0; } .bb-person-nav__btn:hover:not(:disabled) { background: var(--bb-gradient); border-color: transparent; } .bb-person-nav__btn:hover:not(:disabled) span { border-color: #fff; } .bb-person-nav__btn:disabled { opacity: 0.3; cursor: default; } @media (max-width: 767.98px) { .bb-person-intro { margin-bottom: 2.2rem; } .bb-person-card { width: min(74vw, 300px); } .bb-person-track { padding: 2.5rem 0 5.5rem; } .bb-person-nav { margin-top: -2.5rem; } } /* 動きを抑える設定の環境では、傾きも覆いも行わず正立のまま見せる。 （JS側も transform を当てないようにしてある） */ @media (prefers-reduced-motion: reduce) { .bb-person-track { padding-bottom: 3rem; } .bb-person-card, .bb-person-card.is-in-view { opacity: 1; translate: none; transition: none; } .bb-person-card__mask { display: none; } .bb-person-card__catch { clip-path: none; transition: none; } .bb-person-catch__line { clip-path: none; transition: none; } .bb-person-nav__btn, .bb-person-nav__btn span { transition: none; } } /* ---------- History ---------- */ .bb-history { max-width: 760px; margin: 0 auto; position: relative; padding-left: 2.5rem; } /* ベースのトラック線（常時薄く表示） */ .bb-history::before { content: ""; position: absolute; left: 0.25rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: #e3e3e3; } /* スクロールに応じて下に伸びる線 */ .bb-history-line { position: absolute; left: 0.25rem; top: 0.4rem; bottom: 0.4rem; width: 2px; } .bb-history-line__fill { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--bb-red), var(--bb-gold)); transform: scaleY(0); transform-origin: top; will-change: transform; } .bb-history-item { position: relative; padding-bottom: 1.9rem; opacity: 0; transform: translateY(16px); will-change: opacity, transform; } .bb-history-item::before { content: ""; position: absolute; left: -2.5rem; top: 0.4rem; width: 10px; height: 10px; border-radius: 50%; background: var(--bb-red); } .bb-history-date { font-weight: 800; color: var(--bb-red); margin-right: 0.6rem; } /* ---------- Remote work ---------- */ /* 画像とテキストを組にして隣り合わせる。Bootstrapの半々カラムだと画像側の 余った列幅ぶんテキストと離れて見えるため、ここは素のflexで組んでいる。 */ .bb-remotework-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; max-width: 900px; margin: 0 auto; } .bb-remotework-photo { flex: 0 1 400px; } .bb-remotework-text { flex: 1 1 320px; } .bb-remotework img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .bb-remotework ul { list-style: none; padding: 0; margin: 0; } .bb-remotework li { position: relative; padding: 0.6rem 0 0.6rem 1.8rem; line-height: 1.8; } .bb-remotework li::before { content: "✓"; position: absolute; left: 0; color: var(--bb-red); font-weight: 800; } /* チェックリストの下に置く「テレワークの様子」の画像。幅を抑えて説明図としての見た目にする */ /* 説明書きの拡大ボタン。縮小表示では文字が読めないため、押すとページ内で拡大する。