/* ============================================================ 第10世代の本番CSS(2026-08-18。原本 sample/keiru-ai_portfolio-10th-*.png) 方針: 「Let's Enjoy the AI-Native Era.」— 白いキャラクター(keiru-bk-icon)+丸ゴシック+ 面色(セージ/ペールグリーン/ローズ/明地)。WORKS・VIDEO・NOTESのカードは第9世代を継承。 WebGL不使用・奥行きリビール(--e)と時間差リビール(--se)は継承 ============================================================ */ :root{ --w:#FFFFFF; --w2:#F6F6F5; /* 明地(WORKS/Music/Notes。原本実測 #F6F6F5〜#F7F7F7) */ /* 第10世代の面色(原本実測) */ --sage:#99B38E; /* ヒーロー/Service/Philosophy */ --pale:#D2E4CA; /* ローディング/Contact */ --rose:#BF7D7D; /* Profile */ --pgreen:#D3E9CE; /* ローズ地の上の見出し(Profile/Skills) */ --red:#FF5757; /* Informationの点・Musicのプレースホルダ・紙飛行機 */ --sblue:#628FCC; /* Serviceのタイトル */ --pill:#B6D6E7; /* 絞り込み/タグ/SNS丸の水色の枠(原本実測 #B6D6E7〜#9BC9E1) */ --round:var(--en); /* 丸ゴシック(ヒーロー/Philosophy/Profile本文/Information)=英字トークンと同一 */ --card-r:18px; /* 角丸(第5世代と同値) */ --ink:#14171A; /* 墨 */ --ink2:#4A4F53; /* 本文 */ --mute:#676D72; /* 補足・番号(WCAG AA: 地に対して4.6:1。#8B9196は2.8で不足だった) */ /* 差し色は135°の線グラデーション1本だけ(2026-08-13にユーザー指定)。 **面は指定色そのまま。輪郭は --accent-edge の1px枠線が担う**。 面の色だけで選択状態を示そうとすると地との差3.0が要り、淡い色が使えなくなる。 枠線で輪郭を作れば面は自由に淡くでき、墨文字のコントラストも10.32と余裕が出る。 枠線 #3E8EA4 と地の差は3.37でUI部品の輪郭として十分。 */ --accent-a:#9ECAE6; /* 青側 */ --accent-b:#B2D8D1; /* 緑側 */ --accent:linear-gradient(135deg, var(--accent-a), var(--accent-b)); --accent-edge:#3E8EA4; /* 面の輪郭。グラデーションが使えない線(ホバー下線)にも使う */ --bulb:#FAD27B; /* MAKINGの電球の輪郭色(イラスト実測)。ABOUTスキルピルの枠・WORKSのTOOLピルの面 */ --bulb-edge:#D9A93A; /* 電球色の面に載せる輪郭(--accent-edge と同じ役割。TOOL絞り込みピルの選択時) */ --accent-solid:#3E8EA4; /* ::selection の背景(グラデーション不可のため単色) */ --on-accent:var(--ink); /* 面に載せる文字色。面が淡いので墨(10.32) */ --line:#E2E2DD; /* ヘアライン */ --line2:#EFEFEC; --pad:clamp(22px,6vw,104px); --hd:clamp(78px,6.6vw,96px); /* 第10世代はヘッダー要素が一回り大きい */ /* ヘッダー帯の高さ。ロゴとメニューはこの帯の上下中心に置く。 最小値を74pxにしてあるのは、狭い幅でボタン上の余白が 6pxまで詰まっていたため(いまは13px〜15px)。 60pxにするとタブレット幅だけ余白が逆転して狭くなる */ --edge:clamp(16px,2.2vw,32px); /* 固定UIを画面の両端へ寄せる余白(本文の--padとは別) */ --mb:clamp(48px,3.6vw,58px); /* メニューボタンの直径 */ --maxw:1200px; --jp:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif; --mincho:"Shippori Mincho B1",serif; --en:"M PLUS Rounded 1c","Zen Maru Gothic",var(--jp); /* 英字はすべてヒーローと同じ丸ゴ(2026-08-18ユーザー指示。Archivoは廃止) */ --ease:cubic-bezier(.22,.9,.3,1); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--w2); color:var(--ink); font-family:var(--jp); font-size:16px; line-height:1.95; letter-spacing:.02em; text-wrap:pretty; -webkit-font-smoothing:antialiased; } img{max-width:100%; height:auto; display:block} a{color:inherit} h1,h2,h3,p,ul,figure{margin:0} ul{list-style:none; padding:0} /* ::selection はグラデーション不可(実機確認済み)。単色+墨文字にする (白文字は3.74で不足・墨は4.83) */ ::selection{background:var(--accent-solid); color:var(--ink)} /* 第10世代は面色の節が並ぶので地のグラデーションは使わない(フラット) */ /* 画面上端のフロスト: 固定ブランド/メニューを常に読める地の上に置く */ body::before{ content:""; position:fixed; top:0; left:0; right:0; height:calc(var(--hd) + 22px); z-index:40; pointer-events:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); -webkit-mask-image:linear-gradient(#000 42%, transparent); mask-image:linear-gradient(#000 42%, transparent); } /* ---------- 固定ブランド / メニュー ---------- */ /* ロゴとメニューは同じ高さの帯(--hd)の上下中心に置く。 個別の top で合わせると必ずズレるので、帯の高さを共有して中心を一致させる */ .brand{ position:fixed; top:0; left:var(--edge); z-index:60; /* iOS Safari では backdrop-filter を持つ帯(body::before)の上に来る固定要素の 描画が落ちることがある。独自レイヤーへ昇格させて確実に最前面へ出す */ transform:translateZ(0); height:var(--hd); display:flex; align-items:center; color:var(--ink); text-decoration:none; } .brand svg{height:clamp(24px,2.1vw,30px); width:auto; display:block} .menu-btn{ position:fixed; top:calc((var(--hd) - var(--mb)) / 2); right:var(--edge); z-index:60; transform:translateZ(0); /* 同上(iOS Safari対策) */ width:var(--mb); height:var(--mb); border:0; border-radius:50%; background:var(--ink); cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; transition:transform .35s var(--ease), background .3s; } .menu-btn:hover{transform:translateZ(0) scale(1.06)} .menu-btn span{ display:block; width:44%; height:3px; border-radius:2px; background:#fff; /* 太めの3本線(第10世代) */ transition:transform .35s var(--ease), opacity .25s; } /* 開いている間はバツに変わる(第7世代と同じ挙動) */ .drawer-open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)} .drawer-open .menu-btn span:nth-child(2){opacity:0} .drawer-open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){.menu-btn span{transition:none}} /* ---------- ページ間のクロスフェード遷移(View Transitions API) ---------- Chrome126+/Safari18.2+ のみ。非対応ブラウザと reduced-motion は通常遷移。 第5世代(style.css)にはあったが第9世代で抜け落ちていたため復活 */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:vtOut .3s ease both} ::view-transition-new(root){animation:vtIn .55s ease both} @keyframes vtOut{to{opacity:0}} @keyframes vtIn{from{opacity:0}to{opacity:1}} } /* ---------- ヘッダーのJA/ENトグル(2026-08-15。メニューボタンの左) ---------- 全ページ共通。ドロワーが開いても最前面に残る(z-index 60 > drawer 58)ので、 ドロワー内の重複トグルは廃止してここに集約 */ .hd-lang{ --lh:clamp(34px,2.9vw,42px); position:fixed; top:calc((var(--hd) - var(--lh)) / 2); right:calc(var(--edge) + var(--mb) + 14px); z-index:60; transform:translateZ(0); display:flex; gap:10px; } .hd-lang .lang-btn{ padding:0 clamp(16px,1.6vw,26px); height:var(--lh); font-size:clamp(13px,1.1vw,17px); font-weight:800; color:var(--ink); background:rgba(255,255,255,.9); border:2px solid var(--pill); letter-spacing:.06em; } .hd-lang .lang-btn.is-active{background-color:transparent; background-image:var(--accent); border-color:var(--pill)} .hd-lang .lang-btn:hover{border-color:var(--accent-edge)} /* ---------- ドロワー(全画面。2026-08-15にスライド式から変更) ---------- 右からのスライドをやめ、画面全体が「その場でふわっと立ち上がる」。 透明→不透明 + わずか1.02倍からの縮小(押し出しではなく立ち上がり)。 項目は下から少し上がりながらブラーが抜ける=ヒーローの「墨が乾く」と同じ語彙。 背景ベール(.drawer-bg)は不要になったので廃止。閉じる=×/Escape/項目クリック/ 面の空きエリアのタップ(JS) */ .drawer{ position:fixed; inset:0; z-index:58; background:rgba(249,251,249,.93); /* 原本 #F9FBF9。背後のヒーローがごく薄く透ける */ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:calc(var(--hd) + 24px) var(--pad) clamp(28px,5vh,48px); display:grid; grid-template-rows:1fr auto; align-items:center; transform:scale(1.02); opacity:0; visibility:hidden; transition:opacity .55s var(--ease), transform .7s var(--ease), visibility 0s .7s; } .drawer-open .drawer{ transform:none; opacity:1; visibility:visible; transition:opacity .55s var(--ease), transform .7s var(--ease), visibility 0s; cursor:zoom-out; /* 空きエリア=閉じる、の合図 */ } .drawer nav, .drawer-foot{cursor:auto} .drawer nav{align-self:center} /* 番号を固定幅の列に置き、語頭を1本の縦線に揃える。全体を画面中央へ */ .drawer nav ul{display:grid; gap:clamp(4px,1vh,10px); width:max-content; margin-inline:auto} .drawer nav a{ display:grid; grid-template-columns:clamp(44px,4vw,64px) auto; align-items:center; /* 番号は語の上下中央 */ text-decoration:none; font-family:var(--en); font-weight:700; /* 第10世代: 太い和文ゴシックのラテン */ font-size:clamp(30px,4.6vw,60px); line-height:1.15; letter-spacing:.01em; padding:clamp(4px,.8vh,8px) 0; opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease), color .3s; } .drawer nav a:hover{color:var(--accent-edge)} .drawer nav a i{ font-style:normal; font-family:var(--en); font-weight:700; font-size:clamp(14px,1.5vw,22px); letter-spacing:.06em; color:#6E6E6E; padding-left:.1em; line-height:1; } .drawer-open .drawer nav a{opacity:1; transform:none; filter:none} .drawer-open .drawer nav li:nth-child(1) a{transition-delay:.18s} .drawer-open .drawer nav li:nth-child(2) a{transition-delay:.25s} .drawer-open .drawer nav li:nth-child(3) a{transition-delay:.32s} .drawer-open .drawer nav li:nth-child(4) a{transition-delay:.39s} .drawer-open .drawer nav li:nth-child(5) a{transition-delay:.46s} .drawer-open .drawer nav li:nth-child(6) a{transition-delay:.53s} .drawer-open .drawer nav li:nth-child(7) a{transition-delay:.60s} /* 下段: 言語切替(左)とSNS(右)を1行に。項目の後にふわっと続く */ .drawer-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease) .55s, transform .7s var(--ease) .55s; } .drawer-open .drawer-foot{opacity:1; transform:none} .lang-switch{display:flex; gap:8px} .lang-btn{ border:1px solid var(--line); background:none; cursor:pointer; padding:7px 16px; border-radius:999px; font-family:var(--en); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--mute); transition:color .25s, border-color .25s, background .25s; } .lang-btn:hover{color:var(--ink); border-color:var(--ink)} .lang-btn.is-active{color:var(--on-accent); background-image:var(--accent); border-color:var(--accent-edge)} /* SNSの丸アイコン(白面。note/Zenn/GitHubのマークが四角いので丸の内側を白で塗って形を整える) */ .sns-icon{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--w); display:grid; place-content:center; transition:border-color .3s, transform .3s var(--ease); } .sns-icon:hover{border-color:var(--accent-edge); transform:translateY(-2px)} .sns-icon img{width:17px; height:17px; display:block} .drawer-sns{display:flex; gap:clamp(10px,1.2vw,18px); margin-left:auto} .drawer-sns .sns-icon{width:clamp(44px,3.6vw,58px); height:clamp(44px,3.6vw,58px); border:2px solid var(--pill)} .drawer-sns .sns-icon img{width:clamp(18px,1.6vw,26px); height:clamp(18px,1.6vw,26px)} @media (prefers-reduced-motion:reduce){ .drawer, .drawer nav a, .drawer-foot{transition:none !important; transform:none !important; filter:none !important} } /* ---------- セクションの器 ---------- */ .s{ position:relative; z-index:1; padding:clamp(80px,12vh,150px) var(--pad); background:transparent; } /* 1画面型の節は画面の高さいっぱいに取り、中身を上下中央へ(2026-08-18ユーザー指示。Notesを他節と揃える) */ .s.is-full{min-height:100svh; display:flex; flex-direction:column; justify-content:center} .s.is-full > .wrap{width:100%} /* 節の面色(第10世代)。全幅で塗る */ .bg-sage{background:var(--sage)} .bg-pale{background:var(--pale)} .bg-rose{background:var(--rose)} .bg-light{background:var(--w2)} .wrap{max-width:var(--maxw); margin-inline:auto; width:100%} /* セクション見出し: 太い見出し + 右端の和文サイドラベル(「つくったもの」等) */ .s-head{display:flex; align-items:baseline; gap:clamp(14px,2.4vw,28px); margin-bottom:clamp(30px,4.6vw,56px)} .s-head h2{ font-family:var(--en); font-weight:800; font-size:clamp(34px,4.6vw,64px); letter-spacing:.02em; line-height:1; } .s-head.is-center{justify-content:center; text-align:center} .s-head .jp{font-family:var(--jp); font-weight:700; font-size:clamp(15px,1.5vw,22px); color:var(--ink); margin-left:auto; letter-spacing:.06em} /* カード類がステージのイラストより手前に来るようにする */ .s > .wrap{position:relative; z-index:1} /* ---------- ガラスカード(第8世代から継承) ---------- */ .gc{ background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(18px) saturate(118%); backdrop-filter:blur(18px) saturate(118%); border:1px solid rgba(255,255,255,.9); box-shadow:0 24px 64px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035); border-radius:var(--card-r); padding:clamp(28px,4.2vw,58px); } .gc-dark{ background:rgba(20,23,26,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 76px rgba(20,23,26,.3); color:#fff; } /* ---------- カードの時間差リビール(.stagger。JSが子へ --se を配る) ---------- グリッド全体が1塊で出るのをやめ、1枚ずつ遅れて現れる。 容器のリビール(.d)完了後は data-done が最終状態を固定する= /api/notes・/api/videos で差し替わった子もこの規則で表示される */ .js .stagger>*{ opacity:var(--se,0); transform:translate3d(0, calc((1 - var(--se,0)) * 26px), 0); } .js .stagger[data-done="1"]>*{opacity:1; transform:none} @media (prefers-reduced-motion:reduce){ .js .stagger>*{opacity:1 !important; transform:none !important} } /* ---------- 奥行きリビール(JS が --e を 0→1 で入れる) ---------- */ .js .d{ opacity:var(--e,0); transform:perspective(1000px) translate3d(0, calc((1 - var(--e)) * 44px), calc((1 - var(--e)) * -260px)); will-change:transform,opacity; } .js .d.d-soft{filter:blur(calc((1 - var(--e)) * 2.5px))} @media (prefers-reduced-motion:reduce){ .js .d{opacity:1 !important; transform:none !important; filter:none !important} } /* ============================================================ 03 WORKS — 単体カード式(第7世代の作りを継承・角丸でポップに) ============================================================ */ .wk-filter{display:flex; flex-wrap:wrap; gap:8px 10px; margin-bottom:clamp(26px,4vw,42px)} .wk-fbtn{ border:2px solid var(--pill); background:#fff; cursor:pointer; padding:clamp(7px,.75vw,11px) clamp(16px,1.6vw,26px); border-radius:999px; font-family:var(--en); font-weight:800; font-size:clamp(12px,1.05vw,16px); letter-spacing:.06em; color:var(--ink); transition:color .25s, border-color .25s, background .25s, transform .3s var(--ease); } .wk-fbtn:hover{border-color:var(--accent-edge); transform:translateY(-2px)} .wk-fbtn.is-on{color:var(--on-accent); background-image:var(--accent); border-color:var(--accent-edge)} /* 選択中の絞り込みピルはカテゴリピルと同じ色(2026-08-16)。ALLは差し色のグラデのまま=全色を束ねる */ .wk-fbtn.is-on[data-cat="app"] {background-image:none; background-color:var(--accent-b); border-color:var(--accent-edge)} .wk-fbtn.is-on[data-cat="web"] {background-image:none; background-color:var(--accent-a); border-color:var(--accent-edge)} .wk-fbtn.is-on[data-cat="tool"]{background-image:none; background-color:var(--bulb); border-color:var(--bulb-edge)} html:not(.js) .wk-filter{display:none} .wk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,30px)} .wk-card{ position:relative; /* ストレッチリンクの基準 */ display:flex; flex-direction:column; overflow:hidden; color:var(--ink); border-radius:var(--card-r); /* ← 角丸でポップ感 */ background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%); border:1px solid rgba(255,255,255,.9); box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035); } .wk-card[hidden]{display:none} .wk-thumb{position:relative; display:block; overflow:hidden; border-radius:calc(var(--card-r) - 1px) calc(var(--card-r) - 1px) 0 0} .wk-thumb img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block} .wk-thumb::after{ content:"View More"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--en); font-weight:700; font-size:12.5px; letter-spacing:.18em; color:#fff; background:rgba(20,23,26,.5); opacity:0; pointer-events:none; } .wk-card:hover .wk-thumb::after,.wk-card:focus-within .wk-thumb::after{opacity:1} .wk-body{display:flex; flex-direction:column; flex:1; padding:clamp(18px,1.9vw,26px)} .wk-head{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px} /* カテゴリは色付きの淡いピル(2026-08-16ユーザー要望)。既存トークンのみ= APP=差し色の緑側 / WEB=青側 / TOOL=電球色(ABOUTのスキルピルと同系)。文字は墨(コントラスト10以上) */ .wk-cat{ font-family:var(--en); font-weight:700; font-size:10.5px; letter-spacing:.16em; color:var(--ink); padding:4px 11px; border-radius:999px; line-height:1.5; background:var(--line2); } .wk-card[data-cat="app"] .wk-cat{background:var(--accent-b)} .wk-card[data-cat="web"] .wk-cat{background:var(--accent-a)} .wk-card[data-cat="tool"] .wk-cat{background:var(--bulb)} .wk-links{display:flex; align-items:center; gap:7px} .wk-ic{ width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:var(--w); display:grid; place-content:center; transition:border-color .3s, transform .3s var(--ease); } .wk-ic:hover{border-color:var(--ink); transform:translateY(-2px)} .wk-ic img{width:14px; height:14px; display:block} .wk-site{ font-family:var(--en); font-weight:700; font-size:10.5px; letter-spacing:.14em; color:var(--ink2); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:0 14px; background:var(--w); height:30px; display:inline-flex; align-items:center; /* アイコン(30px)と高さを揃える */ transition:border-color .3s, color .3s, transform .3s var(--ease); } .wk-site:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px)} .wk-card h3{font-size:16.5px; font-weight:700; line-height:1.55; letter-spacing:.02em; margin-top:10px} .wk-card h3 a{text-decoration:none} /* カード全体を1つのリンク面に(2026-08-16ユーザー要望「どの部分でも浮き、指カーソル」)。 タイトルのリンクの::afterをカードいっぱいに広げ、右上の関連リンク(.wk-links)だけを その上(z-index:2)に置く=SNSアイコン/サイトピルはそれぞれの行き先へ、他はどこを押しても作品へ */ .wk-card h3 a::after{content:""; position:absolute; inset:0; z-index:1} .wk-links{position:relative; z-index:2} /* 説明文は2行まで(2026-08-14ユーザー指示)。超過分は…で切り、 足りない場合も2行ぶんの高さを確保してカードの高さを揃える */ .wk-text{ font-size:13.5px; line-height:1.9; letter-spacing:.012em; color:var(--ink2); margin-top:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(2 * 1.9em); } .wk-note{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden} .wk-note{font-size:12px; line-height:1.85; letter-spacing:.012em; color:var(--mute); margin-top:12px} /* ページ送り(1ページ6件) */ .wk-page{display:flex; justify-content:center; gap:12px; margin-top:clamp(30px,4vw,46px)} .wk-pbtn{ min-width:clamp(44px,3.6vw,56px); height:clamp(44px,3.6vw,56px); border-radius:999px; cursor:pointer; border:2px solid var(--pill); background:#fff; font-family:var(--en); font-weight:700; font-size:clamp(14px,1.2vw,18px); color:var(--ink); transition:color .25s, border-color .25s, background .25s, transform .3s var(--ease); } .wk-pbtn:hover{border-color:var(--accent-edge); transform:translateY(-2px)} .wk-pbtn.is-on{color:var(--on-accent); background-image:var(--accent); border-color:var(--accent-edge)} /* サムネは常時カラー(2026-08-16。差し色とVIDEOの部屋の絵が入り、 モノクロ→カラーのホバーは役目を終えた=ユーザー判断)。 ホバーはカード全体が「ふわっと浮く」だけ(浮き8px・.55s・影を深く。サムネの拡大はしない)。 サムネの「View More」の覆いは導線の合図として残す */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ .wk-card{transition:transform .55s var(--ease), box-shadow .55s var(--ease)} .wk-card:hover, .wk-card:focus-within{transform:translateY(-8px); box-shadow:0 34px 70px rgba(20,23,26,.14), 0 4px 10px rgba(20,23,26,.04)} .wk-thumb::after{transition:opacity .35s var(--ease)} } @media (max-width:1000px){.wk-grid{grid-template-columns:repeat(2,1fr)}} /* SPは縦積みでなく横スクロール(2026-08-14ユーザー要望)。 次のカードを少し見せて(80vw)スワイプできることを伝える。 margin/paddingの相殺: 横=全幅ブリード(--pad) / 縦=カードの影の逃げ場(44px) */ @media (max-width:640px){ .wk-grid{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(80vw,320px); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); scroll-padding-inline:var(--pad); margin-block:-44px; padding-block:44px; scrollbar-width:none; } .wk-grid::-webkit-scrollbar{display:none} .wk-grid>.wk-card{scroll-snap-align:start} } br.sp-only{display:none} @media (max-width:760px){br.sp-only{display:inline} br.pc-only{display:none}} .nt-more a{ color:var(--ink2); font-weight:500; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:1px; } .nt-more a:hover{color:var(--ink); border-bottom-color:var(--accent-solid)} /* ============================================================ 05 NOTES — 記事ごとの角丸カード3枚(第7世代の作り) ============================================================ */ .nt-list{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px)} .nt-item{ display:flex; flex-direction:column; gap:10px; text-decoration:none; border-radius:var(--card-r); padding:clamp(20px,2vw,28px); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%); border:1px solid rgba(255,255,255,.9); box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035); } /* 媒体タグ(Zenn / note)だけを差し色のピルに。カード面を塗ると タグと日付(--mute)が3.0前後まで落ちるうえ、面積が大きすぎて 差し色が基調色になってしまうため、機能のある小さい面にだけ使う */ .nt-tag{ align-self:flex-start; font-family:var(--en),var(--jp); font-weight:700; font-size:10.5px; letter-spacing:.12em; color:var(--ink); background-image:var(--accent); border:1px solid var(--accent-edge); border-radius:999px; padding:4px 11px; line-height:1.5; } .nt-title{font-weight:700; font-size:clamp(13.5px,1.25vw,15.5px); line-height:1.9; color:var(--ink)} .nt-date{margin-top:auto; padding-top:10px; font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.12em; color:var(--mute)} .nt-lede{font-size:clamp(15px,1.5vw,22px); line-height:1.9; color:var(--ink); margin-bottom:clamp(24px,3vw,40px)} .nt-more{margin-top:clamp(28px,4vw,42px); font-size:clamp(15px,1.5vw,22px); line-height:1.9; color:var(--ink)} .nt-more a{color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1.5px; border-bottom:0} .nt-more a:hover{color:var(--accent-edge)} @media (hover:hover) and (prefers-reduced-motion:no-preference){ .nt-item{transition:transform .4s var(--ease), box-shadow .4s var(--ease)} .nt-item:hover{transform:translateY(-5px); box-shadow:0 28px 60px rgba(20,23,26,.12)} } @media (max-width:900px){.nt-list{grid-template-columns:1fr}} /* ============================================================ VIDEO — 部屋の絵(全幅・視差)のテレビへYouTubeを埋め込む(2026-08-16刷新) 構造: .pin(WORKS+VIDEO) > #video > .vd-stage(全幅) > .vd-zoom(クリップ) > .vd-room[data-par](視差レイヤー) > .vd-scale(1.1倍) > 絵 + .vd-screen(黒画面) + .vd-cap(見出し。逆向き視差) + .vd-ch(選局。テレビ台の上) + .vd-more - 黒画面の座標は原本 sample/video-image-9th.png の実測(550,236→1368,712)を%指定 - 動画は黒画面へ「幅合わせ」で絶対配置(高さ96.66%)。aspect-ratio任せにすると iframeだけ幅基準に解決され下へはみ出す(実機で確認) - テレビの点灯(--tvon)・乗り上げ(--cover)はJSがスクロールから配る - SP: テレビ寄りのトリミング画像(4:3)。見出し/選局/VIEW MOREは絵の外(墨)。乗り上げなし - 旧「カード3枚」構成は廃止(2026-08-16) ============================================================ */ /* 100vwはスクロールバー幅ぶん横にはみ出す環境(Windows等)がある→節側で横だけクリップ */ /* 部品(旧カード構成から引き継ぎ): 再生ボタン / 日付 / VIEW MORE の基礎 */ .vd-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; display:grid; place-content:center; background:rgba(20,23,26,.78); color:#fff; } .vd-play svg{margin-left:3px} .vd-play::after{ /* 押せるもの=ホバーでリング */ content:""; position:absolute; inset:-5px; border-radius:50%; background-image:var(--accent); padding:2px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s var(--ease); } .vd-date{font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.12em; color:var(--mute)} .vd-more{display:flex; justify-content:flex-end; margin:0} .vd-more a{ font-family:var(--en); font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--ink2); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:3px; } .vd-more a:hover{color:var(--ink); border-bottom-color:var(--accent-solid)} @media (hover:hover) and (prefers-reduced-motion:no-preference){ .vd-tv:hover .vd-play::after{opacity:1} } #video{overflow-x:clip} .vd-stage{ position:relative; width:100vw; margin-left:calc(50% - 50vw); aspect-ratio:16/9; overflow:hidden; background:#0B0A16; /* overflow:hidden は合成レイヤー(YouTubeのiframe)が入ると効かなくなることがある→ clip-path と contain:paint で二重にクリップ。1.1倍の絵がはみ出て見える事故を防ぐ */ clip-path:inset(0); contain:paint; opacity:0; transition:opacity .8s var(--ease); } .vd-stage.is-in{opacity:1} /* 視差で上下に動く分(±4.5%)を隠すため、絵は少し拡大しておく */ .vd-zoom{position:absolute; inset:0; overflow:hidden; clip-path:inset(0); contain:paint; transform:translateZ(0); -webkit-mask-image:-webkit-radial-gradient(#fff,#000)} /* Safari: 変形した子をクリップから漏らさない定石 */ /* 部屋の絵+テレビ画面は16:9の箱ごと拡大して舞台を満たす(カバー)。 16:9を保つので .vd-screen の%座標=テレビの位置がズレない。 画面が16:9より縦長のとき(1024x768など)、以前は上下に黒帯が出ていた(2026-08-19に解消) */ .vd-scale{ position:absolute; top:50%; left:50%; height:100%; width:auto; aspect-ratio:16/9; min-width:100%; transform:translate(-50%,-50%) scale(1.1); transform-origin:center; } .vd-room{position:absolute; inset:0; margin:0; /* 黒画面の座標(原本 1920x1080 の実測 550,236 → 1368,712 = 818x476・1.72:1。2026-08-16差し替え版) */ --l:28.65%; --t:21.85%; --w:42.60%; --h:44.07%} .vd-room picture, .vd-room img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block} .vd-screen{ position:absolute; left:var(--l); top:var(--t); width:var(--w); height:var(--h); overflow:visible; /* 下地は塗らない=イラスト自身の黒画面を見せる(#000の矩形は角が立って見える) */ } /* 動画(サムネ/プレーヤー)は黒画面の中に**絶対配置で寸法を明示**する。 黒画面(818x476=1.72:1)は16:9より縦長なので**幅合わせ** → 高さ 96.66%・上下余白 1.67%。 aspect-ratio+width:auto に任せると iframe だけ幅基準に解決され、はみ出す(実機で確認) */ .vd-tv, .vd-screen iframe{position:absolute; left:0; top:1.67%; width:100%; height:96.66%; border-radius:clamp(6px,.9vw,14px)} /* 動画の角を丸める(画面が黒なので角の黒に溶ける) */ .vd-tv{position:relative; z-index:1; border:0; padding:0; background:#000; cursor:pointer; display:block; overflow:hidden} .vd-screen iframe{position:relative; z-index:1} .vd-tv img{width:100%; height:100%; object-fit:cover; display:block} .vd-screen iframe{border:0; display:block} /* 選局パネル: テレビ台の上(画面のすぐ下)に3枚を横並び。 絵の実測: 台の上面 ≈ 72.4% / 時計「23:45」が x 65〜72% にあるので幅は 37% に留める。 背景が視差で動いてもパネルは舞台に固定 */ .vd-ch{ position:absolute; left:28.65%; top:72.6%; width:42.60%; z-index:2; /* 画面と同じ幅・同じ左端。台の上で時計に重ねる(2026-08-15ユーザー判断) */ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:6px; border-radius:12px; background:rgba(20,23,26,.58); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%); } .vd-ch-item{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:center; text-align:left; padding:6px 8px; border-radius:9px; cursor:pointer; color:#fff; font:inherit; min-width:0; background:transparent; border:1px solid transparent; transition:background .3s, border-color .3s; } .vd-ch-item img{width:52px; height:29px; object-fit:cover; border-radius:5px; display:block; background:#0F1117} .vd-ch-body{display:grid; gap:1px; min-width:0} .vd-ch-title{font-size:11px; font-weight:700; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .vd-ch-item .vd-date{font-size:9px; color:rgba(255,255,255,.62); letter-spacing:.08em} .vd-ch-item:hover{background:rgba(255,255,255,.08)} .vd-ch-item.is-on{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35)} @media (max-width:1100px){ .vd-ch-item .vd-date{display:none} .vd-ch-item{grid-template-columns:38px minmax(0,1fr)} .vd-ch-item img{width:38px; height:22px} } /* VIEW MORE: 見出しと同じ高さの右上(夜空の上)。白+ホバーで差し色のマーカー(規約どおり下線は常時出さない) */ .vd-stage .vd-more{ position:absolute; right:var(--pad); top:calc(var(--hd) + clamp(6px,1.4vh,22px) + .55em); z-index:2; margin:0; text-shadow:0 2px 20px rgba(8,6,20,.7); opacity:0; transform:translateY(8px); transition:opacity .8s var(--ease) .6s, transform .9s var(--ease) .6s; } .is-in .vd-more{opacity:1; transform:none} .vd-stage .vd-more a{color:rgba(255,255,255,.88); border-bottom-color:transparent} .vd-stage .vd-more a:hover{color:#fff; border-bottom-color:var(--accent-solid)} /* SP: テレビ寄りのトリミング(4:3)。選局は絵の下へ出す */ @media (max-width:640px){ .vd-stage{aspect-ratio:auto; overflow:visible; clip-path:none; contain:none; background:none; width:auto; margin-left:0} .vd-scale{aspect-ratio:4/3} /* SPはテレビ寄りの4:3の絵 */ .vd-zoom{position:relative; aspect-ratio:4/3; border-radius:var(--card-r); clip-path:inset(0 round var(--card-r)); box-shadow:0 18px 44px rgba(20,23,26,.12)} .vd-room{--l:13.39%; --t:13.81%; --w:73.04%; --h:56.67%} .vd-room .vd-play{width:44px; height:44px} .vd-ch{position:static; width:auto; margin:12px 0 0; padding:0; background:none; border:0; grid-template-columns:1fr; -webkit-backdrop-filter:none; backdrop-filter:none; gap:8px} .vd-ch-item{color:var(--ink); background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9); grid-template-columns:84px minmax(0,1fr); padding:8px; border-radius:12px; box-shadow:0 12px 30px rgba(20,23,26,.06)} .vd-ch-item img{width:84px; height:47px; border-radius:7px} .vd-ch-title{font-size:12px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} .vd-ch-item .vd-date{color:var(--mute); font-size:10.5px} .vd-ch-item.is-on{border-color:var(--accent-edge); background:rgba(255,255,255,.9)} } /* ---- 見出しレイヤー(白・逆向き視差) ---- */ .vd-cap{ position:absolute; left:var(--pad); top:calc(var(--hd) + clamp(6px,1.4vh,22px)); z-index:2; color:#fff; /* ヘッダー帯の下(舞台が画面高まで伸びてもロゴに重ならない) */ text-shadow:0 2px 26px rgba(8,6,20,.7), 0 0 2px rgba(8,6,20,.6); /* VIDEO の右横にサブコピー、その下に説明。テレビ枠(上端≈21%)より上に収める */ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(14px,2vw,28px); align-items:baseline; } .vd-h{grid-column:1; grid-row:1} .vd-h{font-family:var(--en); font-weight:800; font-size:clamp(34px,4.6vw,64px); line-height:1; letter-spacing:.02em; margin:0} .vd-h span{display:inline-flex; overflow:hidden; padding-bottom:.08em} /* A: 1字ずつ下から立ち上がり、ブラーが抜ける(ヒーローと同じ語彙)。is-in で開始 */ .vd-h i{display:inline-block; font-style:normal; transform:translateY(110%); filter:blur(6px); opacity:0; transition:transform .8s var(--ease), filter .8s var(--ease), opacity .6s var(--ease)} .is-in .vd-h i{transform:none; filter:none; opacity:1} .is-in .vd-h i:nth-child(1){transition-delay:.05s} .is-in .vd-h i:nth-child(2){transition-delay:.13s} .is-in .vd-h i:nth-child(3){transition-delay:.21s} .is-in .vd-h i:nth-child(4){transition-delay:.29s} .is-in .vd-h i:nth-child(5){transition-delay:.37s} /* 説明は舞台の下部中央(テレビ台の下・ラグの上)に白の太字で(2026-08-18 第10世代) */ .vd-lede{ position:absolute; left:0; right:0; bottom:clamp(14px,3.5%,40px); margin:0 auto; z-index:2; width:max-content; max-width:90%; text-align:center; transform:translateY(12px); /* 中央寄せは left/right+margin(transformはリビール用) */ font-family:var(--jp); font-weight:700; font-size:clamp(14px,1.55vw,26px); line-height:1.6; color:#fff; text-shadow:0 2px 20px rgba(8,6,20,.7), 0 0 2px rgba(8,6,20,.6); opacity:0; transition:opacity .8s var(--ease) .5s, transform .9s var(--ease) .5s; } .is-in .vd-lede{opacity:1; transform:none} .is-in .vd-lede{opacity:1; transform:none} /* C: テレビの電源が入る=スクロール量で開く(舞台の位置から --tvon 0→1 をJSが配る)。 中央の一本の光の線から上下へ開き、開ききるにつれて眩しさが収まる */ .vd-stage{--tvon:0} .vd-tv img{ clip-path:inset(calc(50% * (1 - var(--tvon))) 0); filter:brightness(calc(1 + 1.4 * (1 - var(--tvon)))); } /* 開き始めの一線を光らせる(開ききると消える) */ .vd-tv::after{content:""; position:absolute; left:6%; right:6%; top:50%; height:2px; transform:translateY(-50%); background:rgba(255,255,255,.9); box-shadow:0 0 18px 4px rgba(200,180,255,.8); pointer-events:none; opacity:calc(1 - var(--tvon) * 1.6)} /* テレビの余韻: 画面の光が部屋にごく薄く滲む(呼吸。点滅ではない) */ .vd-screen::before{content:""; position:absolute; inset:-6% -4%; z-index:0; border-radius:24px; pointer-events:none; background:radial-gradient(60% 60% at 50% 50%, rgba(140,110,255,.35), rgba(140,110,255,0) 70%); animation:glow 5.5s ease-in-out infinite alternate} @keyframes glow{from{opacity:.35}to{opacity:.7}} @media (prefers-reduced-motion:reduce){ .vd-h i, .vd-lede, .vd-more{transition:none; transform:none; filter:none; opacity:1} .vd-screen::before{animation:none} .vd-tv img{clip-path:none; filter:none} .vd-tv::after{display:none} } @media (max-width:640px){ /* SPのトリミングは密でテレビに文字が被る→見出しは絵の上に出す(墨)。演出(1字ずつ・イコライザ)は共通 */ .vd-stage{display:flex; flex-direction:column} .vd-cap{position:static; order:-1; color:var(--ink); text-shadow:none; max-width:none; margin-bottom:16px; transform:none !important} .vd-h{font-size:clamp(26px,3.4vw,42px)} .vd-cap{display:block} /* 説明は絵の下・選局の後に(墨) */ .vd-lede{position:static; order:2; transform:none !important; width:auto; max-width:none; text-align:left; font-size:14px; line-height:1.8; margin-top:16px; color:var(--ink); text-shadow:none; font-weight:700} .vd-zoom{order:0} .vd-ch{order:1} .vd-stage .vd-more{position:static; order:3; margin-top:16px; text-shadow:none; display:flex; justify-content:flex-end; transform:none !important} .vd-stage .vd-more a{color:var(--ink2)} .vd-stage .vd-more a:hover{color:var(--ink)} } /* 暗い舞台がヘッダー帯の下にある間はロゴを白へ(メニューボタンも反転)。JSが html.on-dark を付ける */ .brand{transition:color .35s var(--ease)} .on-dark .brand{color:#fff} .on-dark .menu-btn{background:#fff} .on-dark .menu-btn span{background:var(--ink)} .on-dark .hd-lang .lang-btn{border-color:rgba(255,255,255,.35)} /* ---- 乗り上げ(cover)の連鎖: .pin の中の各節が下端で止まり(sticky)、次の節が上に乗って覆う。 覆われる間、前の節は少し暗く・小さく沈む(--cover 0→1 をJSが配る)。最後の節は止まらない。 高さが変わる節(Serviceのアコーディオン等)は ResizeObserver で止まり位置を引き直す(2026-08-18) ---- */ .pin{position:relative} .pin > .s{ position:sticky; top:calc(100vh - var(--wh, 100vh)); filter:brightness(calc(1 - .3 * var(--cover,0))); /* 覆われる側は暗くなるだけ(縮小は縁から下の色が覗くので廃止=2026-08-18) */ box-shadow:0 -28px 70px rgba(8,6,20,.22); /* 上に乗ったシートの影 */ } .pin > .s:last-child{position:relative; top:auto; filter:none; box-shadow:none} /* top:auto 必須(残すと relative のオフセットとして効き、上にずれて隙間が出る) */ .pin > .s:nth-child(1){z-index:1} .pin > .s:nth-child(2){z-index:2} .pin > .s:nth-child(3){z-index:3} .pin > .s:nth-child(4){z-index:4} .pin > .s:nth-child(5){z-index:5} .pin > .s:nth-child(6){z-index:6} .pin > .s:nth-child(7){z-index:7} .pin > .s:nth-child(8){z-index:8} .pin > .s:nth-child(9){z-index:9} #video{padding-top:0; padding-bottom:0; min-height:100svh; background:#0B0A16; display:flex; flex-direction:column; justify-content:center} #video .vd-stage{min-height:100svh} /* 舞台も画面高まで伸ばす=黒帯を出さない(中の絵はカバーで満たす) */ #video .vd-stage{box-shadow:0 -28px 70px rgba(8,6,20,.35)} @media (max-width:640px){ /* SPは乗り上げなし(明るいカード構成なのでシート感が出ず、stickyのコストだけ残る)。 シートの影も外す(残すと節全体が「影の付いた明るい箱」に見える=実機スクショで確認) */ #video{padding-top:clamp(64px,10vh,120px); padding-bottom:clamp(64px,10vh,120px)} #video .vd-stage{min-height:0} #video .vd-stage{box-shadow:none} .pin > .s{position:static; filter:none; box-shadow:none} #video{min-height:0; background:transparent; display:block} } @media (prefers-reduced-motion:reduce){ .pin > .s{filter:none} } /* ============================================================ 第10世代の新しい節(2026-08-18)。原本 sample/keiru-ai_portfolio-10th-*.png ============================================================ */ /* ---------- ローディング(原本 loading.png): ペールグリーンにキャラ+黒い進捗バー。 最長1.6秒・load で終了。reduced-motion は即消す ---------- */ .loader{ position:fixed; inset:0; z-index:200; background:var(--pale); display:grid; place-content:center; justify-items:center; gap:clamp(20px,3vh,34px); transition:opacity .5s var(--ease), visibility 0s .5s; } .loader img{width:clamp(120px,13vw,220px); height:auto} .loader .bar{width:clamp(200px,15.6vw,300px); height:clamp(20px,1.6vw,26px); border:2px solid #222; border-radius:999px; overflow:hidden; background:transparent} .loader .bar i{display:block; height:100%; width:8%; background:#1A1A1A; border-radius:999px; transition:width .9s cubic-bezier(.3,.8,.4,1)} html.ld-mid .loader .bar i{width:62%} html.ld-done .loader{opacity:0; visibility:hidden} html.ld-done .loader .bar i{width:100%} html:not(.js) .loader{display:none} @media (prefers-reduced-motion:reduce){ .loader{transition:none} } /* ---------- ヒーロー(原本 hero.png): セージ地・左に丸ゴの白コピー・右にキャラ・ 左下に縦書きScroll・右下に Information ---------- */ .hero{ position:relative; min-height:100svh; background:var(--sage); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; padding:calc(var(--hd) + 24px) var(--pad) clamp(120px,16vh,180px); } .hero h1{ font-family:var(--round); font-weight:800; color:#fff; font-size:clamp(30px,4.3vw,72px); line-height:1.4; letter-spacing:.06em; max-width:12em; } .hero h1 .l{display:block; overflow:hidden} .hero h1 .l>span{display:block} .js .hero h1 .l>span{transform:translateY(105%); transition:transform 1.05s var(--ease)} .js.loaded .hero h1 .l>span{transform:none} .js.loaded .hero h1 .l:nth-child(2)>span{transition-delay:.12s} .hero .h-cat{ position:absolute; right:clamp(16px,5.4vw,104px); top:24%; width:min(38vw,700px); z-index:0; pointer-events:none; } .hero .h-cat img{width:100%; height:auto; display:block; transform-origin:50% 100%} /* キャラは足元を軸にゆっくり左右に揺れる(±2.4°・4.6秒周期。呼吸のような一定の揺れ=バウンドや点滅ではない) */ @media (prefers-reduced-motion:no-preference){ .js.loaded .hero .h-cat img{animation:sway 4.6s ease-in-out infinite} } @keyframes sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}} .js .hero .h-cat{opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease) .25s, transform 1.1s var(--ease) .25s} .js.loaded .hero .h-cat{opacity:1; transform:none} /* 縦書きの Scroll(左下) */ .hero .scroll-cue{ position:absolute; left:calc(var(--edge) + 4px); bottom:clamp(30px,5vh,52px); display:flex; flex-direction:column; align-items:center; gap:14px; color:#fff; } .hero .scroll-cue span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--round); font-weight:800; font-size:clamp(16px,1.6vw,26px); letter-spacing:.06em; } .hero .scroll-cue i{display:block; width:2px; height:clamp(64px,9vh,110px); background:#fff; position:relative; overflow:hidden} .hero .scroll-cue i::after{content:""; position:absolute; inset:0; background:var(--sage); transform:translateY(-100%); animation:cue 2.4s var(--ease) infinite} @keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}} @media (prefers-reduced-motion:reduce){.hero .scroll-cue i::after{animation:none}} /* Information(右下): ラベル+白いピルにお知らせ1件 */ .hero .h-info{position:absolute; right:var(--pad); bottom:clamp(30px,5vh,52px); z-index:1; text-align:left} .hero .h-info b{display:block; font-family:var(--round); font-weight:800; color:#fff; font-size:clamp(16px,1.9vw,32px); letter-spacing:.06em; margin-bottom:.35em} .hero .h-info a, .hero .h-info span.pillbox{ display:inline-flex; align-items:center; gap:.7em; background:#fff; color:var(--ink); text-decoration:none; border-radius:999px; padding:clamp(10px,1.1vw,18px) clamp(18px,2vw,34px); font-family:var(--round); font-weight:800; font-size:clamp(13px,1.35vw,24px); letter-spacing:.04em; } .hero .h-info a::before, .hero .h-info span.pillbox::before{content:""; width:.75em; height:.75em; border-radius:50%; background:var(--red); flex:none} .hero .h-info a:hover{box-shadow:0 10px 26px rgba(0,0,0,.12)} /* ---------- Service(原本 service.png): ペールグリーン地(ローディングと同色。2026-08-18ユーザー指示)・白い枠付きカード3枚。 右端の＋でアコーディオンが開き、サービス名/概要/できること/こんな方に(2026-08-18) ---------- */ #service .s-head h2{color:var(--ink)} .sv-list{display:grid; gap:clamp(18px,2.6vw,40px)} .sv-item{background:#fff; border:2px solid #222; border-radius:clamp(10px,1vw,14px); overflow:hidden} .sv-head{ width:100%; display:flex; align-items:center; gap:clamp(14px,2vw,32px); text-align:left; cursor:pointer; background:none; border:0; font:inherit; color:inherit; padding:clamp(14px,1.9vw,30px) clamp(16px,2.6vw,40px); min-height:clamp(96px,10.5vw,190px); } .sv-head img{width:clamp(72px,8.6vw,150px); height:auto; flex:none} .sv-head h3{ flex:1; min-width:0; font-family:var(--jp); font-weight:700; color:var(--sblue); font-size:clamp(17px,1.9vw,30px); letter-spacing:.06em; line-height:1.5; } /* ＋ボタン: 黒い丸枠。開くと45°回って×に */ .sv-plus{ flex:none; width:clamp(34px,3vw,48px); height:clamp(34px,3vw,48px); border:2px solid #222; border-radius:50%; position:relative; transition:transform .4s var(--ease), background .3s; } .sv-plus::before, .sv-plus::after{content:""; position:absolute; left:50%; top:50%; background:#222; border-radius:2px; transform:translate(-50%,-50%)} .sv-plus::before{width:46%; height:2px} .sv-plus::after{width:2px; height:46%} .sv-head[aria-expanded="true"] .sv-plus{transform:rotate(45deg)} .sv-head:hover .sv-plus{background:rgba(0,0,0,.05)} /* 本文: グリッドの行高で開閉 */ .sv-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)} .sv-body.is-open{grid-template-rows:1fr} .sv-body > div{overflow:hidden; min-height:0} .sv-body > div > *{margin-inline:clamp(16px,2.6vw,40px)} .sv-name{padding-top:clamp(4px,.6vw,10px); font-family:var(--jp); font-weight:700; font-size:clamp(15px,1.5vw,22px); line-height:1.7; color:var(--ink); border-top:1px solid var(--line2); padding-top:clamp(16px,2vw,28px)} .sv-desc{margin-top:clamp(10px,1.2vw,16px); font-size:clamp(13.5px,1.15vw,17px); line-height:1.95; color:var(--ink2)} .sv-cols{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(16px,2.4vw,40px); margin-top:clamp(18px,2vw,28px); margin-bottom:clamp(20px,2.6vw,36px)} .sv-cols h4{font-family:var(--jp); font-weight:700; font-size:clamp(13px,1.05vw,15px); letter-spacing:.08em; color:var(--sblue); margin-bottom:8px} .sv-cols li{position:relative; padding-left:16px; font-size:clamp(13px,1.05vw,15.5px); line-height:1.9; color:var(--ink2)} .sv-cols li::before{content:""; position:absolute; left:2px; top:.9em; width:6px; height:6px; border-radius:50%; background:var(--sblue); opacity:.7} @media (max-width:760px){ .sv-cols{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .sv-body, .sv-plus{transition:none} } /* ---------- Music(原本 music.png): 明地・絞り込み ALL/INST/VOCAL・正方形アート5列+タグ。 音源は自前配信(assets/music/*.m4a)。共有の