/* ========================================================================== 藤田大知 — Close Up Magician 白基調 × 紫/マゼンタ/金。藤田氏のカード裏面デザインから採った配色。全7ページ共通。 ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* surfaces */ --paper: #FFFFFF; --paper-2: #FBF7FD; /* ほんのり紫がかった白 */ --paper-3: #FFF8FB; /* ほんのり桃色の白 */ --cream: #FFFBF3; /* 背景グラデーション：中央は白、外側へ向かって薄いグレー */ --bg-center: #FFFFFF; --bg-edge: #E4DFEC; --line: rgba(75,47,128,.13); --line-soft: rgba(75,47,128,.07); /* brand */ --brand: #4B2F80; --brand-deep: #2A1A4D; --brand-lift: #7C3FD4; --violet: #9B6BF0; --wash-blue: #D8E4F5; /* マルファン症候群ページ上部の背景（水でうすめたような淡い青） */ --accent: #E5207D; /* 装飾の面・アイコン用 */ --accent-ink: #BC0F65; /* 文字用。背景グラデーションの濃い端でも4.5:1以上 */ --accent-2: #FF4FA3; --gold: #C9962F; /* 装飾の面・罫線用 */ --gold-ink: #835D10; /* 文字用。背景グラデーションの濃い端でも4.5:1以上 */ --gold-lift: #E8C25F; /* type */ --ink: #1E1233; --ink-2: #3F2E63; --muted: #6B5C84; --muted-2: #635873; /* gradients */ --grad-hot: linear-gradient(120deg,#D1176F 0%,#A32BB0 48%,#6B45B8 100%); --grad-soft: linear-gradient(120deg,#FF4FA3 0%,#9B6BF0 100%); /* 装飾専用 */ --grad-soft-ink:linear-gradient(120deg,#D1176F 0%,#7C3FD4 100%); /* 文字用 */ --grad-gold: linear-gradient(120deg,#E8C25F 0%,#C9962F 100%); --grad-ink: linear-gradient(118deg,#2A1A4D 0%,#6B2FA8 42%,#E5207D 100%); /* system */ --radius: 20px; --radius-lg: 30px; --shell: 1200px; --gutter: clamp(1.25rem, 5vw, 3.5rem); --gap: clamp(1rem, 2vw, 1.75rem); --ease: cubic-bezier(.22,.9,.28,1); --font-jp: "Noto Sans JP", system-ui, sans-serif; --font-mincho:"Shippori Mincho B1", "Yu Mincho", serif; --font-en: "Cormorant Garamond", Georgia, serif; --shadow-sm: 0 4px 18px -6px rgba(75,47,128,.16); --shadow-md: 0 18px 44px -18px rgba(75,47,128,.30); --shadow-lg: 0 30px 70px -30px rgba(75,47,128,.40); --shadow-hot: 0 16px 40px -14px rgba(229,32,125,.45); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} /* `clip`, not `hidden`: 装飾のぼかしが意図的に親からはみ出すため。 `hidden` はだと viewport に伝播して scrollWidth が残り、 overflow-y も auto になって固定ヘッダーが壊れる。 */ html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:clip} body{ margin:0; color:var(--ink); /* 画面に固定。スクロールしても中央が明るく外側が濃いまま保たれる */ background:radial-gradient(ellipse 78% 68% at 50% 40%, var(--bg-center) 0%, var(--bg-center) 22%, var(--bg-edge) 100%) fixed; font-family:var(--font-jp); font-weight:400; font-size:clamp(.95rem,.9rem + .25vw,1.05rem); line-height:1.95; letter-spacing:.02em; /* 欧文セリフ（Cormorant Garamond）の数字は、既定だと 3・4・5・7・9 が下へ、6・8 が上へはみ出す「オールドスタイル数字」で、「04」「06」が上下にずれて見える。高さのそろう数字に統一する。和文フォント（Noto Sans JP・しっぽり明朝）の数字は元からそろっているので、見た目は変わらない。 */ font-variant-numeric:lining-nums; overflow-x:clip; -webkit-font-smoothing:antialiased; } /* グラデーションのバンディング対策。白→薄グレーは26階調しかないため、階調の境目が縞に見えることがある。極薄のノイズを重ねて境目をぼかす（Chrome以外のブラウザ向けの保険）。 */ body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E"); } img{max-width:100%; height:auto; display:block} svg{display:block} a{color:inherit; text-decoration:none} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0} ul,ol{margin:0; padding:0; list-style:none} ::selection{background:var(--accent); color:#fff} /* ---------- 3. Layout ---------- */ .shell{width:min(100% - var(--gutter)*2, var(--shell)); margin-inline:auto} .section{padding-block:clamp(4rem,8vw,7rem); position:relative} /* 淡い色面 — 白のリズムに変化をつける */ .section--tint{background:rgba(255,255,255,.5)} .section--tint > *{position:relative; z-index:1} /* ---------- 4. 見出し ---------- */ .eyebrow{ font-family:var(--font-en); font-size:.86rem; font-weight:600; letter-spacing:.42em; text-transform:uppercase; display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; color:var(--accent-ink); } .eyebrow::before{content:""; width:34px; height:2px; border-radius:2px; flex:none; background:var(--accent)} .s-title{ font-family:var(--font-mincho); font-weight:700; color:var(--brand-deep); font-size:clamp(1.9rem,1.2rem + 2.7vw,3.1rem); line-height:1.4; letter-spacing:.05em; margin-bottom:1rem; } .s-title .en{ display:block; font-family:var(--font-en); font-style:italic; font-weight:400; font-size:.40em; letter-spacing:.16em; margin-top:.5rem; text-transform:none; color:var(--muted-2); } .s-lead{color:var(--muted); max-width:36rem; font-size:.97rem} .s-head{margin-bottom:clamp(2.25rem,4.5vw,3.5rem)} .s-head--center{text-align:center} /* letter-spacing は最後の1文字のうしろにも入るため、中央ぞろえだと文字の見た目が letter-spacing の半分（.21em）だけ左にずれる。padding-left でその分を打ち消す。 */ .s-head--center .eyebrow{justify-content:center; padding-left:.42em} .s-head--center .eyebrow::before{display:none} .s-head--center .s-lead{margin-inline:auto} /* 小見出し（Contents など）と見出しの間を詰めたいときに付ける。 .eyebrow の余白は全ページ共通なので、こうして使う場所だけ上書きする。 */ .s-head--tight .eyebrow{margin-bottom:.3rem} /* 句の途中で折り返させたくない所に使う（例：「対応いたします。」の「す。」だけが次の行に落ちるのを防ぐ）。幅が足りない時は、このかたまりの手前で改行される。 */ .nowrap{white-space:nowrap} /* 広い画面でだけ効かせる改行。1行に収まらない長い一文の折り返し位置を整える。スマホ（680px以下）では消して、.nowrap のかたまり単位で自然に折り返す。 */ @media (max-width:680px){ .br-wide{display:none} } /* 反対に、スマホ（680px以下）でだけ効かせる改行。PCでは1行につなげたい文を、スマホでは文の切れ目で改行したいときに使う（例：プランページの注意書き）。 */ @media (min-width:681px){ .br-sp{display:none} } .tx-link{ color:var(--accent-ink); font-weight:500; background:linear-gradient(var(--accent-ink),var(--accent-ink)) no-repeat left 92%/0% 1.5px; transition:background-size .45s var(--ease); } @media (hover:hover) and (pointer:fine){ .tx-link:hover{background-size:100% 1.5px} } /* ---------- 5. ボタン ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:1rem 2.1rem; border-radius:999px; font-size:.93rem; font-weight:500; letter-spacing:.09em; position:relative; overflow:hidden; isolation:isolate; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease); } .btn svg{width:16px; height:16px; flex:none; transition:transform .45s var(--ease)} /* マウスを乗せたときの動き（:hover）は、マウスが使える端末でだけ付ける。 iPhone などでは :hover が「1回目のタップ」で発動し、その変化を見てリンクへの移動が止まるため、2回タップしないと移動できないことがある。 */ @media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-3px)} .btn:hover svg{transform:translateX(4px)} } .btn--primary{ background:var(--grad-hot); background-size:190% 100%; color:#fff; box-shadow:var(--shadow-hot); transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-position .8s var(--ease); } @media (hover:hover) and (pointer:fine){ .btn--primary:hover{background-position:100% 0; box-shadow:0 24px 54px -16px rgba(229,32,125,.6)} } /* 光沢のスイープ */ .btn--primary::after{ content:""; position:absolute; inset:0 auto 0 -60%; width:45%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); transition:left .8s var(--ease); } @media (hover:hover) and (pointer:fine){ .btn--primary:hover::after{left:115%} } .btn--ghost{ border:1.5px solid var(--line); color:var(--brand); background:rgba(255,255,255,.7); backdrop-filter:blur(6px); box-shadow:var(--shadow-sm); } @media (hover:hover) and (pointer:fine){ .btn--ghost:hover{border-color:var(--accent-2); color:var(--accent-ink); background:#fff; box-shadow:0 14px 32px -14px rgba(229,32,125,.35)} } /* トップの2つのボタン用。どちらかを目立たせず、同じ落ち着いた見た目で並べる。 .btn--primary はサイト全体の申し込み導線で使っているのでそのまま。 */ .btn--quiet{ border:1.5px solid rgba(75,47,128,.32); color:var(--brand-deep); background:#fff; box-shadow:0 8px 20px -10px rgba(75,47,128,.35); } /* 矢印だけ差し色にして「押せる」ことを示す。ボタン全体は白のまま。 */ .btn--quiet svg{color:var(--accent-ink)} @media (hover:hover) and (pointer:fine){ .btn--quiet:hover{ border-color:var(--brand-lift); background:#fff; box-shadow:0 18px 36px -16px rgba(75,47,128,.48); } } .btn--onDark{ background:#fff; color:var(--brand-deep); box-shadow:0 16px 40px -16px rgba(0,0,0,.5)} @media (hover:hover) and (pointer:fine){ .btn--onDark:hover{background:var(--accent); color:#fff} } /* ---------- 6. ヘッダー ---------- */ .header{position:fixed; inset:0 0 auto; z-index:100; padding-block:1.1rem; transition:padding .5s var(--ease)} .header::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); background:rgba(255,255,255,.88); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--line-soft); box-shadow:0 6px 30px -18px rgba(75,47,128,.4); } .header.is-stuck{padding-block:.65rem} .header.is-stuck::before{opacity:1} .header__in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; position:relative} .brand{display:flex; align-items:center; gap:.75rem} /* ロゴマーク（DF_logo_WH.pdf から書き出した brand-logo.png）。元は「紫の角丸四角＋スペードのSVG」だったが、ロゴ自体が円形で完結しているため四角い背景は外してロゴだけを置いている。 */ /* 右の2行の高さを基準（--mark）にする。内訳は上「プロマジシャン」30%、下「藤田大知」70%。ロゴ画像（240px角）は上下左右に約16%の透明な余白があり、--mark と同じ大きさだと見えている円が文字より小さく上寄りに見える。そこでロゴだけ --logo に大きくし、円の上端・下端が「プロマジシャン」の上端と「藤田大知」の下端にそろうようにする。大きくした分は上下のマイナス余白で打ち消し、ヘッダーの高さは変えない。 */ .brand{--mark:38px; --logo:calc(var(--mark) * 1.26)} .brand__mark{ width:var(--logo); height:var(--logo); flex:none; display:grid; place-items:center; margin-block:calc((var(--mark) - var(--logo)) / 2); } .brand__mark img{width:100%; height:100%; object-fit:contain; display:block} /* ロゴは濃色（白背景用）。フッターでは反転して白く見せる */ .footer .brand__mark img{filter:invert(1) brightness(1.25)} /* 2行を中央ぞろえにする。字間（letter-spacing）は最後の文字の後ろにも入るため、そのまま中央ぞろえすると右側に余白が残って中心がずれる。負の右マージンでその分を打ち消してからそろえる。 */ .brand__mark + span{display:flex; flex-direction:column; align-items:center} /* 上段：プロマジシャン（ロゴ高さの30%）。トップの大見出し上の「プロマジシャン」（.hero__en）と同じ明朝・太字にそろえる。 */ .brand__sub{ display:block; font-family:var(--font-mincho); font-weight:700; line-height:calc(var(--mark) * .30); font-size:calc(var(--mark) * .265); letter-spacing:.18em; color:var(--muted-2); margin:0 -.18em 0 0; } /* 下段：藤田大知（ロゴ高さの70%） */ .brand__name{ display:block; font-family:var(--font-mincho); font-weight:700; line-height:calc(var(--mark) * .70); font-size:calc(var(--mark) * .59); letter-spacing:.2em; color:var(--brand-deep); margin:0 -.2em 0 0; } .nav{display:flex; align-items:center; gap:.2rem} .nav a{ padding:.55rem .9rem; font-size:.85rem; letter-spacing:.07em; color:var(--ink-2); border-radius:999px; position:relative; transition:color .3s var(--ease); } .nav a::before{ content:""; position:absolute; inset:auto 50% .25rem; height:2px; border-radius:2px; background:var(--accent); transition:inset .4s var(--ease); opacity:0; } .nav a.is-active::before{inset:auto .9rem .25rem; opacity:1} @media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--accent-ink)} .nav a:hover::before{inset:auto .9rem .25rem; opacity:1} } .nav a.is-active{color:var(--accent-ink); font-weight:500} .header .btn{padding:.72rem 1.55rem; font-size:.84rem} /* burger — flex column, not grid: grid rows stretch to fill the 46px box, which spreads the bars too far apart for the ±6.8px translate to close into an X. */ .burger{display:none; width:46px; height:46px; border-radius:14px; flex-direction:column; align-items:center; justify-content:center; border:1.5px solid var(--line); background:rgba(255,255,255,.8); backdrop-filter:blur(8px)} .burger span{display:block; width:19px; height:1.8px; background:var(--brand); border-radius:2px; transition:transform .4s var(--ease), opacity .3s var(--ease)} .burger span+span{margin-top:5px} .burger.is-open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} /* ドロワー */ /* 項目が8つあり、背の低いスマホ（高さ667px など）では画面に収まらない。上はヘッダーの高さぶん空けて1つ目の項目が隠れないようにし、はみ出す分はスクロールさせる。中央寄せは .shell の margin-block:auto で行う（収まらない時は上端から並ぶので切れない）。 */ .drawer{ position:fixed; inset:0; z-index:99; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; padding:6rem 0 2.5rem; background:radial-gradient(ellipse 78% 68% at 50% 40%, var(--bg-center) 0%, var(--bg-center) 22%, var(--bg-edge) 100%); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s; } .drawer.is-open{opacity:1; visibility:visible} .drawer .shell{position:relative; z-index:1; margin-block:auto} .drawer ul{display:grid; gap:.3rem; width:min(90vw,360px); margin-inline:auto} .drawer li{border-bottom:1px solid var(--line-soft)} /* 開いたときに順に浮かび上がる動きは、下の「出演を依頼する」ボタンも含めた全リンクに付ける */ .drawer a{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s; } /* 文字の見た目はメニューの項目（li の中）だけ。ボタンにまで効くと、白文字と左右の余白が消える */ .drawer li a{ display:flex; align-items:baseline; gap:1rem; padding:.95rem .3rem; font-family:var(--font-mincho); font-size:1.18rem; letter-spacing:.12em; color:var(--brand-deep); } .drawer li a span{font-family:var(--font-en); font-style:italic; font-size:.8rem; color:var(--accent-ink)} @media (hover:hover) and (pointer:fine){ .drawer li a:hover{color:var(--accent-ink)} } .drawer.is-open a{opacity:1; transform:none} .drawer__foot{margin-top:2rem; display:flex; justify-content:center} /* ---------- 7. ヒーロー（トップページ） ---------- */ .hero{ position:relative; display:flex; align-items:center; overflow:hidden; padding-top:clamp(7.5rem,12vw,10rem); padding-bottom:clamp(3.5rem,7vw,5.5rem); } .hero__bg,.hero__glyphs{display:none} .hero__in{position:relative; z-index:2; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,5vw,4.5rem); align-items:center} .hero__tag{ display:inline-flex; align-items:center; gap:.7rem; padding:.55rem 1.25rem; border-radius:999px; border:1.5px solid rgba(229,32,125,.28); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); font-size:.76rem; letter-spacing:.2em; color:var(--brand); margin-bottom:1.8rem; /* スマホ幅では2行になる。keep-all で「マジック」の途中では折らず、／の前後（＝意味の切れ目）だけで改行させる。 */ word-break:keep-all; box-shadow:var(--shadow-sm); } /* 受付中を示すドット。ヘッダーの「お問い合わせ」ボタンの中に置いている。ピンクのボタンの上に載るので、色は白。 */ .btn .dot{ width:7px; height:7px; border-radius:50%; flex:none; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 10px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} } .hero h1{ font-family:var(--font-mincho); font-weight:700; line-height:1.14; letter-spacing:.08em; font-size:clamp(2.8rem,1.6rem + 5.6vw,5.4rem); margin-bottom:1.9rem; } .hero h1 .line{display:block; overflow:hidden} .hero h1 .line > span{ display:block; animation:riseIn 1.1s var(--ease) both; background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent; } @keyframes riseIn{from{transform:translateY(105%); opacity:0}to{transform:none; opacity:1}} /* ヒーローの金文字「プロマジシャン」。和文なのでイタリックを外し、上の「藤田大知」と同じ明朝で揃える。字間は欧文の .3em だと間延びするため .2em に。 */ .hero__en{ font-family:var(--font-mincho); font-weight:700; color:var(--gold-ink); font-size:clamp(1.05rem,.85rem + .7vw,1.55rem); letter-spacing:.2em; margin-bottom:.5rem; } /* rem, not ch: for Japanese text `ch` (width of "0") badly under-measures the line. */ /* max-width は「…様々な場所で」を1行に収めるための幅。狭めると「で」が 1文字だけ次行に落ちるので、詰めるときは下の 1100px の指定も見直すこと。 */ .hero__copy{color:var(--ink-2); max-width:33rem; margin-bottom:2.4rem} .hero__actions{display:flex; flex-wrap:wrap; gap:.9rem} /* ボタンの下に置くSNSアイコン。見た目はお問い合わせページの .socials と共通。 */ .hero__sns{margin-top:1.4rem} /* 2つのボタンの幅をそろえる。min-width を長いほうのラベルが収まる幅にすると、短いほうもそこまで広がって同じ幅になる。伸びすぎないよう flex-grow は 0。 */ .hero__actions .btn{flex:0 1 auto; min-width:18.5rem} /* 白背景のスタジオ写真なので、フチ・影・3D回転は付けず地に溶け込ませる（カード画像用の額装をそのまま人物に当てると切り抜き忘れのように見えるため） */ .hero__card{position:relative; justify-self:center} .hero__card img{width:min(70vw,340px); margin-inline:auto} .hero__badge{ position:absolute; left:-4%; bottom:9%; padding:.95rem 1.35rem; border-radius:18px; background:rgba(255,255,255,.93); backdrop-filter:blur(14px); border:1px solid var(--line); box-shadow:var(--shadow-md); animation:floatY 8s ease-in-out infinite; } @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .hero__badge b{display:block; font-family:var(--font-en); font-size:1.7rem; font-weight:600; line-height:1; color:var(--gold-ink)} .hero__badge small{font-size:.66rem; letter-spacing:.16em; color:var(--muted-2)} .hero__stats{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(2rem,4vw,3rem); } /* 数字とラベルを1行に収める。幅は中身なり（flex:0 1 auto）にして、nowrap で途中改行させない。 */ .hero__stat{ flex:0 1 auto; white-space:nowrap; background:rgba(255,255,255,.72); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1.15rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; } /* 数字は欧文セリフだと高さがそろわないため、金額と同じくゴシック＋そろう数字にする */ .hero__stat b{ display:inline; font-family:var(--font-jp); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; font-size:1.3rem; font-weight:700; line-height:1; color:var(--brand); margin-right:.12em; } .hero__stat span{display:inline; font-size:.82rem; letter-spacing:.03em; color:var(--ink-2)} /* 「国際コンテスト準優勝」のように強調が後ろに来る場合は、余白を左右反転する */ .hero__stat span + b{margin-left:.15em; margin-right:0} /* 金のグラデーション文字。明るい金は帯状に短く通すだけにして、文字全体は濃い金（--gold-ink 相当）を保つ＝小さい文字でも読める。 .hero__stat b 側は色指定の詳細度が高いので、専用のセレクタも併記している。 */ .gold, .hero__stat b.gold{color:var(--gold-ink); font-weight:500} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .gold, .hero__stat b.gold{ background:linear-gradient(118deg, #7A560E 0%, #B3861F 26%, #E8C25F 47%, #C9962F 60%, #835D10 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } } /* 数字「20」は欧文セリフ。和文より数字の位置が低く出るので top で行に乗せ直す。 line-height はバッジの高さを他と揃えるため（既定のままだと 4px 背が高くなり、スマホの縦積みで段差が出る）。 */ .hero__stat b.hero__num{ font-family:var(--font-en); font-weight:600; font-size:1.95rem; letter-spacing:.005em; margin-right:.2em; line-height:.7; position:relative; top:.085em; } /* 和文の強調「準優勝」は明朝。欧文セリフは和文に効かないため、こちらは明朝で受ける。 */ .hero__stat b.hero__kv{ font-family:var(--font-mincho); font-weight:700; font-size:1.42rem; letter-spacing:.04em; line-height:.9; position:relative; top:.02em; } /* ---------- 8. 実績の帯 ---------- */ .ticker{padding-block:1.2rem; overflow:hidden; background:var(--grad-hot); color:#fff} .ticker__track{display:flex; width:max-content; animation:slide 46s linear infinite} @media (hover:hover) and (pointer:fine){ .ticker:hover .ticker__track{animation-play-state:paused} } @keyframes slide{to{transform:translateX(-50%)}} .ticker__track span{ display:flex; align-items:center; gap:2.6rem; white-space:nowrap; padding-right:2.6rem; font-family:var(--font-en); font-style:italic; font-size:1.02rem; letter-spacing:.16em; color:rgba(255,255,255,.96); } .ticker__track span::after{content:"\2666"; color:rgba(255,255,255,.6); font-style:normal; font-size:.7rem} /* ---------- 9. 各ページの扉 ---------- */ .page-hero{ position:relative; overflow:hidden; padding-top:clamp(8rem,13vw,10.5rem); padding-bottom:clamp(3rem,6vw,4.5rem); border-bottom:1px solid var(--line); } .page-hero__in{position:relative; z-index:1} .crumb{display:flex; gap:.6rem; align-items:center; font-family:var(--font-en); font-size:.78rem; font-style:italic; letter-spacing:.14em; color:var(--muted-2); margin-bottom:1.4rem} .crumb a{transition:color .3s} @media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--accent-ink)} } .page-hero h1{ font-family:var(--font-mincho); font-weight:700; color:var(--brand-deep); font-size:clamp(2rem,1.3rem + 3.2vw,3.4rem); line-height:1.35; letter-spacing:.05em; margin-bottom:1rem; } /* 扉のリード文。本文用（.s-lead .97rem）より一段大きくして読ませる。 */ .page-hero .s-lead{font-size:1.12rem; line-height:1.9} /* 1行が長いリード文用（講演ページ）。指定の改行位置で1行ずつ収まる幅にする。 */ .page-hero .s-lead--wide{max-width:44rem} /* 扉の右に置く人物写真（講演ページ）。トップと同じ切り抜き画像を使い、上半身（画像の上48%）だけを見せる。顔（上から約33%まで）ははっきり見せ、首元から下を少しずつ薄くして消していく。文字と重ならない幅がある 1180px 以上でだけ表示（お問い合わせページの名刺も同じ置き方）。 */ .page-hero__portrait{display:none} @media (min-width:1180px){ .page-hero__portrait{ display:block; position:absolute; z-index:0; bottom:0; right:max(var(--gutter), calc((100% - var(--shell)) / 2)); /* 高さは幅から計算する。Safari（Mac）は絶対配置の要素に aspect-ratio を指定しても中の写真全体の高さになり、上半身ではなく脚のあたりが見えてしまうため */ --portrait-w:clamp(260px, 27vw, 400px); width:var(--portrait-w); height:calc(var(--portrait-w) * 807 / 720); overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.5) 54%, rgba(0,0,0,.15) 78%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.5) 54%, rgba(0,0,0,.15) 78%, transparent 100%); } .page-hero__portrait img{display:block; width:100%; height:auto} } /* お問い合わせページの名刺。名刺の上部（顔・カードの扇・F♠）だけを切り出した画像で、帯の文字は含めていない。高さは画像なりにし、名刺の白地は multiply で扉の背景になじませる。顔とカードの扇ははっきり見せてから、下の帯に向かって薄くして扉の下端で消す（PC・スマホ共通） */ .page-hero__portrait.page-hero__portrait--card{ height:auto; aspect-ratio:auto; mix-blend-mode:multiply; -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.15) 92%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.15) 92%, transparent 100%); } /* 淡い青の扉（マルファン）。文字色は通常の扉のまま */ .page-hero--wash{background:var(--wash-blue); border-bottom:0} /* 扉の右側のレントゲン写真。中心はくっきり、外側ほどぼかして背景に溶かす。同じ写真を2枚重ね、下はぼかして広め・上はくっきりで狭めにフェードさせる。 luminosity で背景の青みを乗せ、写真のグレーが浮かないようにする */ .page-hero__xray,.page-hero__xray-note{display:none} @media (min-width:1100px){ .page-hero--wash{ --xray-w:clamp(280px, 26.5vw, 365px); --xray-h:calc(var(--xray-w) * 516 / 426); /* 写真の縦横比から高さを出す */ --xray-top:12rem; --shell-right:max(var(--gutter), (100% - var(--shell)) / 2); --xray-right:calc(var(--shell-right) + clamp(2.5rem, 6.3vw, 6rem)); /* 写真と、その下の注記が扉の中に収まる高さを確保する */ min-height:calc(var(--xray-top) + var(--xray-h) + 4.6rem); } .page-hero__xray{ display:block; position:absolute; z-index:0; top:var(--xray-top); right:var(--xray-right); width:var(--xray-w); height:var(--xray-h); pointer-events:none; mix-blend-mode:luminosity; } /* 注記は写真の下に、写真と中心をそろえて置き、写真には重ねない。注記は写真より幅が広くなることがあるため、右端を写真の中心に合わせてから、自分の幅の半分だけ右へ戻す */ .page-hero__xray-note{ display:block; position:absolute; z-index:1; margin:0; top:calc(var(--xray-top) + var(--xray-h) + 1.4rem); right:calc(var(--xray-right) + var(--xray-w) / 2); transform:translateX(50%); font-size:.72rem; line-height:1.7; letter-spacing:.04em; color:var(--muted-2); text-align:center; white-space:nowrap; } .page-hero__xray img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} /* ぼかし側は少し大きくして、写真のふちの外側までにじませる */ /* 長方形のまま、ふちだけをぼかしてフェードさせる。横向き・縦向きのグラデーションを重ねて（intersect）四隅もなじませる */ .page-hero__xray .page-hero__xray-blur{ inset:auto; left:-6%; top:-6%; width:112%; height:112%; filter:blur(16px); -webkit-mask-image:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-composite:intersect; } .page-hero__xray-main{ -webkit-mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite:intersect; } } /* ---------- 10. 目次（トップページ） ---------- */ .toc{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem} .toc__card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow-sm); transition:transform .55s var(--ease), box-shadow .55s var(--ease); } @media (hover:hover) and (pointer:fine){ .toc__card:hover{transform:translateY(-10px); box-shadow:0 34px 64px -22px rgba(75,47,128,.34)} } .toc__thumb{aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)} .toc__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)} @media (hover:hover) and (pointer:fine){ .toc__card:hover .toc__thumb img{transform:scale(1.06)} } .toc__body{padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; gap:.5rem} .toc__no{font-family:var(--font-en); font-style:italic; font-size:.95rem; font-weight:600; color:var(--accent-ink)} .toc__ttl{font-family:var(--font-mincho); font-weight:700; font-size:1.3rem; letter-spacing:.06em; color:var(--brand-deep); line-height:1.45} .toc__desc{font-size:.86rem; color:var(--muted); line-height:1.85} .toc__go{ margin-top:auto; padding-top:1.1rem; display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; letter-spacing:.1em; color:var(--accent-ink); font-weight:500; } .toc__go svg{width:14px; height:14px; transition:transform .4s var(--ease)} @media (hover:hover) and (pointer:fine){ .toc__card:hover .toc__go svg{transform:translateX(4px)} } /* ---------- 11. プロフィール ---------- */ .about__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start} .about__photo{position:relative} .about__photo img{width:100%; border-radius:var(--radius-lg); position:relative; z-index:1; box-shadow:0 34px 64px -26px rgba(42,26,77,.42)} .about__photo::before{ content:""; position:absolute; inset:1.6rem -1.6rem -1.6rem 1.6rem; border-radius:var(--radius-lg); border:2px solid transparent; background:var(--grad-gold) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .about__body h3{font-family:var(--font-mincho); font-weight:700; color:var(--brand-deep); font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem); line-height:1.6; margin-bottom:1.5rem; letter-spacing:.05em} /* プロフィールのキャッチコピー。金の細線を左に1本引くだけの控えめな強調。 */ .about__body h3.about__catch{ padding-left:clamp(1rem,2.2vw,1.4rem); border-left:2px solid rgba(201,150,47,.55); } .about__body p{color:var(--ink-2)} /* 講演ページの見出し「一番恐いのは／「自分が病気であることを知らない」こと。」。 2行目を1行に収めたいが、横2段組み（1001px〜）では列が狭く、そのままの文字サイズだと折り返してしまう。2行目の幅は字間込みで文字サイズの約18.9倍（実測）なので、列幅に合わせて 2.5vw まで縮める（上限は元の大きさ 2.1rem）。1段組み・スマホは従来どおり。 */ @media (min-width:1001px){ .about__body h3.about__why{font-size:clamp(22px, 2.5vw, 2.1rem)} } .about__body p+p{margin-top:1.3rem} .about__body strong{color:var(--brand-deep); font-weight:700} /* 枚数を増減しても列がそろうよう、固定の3列ではなく中身の数に追従させる。 */ .facts{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:1rem; margin-top:2.6rem} /* 値（1989/12/26 など）と下の注記の2行をひとかたまりとして、カードの上下中央に置く。カードの高さは以前（ラベルがあった頃）とほぼ同じになるよう、上下の余白を広めにとる。ラベル（Birth / Area）は表示しない指定。読み上げ用に要素は残し、見た目だけ隠す。 */ .facts div{ background:#fff; padding:2.2rem 1.2rem; text-align:center; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; transition:transform .5s var(--ease), box-shadow .5s var(--ease); } @media (hover:hover) and (pointer:fine){ .facts div:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)} } .facts dt{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0} .facts dd{font-family:var(--font-mincho); font-size:1.1rem; letter-spacing:.05em; line-height:1.45; color:var(--brand-deep)} .facts dd small{display:block; font-family:var(--font-jp); font-size:.7rem; color:var(--muted-2); letter-spacing:.08em; margin-top:.25rem} /* ---------- 12. 出演メニュー ---------- */ .svc{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem} .svc__card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow-sm); transition:transform .55s var(--ease), box-shadow .55s var(--ease); } @media (hover:hover) and (pointer:fine){ .svc__card:hover{transform:translateY(-10px); box-shadow:0 34px 64px -22px rgba(75,47,128,.34)} } .svc__media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2)} .svc__media img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)} @media (hover:hover) and (pointer:fine){ .svc__card:hover .svc__media img{transform:scale(1.07)} } .svc__no{ position:absolute; top:1.1rem; left:1.1rem; z-index:2; font-family:var(--font-en); font-style:italic; font-size:.86rem; font-weight:600; letter-spacing:.1em; color:var(--brand-deep); padding:.32rem .9rem; border-radius:999px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); box-shadow:var(--shadow-sm); } .svc__body{padding:1.6rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1} .svc__body h3{font-family:var(--font-mincho); font-size:1.32rem; letter-spacing:.07em; margin-bottom:.6rem; color:var(--brand-deep)} .svc__desc{color:var(--muted); font-size:.88rem; line-height:1.85; margin-bottom:1.2rem} .svc__spec{display:grid; gap:.55rem; margin-bottom:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line-soft)} .svc__spec div{display:grid; grid-template-columns:4rem 1fr; gap:.7rem; font-size:.82rem; align-items:baseline} .svc__spec dt{color:var(--accent-ink); font-size:.72rem; letter-spacing:.1em; font-weight:500} .svc__spec dd{color:var(--ink-2); line-height:1.7} .svc__price{margin-top:auto; padding:1.1rem 1.2rem; border-radius:16px; background:var(--paper-2)} .svc__price .row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem} .svc__price .row+.row{margin-top:.5rem} .svc__price small{font-size:.73rem; color:var(--muted); letter-spacing:.06em} /* 金額。欧文セリフ（Cormorant）は数字が旧スタイル数字で高さがそろわず、さらに「〜」を持たないため別フォントに化けて不揃いに見えていた。数字の高さがそろうゴシックにし、桁の幅も固定する。色は単色（グラデーションは主要ボタンのみ、というこのサイトの方針に合わせる）。 */ .svc__price b{ font-family:var(--font-jp); font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; font-size:1.45rem; font-weight:700; letter-spacing:.01em; color:var(--accent-ink); } .svc__note{margin-top:2rem; text-align:center; font-size:.83rem; color:var(--muted-2)} /* プランの下の申し込みボタン。サイト共通の主ボタン（.btn--primary）を一回り大きくして中央に置き、その下に「見積もり無料・返信の早さ」を添える */ .svc__cta{margin-top:2.6rem; display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center} .svc__cta .btn{font-size:1.02rem; padding:1.15rem 2.8rem; min-width:min(19rem, 100%)} .svc__cta p{font-size:.92rem; line-height:1.9; color:var(--ink-2)} /* ---------- 13. ご依頼 ---------- */ .req{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; align-items:start} .req__item{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .45s var(--ease), border-color .45s var(--ease); } @media (hover:hover) and (pointer:fine){ .req__item:hover{box-shadow:var(--shadow-md); border-color:rgba(229,32,125,.3)} } .req__item[open]{border-color:rgba(229,32,125,.38); box-shadow:var(--shadow-md)} .req__item summary{ padding:1.4rem 1.5rem; display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none; font-family:var(--font-mincho); font-size:1.1rem; letter-spacing:.07em; color:var(--brand-deep); } .req__item summary::-webkit-details-marker{display:none} .req__item summary::after{ content:""; margin-left:auto; width:9px; height:9px; flex:none; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg) translateY(-2px); transition:transform .4s var(--ease); } .req__item[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .req__ico{ width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center; background:rgba(229,32,125,.10); color:var(--accent-ink); border:1px solid rgba(229,32,125,.22); font-family:var(--font-en); font-style:italic; font-weight:600; font-size:.95rem; } .req__panel{padding:0 1.5rem 1.6rem 5rem; font-size:.88rem; color:var(--muted); line-height:1.9} .req__panel p+p{margin-top:.85rem} .req__panel strong{color:var(--brand-deep); font-weight:500} .req__list{margin-top:.9rem; display:grid; gap:.4rem} .req__list li{position:relative; padding-left:1.2rem; font-size:.85rem} .req__list li::before{content:""; position:absolute; left:0; top:.75em; width:5px; height:5px; border-radius:50%; background:var(--accent)} .notice{ margin-top:2.4rem; padding:1.6rem 1.8rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper-2); display:flex; gap:1.1rem; align-items:flex-start; font-size:.86rem; color:var(--ink-2); line-height:1.9; } .notice svg{width:21px; height:21px; flex:none; color:var(--gold-ink); margin-top:.3rem} .notice strong{color:var(--gold-ink); font-weight:700} /* ---------- 14. マルファン ---------- */ .section--wash{background:var(--wash-blue)} .marfan__in{display:grid; grid-template-columns:1fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center} .marfan__quote blockquote{ font-family:var(--font-mincho); font-weight:700; letter-spacing:.05em; color:var(--brand-deep); font-size:clamp(1.3rem,1rem + 1.8vw,2.3rem); line-height:1.85; margin-bottom:1.4rem; } /* 2カラムのときは「自分が病気であると知らない」を1行に収める（15字＋字間で約15.8字分）。列が狭い 1001px〜では 2.8vw まで縮め、広い画面では元の大きさ（2.3rem）に戻す */ @media (min-width:1001px){ .marfan__quote blockquote{font-size:clamp(1.3rem, 2.8vw, 2.3rem)} } .marfan__quote cite{display:block; font-style:normal; font-family:var(--font-mincho); font-size:.92rem; letter-spacing:.2em; color:var(--muted-2)} .marfan__stat{ display:grid; gap:1rem; padding:2rem; border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.7); backdrop-filter:blur(14px); box-shadow:0 24px 50px -28px rgba(50,62,123,.35); } /* 「1万」は数字と漢字が混ざるため、欧文フォントだと漢字だけ別書体に化ける。和文も欧文も同じ書体で出る明朝に変更（見出しの「藤田大知」と同じ書体）。めでたい数字ではないため金は使わず、上は夜のような暗い紫、下ほど煙のようにくすむ紫のグラデーションで不穏な印象にする。 */ .marfan__stat .big{ font-family:var(--font-mincho); font-size:clamp(3rem,2rem + 5vw,5rem); font-weight:700; line-height:.95; letter-spacing:-.01em; background:linear-gradient(175deg,#120A22 0%,#2E1C55 40%,#54407F 75%,#7D6E9C 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .marfan__stat .big em{font-style:normal; font-size:.32em; margin-left:.5rem; letter-spacing:.08em; -webkit-text-fill-color:var(--ink-2)} .marfan__stat p{font-size:.88rem; color:var(--ink-2); line-height:1.9} /* ---------- 15. メディア ---------- */ .media{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem} /* 出演実績のカード。以前はブログ記事へのリンクだったが、ブログ閉鎖に合わせてリンクをなくしたため、押せるように見えるホバー時の浮き上がり・拡大はつけない。 */ .media__card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; display:block; position:relative; box-shadow:var(--shadow-sm); } .media__thumb{aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); position:relative} .media__thumb img{width:100%; height:100%; object-fit:cover} .media__meta{padding:1.2rem 1.3rem 1.4rem} .media__meta time{font-family:var(--font-en); font-size:.82rem; font-style:italic; font-weight:600; letter-spacing:.12em; color:var(--gold-ink)} .media__meta h3{font-size:.96rem; font-weight:500; letter-spacing:.04em; margin:.4rem 0 .1rem; line-height:1.6; color:var(--brand-deep)} /* 番組ごとの一言（全国放送・再放送など） */ .media__meta p{font-size:.84rem; line-height:1.75; color:var(--ink-2); margin-top:.35rem} /* ---------- 16. 年表 ---------- */ .tl{position:relative; padding-left:2.3rem; display:grid; gap:.2rem} .tl::before{content:""; position:absolute; left:6px; top:.7rem; bottom:.7rem; width:2px; border-radius:2px; background:linear-gradient(180deg,transparent,var(--violet) 10%,var(--accent-2) 90%,transparent)} .tl__row{display:grid; grid-template-columns:5.4rem 1fr auto; gap:1.2rem; padding:.7rem 0; position:relative; align-items:baseline; border-bottom:1px solid var(--line-soft)} .tl__row:last-child{border-bottom:0} .tl__row::before{ content:""; position:absolute; left:-2.3rem; top:1.15rem; width:14px; height:14px; border-radius:50%; background:#fff; border:2.5px solid var(--violet); transition:border-color .4s, box-shadow .4s, transform .4s; } @media (hover:hover) and (pointer:fine){ .tl__row:hover::before{border-color:var(--accent); box-shadow:0 0 0 5px rgba(229,32,125,.14); transform:scale(1.15)} } .tl__row.is-award::before{background:var(--grad-gold); border-color:var(--gold)} .tl__yr{font-family:var(--font-en); font-size:1.02rem; font-style:italic; font-weight:600; color:var(--muted-2); letter-spacing:.05em} .tl__row.is-award .tl__yr{color:var(--gold-ink)} .tl__ev{font-size:.89rem; line-height:1.8; color:var(--ink-2)} .tl__ev strong{color:var(--brand-deep)} .tl__ev small{display:block; color:var(--muted-2); font-size:.78rem; margin-top:.15rem} .tl__tag{ font-family:var(--font-en); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; padding:.16rem .6rem; border-radius:6px; background:rgba(155,107,240,.13); color:#6730B8; border:1px solid rgba(124,63,212,.28); } .tl__row.is-award .tl__tag{background:rgba(201,150,47,.14); color:var(--gold-ink); border-color:rgba(201,150,47,.32)} .tl__hidden{display:none} .tl.is-expanded .tl__hidden{display:grid} .more-btn{margin:2.2rem auto 0; display:flex} /* ---------- 17. お問い合わせ ---------- */ .contact__card{ border-radius:var(--radius-lg); overflow:hidden; background:#fff; position:relative; border:1px solid var(--line); box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1.1fr .9fr; } /* 入力フォームが入る場合は左を広く取る（2列の入力欄が窮屈になるため） */ .contact__card:has(.form){grid-template-columns:1.55fr .85fr} .contact__card::before{content:""; position:absolute; inset:0 0 auto; height:5px; z-index:2; background:var(--grad-hot)} .contact__main{padding:clamp(2rem,4vw,3.2rem)} .contact__main h3{font-family:var(--font-mincho); font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem); letter-spacing:.06em; line-height:1.55; margin-bottom:1rem; color:var(--brand-deep)} .contact__main > p{color:var(--muted); font-size:.9rem; margin-bottom:1.9rem} .contact__steps{display:grid; gap:1rem; margin-bottom:2.1rem} .contact__steps li{display:flex; gap:.9rem; align-items:flex-start; font-size:.87rem; color:var(--ink-2)} .contact__steps b{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-en); font-size:.8rem; font-weight:600; color:var(--accent-ink); background:rgba(229,32,125,.10); border:1px solid rgba(229,32,125,.22); margin-top:.2rem; } .contact__aside{ padding:clamp(2rem,4vw,3.2rem); border-left:1px solid var(--line); background:var(--paper-2); display:grid; align-content:start; gap:1.6rem; } .contact__row{display:grid; gap:.4rem} .contact__row > span{font-family:var(--font-en); font-size:.76rem; font-weight:600; letter-spacing:.18em; color:var(--accent-ink); text-transform:uppercase} .contact__row a,.contact__row p{font-size:.93rem; letter-spacing:.02em; word-break:break-all; color:var(--ink-2)} .contact__row > a{transition:color .3s} @media (hover:hover) and (pointer:fine){ .contact__row > a:hover{color:var(--accent-ink)} } .contact__row small{display:block; font-size:.78rem; color:var(--muted-2); margin-top:.2rem} /* 講演ページ「ご依頼方法」：日本語ラベルは小さい文字なのでゴシックに */ .contact__aside--ja .contact__row > span{font-family:var(--font-jp); font-size:.8rem; font-weight:500; letter-spacing:.14em} .socials{display:flex; gap:.6rem; flex-wrap:wrap} /* 普段はアイコンだけの正方形（左右14px＋アイコン18px＝46px）。マウスを乗せると横に伸びて「Instagramはコチラ」などの説明が出る。 */ .socials a{ height:46px; min-width:46px; padding:0 13px; border-radius:14px; display:inline-flex; align-items:center; border:1px solid var(--line); background:#fff; color:var(--brand); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), color .4s, background .4s, box-shadow .4s; } @media (hover:hover) and (pointer:fine){ .socials a:hover{transform:translateY(-4px); color:#fff; background:var(--grad-hot); box-shadow:var(--shadow-hot)} } .socials svg{width:18px; height:18px; flex:none} /* 説明文。閉じている間も読み上げソフトには読まれる（リンク名になる） */ .socials__label{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; font-size:.8rem; font-weight:500; letter-spacing:.04em; transition:max-width .45s var(--ease), opacity .3s, margin-left .45s var(--ease); } .socials a:focus-visible .socials__label{max-width:12em; opacity:1; margin-left:.55rem} /* タッチ操作のスマホでは乗せる操作がないため、マウスが使える端末でだけ伸ばす */ @media (hover:hover) and (pointer:fine){ .socials a:hover .socials__label{max-width:12em; opacity:1; margin-left:.55rem} } .qr{display:flex; align-items:center; gap:1rem} .qr img{width:78px; height:78px; padding:8px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm)} .qr p{font-size:.74rem; color:var(--muted-2); line-height:1.7} /* ---------- 18. 前後ページ送り ---------- */ .pager{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:clamp(3rem,6vw,4.5rem)} .pager__item{ display:grid; gap:.4rem; padding:1.5rem 1.7rem; border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } @media (hover:hover) and (pointer:fine){ .pager__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(229,32,125,.3)} } .pager__item--next{text-align:right} .pager__item:only-child{grid-column:1 / -1} .pager__item .label{font-family:var(--font-en); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink)} .pager__ttl{font-family:var(--font-mincho); font-weight:700; letter-spacing:.05em; font-size:clamp(1.02rem,.95rem + .5vw,1.3rem); color:var(--brand-deep); display:flex; align-items:baseline; gap:.6rem} .pager__item--next .pager__ttl{justify-content:flex-end} .pager__ttl em{font-style:italic; font-family:var(--font-en); font-size:.68em; font-weight:600; color:var(--muted-2)} /* ---------- 19. ページ末CTA ---------- */ .cta-strip{position:relative; overflow:hidden; color:#fff; background:var(--brand-deep); padding-block:clamp(3rem,6vw,4.5rem)} .cta-strip__in{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between} .cta-strip .eyebrow{background:none; color:#FFD9EC; -webkit-text-fill-color:#FFD9EC} .cta-strip .eyebrow::before{background:linear-gradient(90deg,var(--gold-lift),transparent)} .cta-strip h2{font-family:var(--font-mincho); font-weight:700; letter-spacing:.05em; font-size:clamp(1.4rem,1.1rem + 1.6vw,2.3rem); line-height:1.55} .cta-strip p{color:rgba(255,255,255,.82); font-size:.9rem; margin-top:.8rem; max-width:36rem} /* ---------- 20. フッター ---------- */ .footer{padding-block:3.2rem 2.2rem; background:var(--brand-deep); color:#fff; position:relative; overflow:hidden} .footer__in{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; position:relative; z-index:1} .footer .brand__name{color:#fff} .footer .brand__sub{color:rgba(255,255,255,.55)} .footer__nav{display:flex; flex-wrap:wrap; gap:.4rem 1.7rem; font-size:.84rem} .footer__nav a{color:rgba(255,255,255,.78); transition:color .3s} @media (hover:hover) and (pointer:fine){ .footer__nav a:hover{color:var(--accent-2)} } .footer__btm{margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; position:relative; z-index:1; font-size:.74rem; color:rgba(255,255,255,.6); letter-spacing:.06em} /* ---------- 21. 読み物（マルファン本文） ---------- */ .article{max-width:44rem; margin-inline:auto} .article > *+*{margin-top:1.5rem} .article p{color:var(--ink-2); line-height:2.15; font-size:1.02rem} /* 見出しの上限は、いちばん長い「どうして自分がマルファン症候群だってわかったの？」が本文の幅（44rem）に1行で収まる大きさ（字間込みで文字サイズの約26倍＋番号）にしている */ .article h2{ font-family:var(--font-mincho); font-weight:700; color:var(--brand-deep); font-size:clamp(1.4rem,1.1rem + 1vw,1.6rem); letter-spacing:.06em; line-height:1.6; margin-top:clamp(3rem,5vw,4.5rem); padding-top:2rem; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:1rem; } .article h2 .n{ font-family:var(--font-en); font-style:italic; font-size:.78em; font-weight:600; flex:none; color:var(--accent-ink); } .article .lede{font-family:var(--font-mincho); font-weight:700; color:var(--brand-deep); font-size:clamp(1.15rem,1rem + .9vw,1.6rem); line-height:1.95; letter-spacing:.04em} .article strong{color:var(--brand-deep); font-weight:700} /* マーカー。もとは本文（.article）専用だったが、リード文などでも使えるよう .article の外に出した。見た目はそのまま。 */ .mark{background:linear-gradient(transparent 60%, rgba(255,79,163,.35) 60%); padding-inline:.15em; color:var(--brand-deep); font-weight:500} .article ul.checks{display:grid; gap:.7rem; padding:1.8rem 2rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper-2); box-shadow:none} .article ul.checks li{display:flex; gap:.85rem; align-items:flex-start; font-size:.95rem; line-height:1.9; color:var(--ink-2)} .article ul.checks li::before{content:""; width:6px; height:6px; border-radius:50%; flex:none; background:var(--accent); margin-top:.78em} .article ul.checks li em{font-style:normal; color:var(--muted-2); font-size:.86em} /* 本文中の強調の囲み。濃いグラデーションだと読みにくいため、同じ色味をうすくした地に濃い文字 */ .pull{ padding:2.2rem clamp(1.6rem,4vw,2.8rem); border-radius:var(--radius-lg); margin-block:clamp(2.5rem,5vw,3.5rem); position:relative; overflow:hidden; background:linear-gradient(120deg,#FAE3EE 0%,#F4E6F6 48%,#EDE9F7 100%); border:1px solid rgba(163,43,176,.12); box-shadow:0 20px 44px -30px rgba(163,43,176,.35); font-family:var(--font-mincho); font-weight:700; font-size:clamp(1.1rem,.95rem + .8vw,1.5rem); line-height:1.95; letter-spacing:.05em; text-align:center; } .article .pull{color:var(--brand-deep)} /* .article p の文字色より優先させる */ .callout{ padding:1.8rem 2rem; border-radius:var(--radius); display:grid; gap:.7rem; border:1px solid var(--line); background:var(--paper-2); } .callout h3{font-family:var(--font-mincho); font-size:1.08rem; letter-spacing:.07em; color:var(--gold-ink)} .callout p{font-size:.92rem; color:var(--ink-2); line-height:2} .callout p+p{margin-top:.7rem} .callout strong{color:var(--brand-deep)} .sign{text-align:right; font-family:var(--font-mincho); font-weight:700; font-size:1.15rem; letter-spacing:.22em; margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--brand-deep)} .sign small{display:block; font-family:var(--font-en); font-style:italic; font-size:.74rem; letter-spacing:.18em; color:var(--muted-2); margin-top:.4rem} /* ---------- 22. 出現アニメーション ---------- */ .rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)} .rv.in{opacity:1; transform:none} .rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s} .rv-d3{transition-delay:.27s} .rv-d4{transition-delay:.36s} .rv-d5{transition-delay:.45s} .rv-d6{transition-delay:.54s} /* ---------- 23. Responsive ---------- */ /* 手動の改行は、画面が狭いと自然な折り返しと重なって1〜2文字の行ができる。横2段組みが窮屈になる 1100px 以下では改行を切って自然に流す。 */ @media (max-width:1100px){ .hero__copy br{display:none} } /* ヘッダーのナビは6項目（「マジック出演プラン」「よくある質問」など項目名も長い）で、 1165px 前後から1行に収まらず、ロゴ・項目・お問い合わせボタンがすべて 2行に折り返して崩れる。余裕を見て 1220px 以下はハンバーガーメニューに切り替える（ヒーローの1段組みなど、他の切り替えは 1000px のまま）。ナビに項目を足したら、崩れ始める幅を測り直してこの値を見直すこと。 */ @media (max-width:1220px){ .nav{display:none} .header .btn{display:none} .burger{display:flex} } @media (max-width:1080px){ .toc{grid-template-columns:repeat(2,1fr)} .svc{grid-template-columns:repeat(2,1fr)} .media{grid-template-columns:repeat(2,1fr)} } @media (max-width:1000px){ .nav{display:none} .header .btn{display:none} .burger{display:flex} .hero__in{grid-template-columns:1fr; text-align:center; gap:2.5rem} /* 中央ぞろえのとき、字間は最後の文字の後ろにも入るぶん左に寄る。字間と同じ値の text-indent で打ち消し、「プロマジシャン」と「藤田大知」の中心をぴったりそろえる（字間が違うので、そろえないと約1pxずれる）。 */ .hero h1{text-indent:.08em} .hero__en{text-indent:.2em} .hero__copy{margin-inline:auto} .hero__actions,.hero__sns{justify-content:center} .hero__tag{margin-inline:auto} /* Text leads on one column — leading with the card pushed the name below the fold. */ .hero__card{margin-top:.5rem} .hero__card img{width:min(52vw,205px); margin-inline:auto} .hero__badge{left:auto; right:-2%; bottom:6%} .about__grid{grid-template-columns:1fr; gap:3rem} .about__photo{max-width:340px; margin-inline:auto} .about__photo::before{inset:1rem -1rem -1rem 1rem} .marfan__in{grid-template-columns:1fr; gap:2.2rem} /* :has() 版は詳細度が高いので、1列に戻す指定も同じ形で書く必要がある */ .contact__card,.contact__card:has(.form){grid-template-columns:1fr} .contact__aside{border-left:0; border-top:1px solid var(--line)} } @media (max-width:680px){ :root{--radius:16px; --radius-lg:22px} /* 扉のリード・見出しの
はスマホでも残す（PC と同じ位置で改行する）。文の途中で PC の行幅に合わせただけの改行は .br-wide にして消す。 */ .hero__copy{max-width:23rem} .toc,.svc,.media,.req{grid-template-columns:1fr} .facts{grid-auto-flow:row; grid-auto-columns:auto} .svc,.media{max-width:460px; margin-inline:auto} .req__panel{padding-left:1.5rem} .notice{flex-direction:column; gap:.7rem} .tl__row{grid-template-columns:1fr; gap:.25rem} .tl{padding-left:1.9rem} .tl::before{left:5px} .tl__row::before{left:-1.9rem; top:.95rem; width:12px; height:12px} .tl__tag{justify-self:start} .pager{grid-template-columns:1fr} .pager__item--next{text-align:left} .pager__item--next .pager__ttl{justify-content:flex-start} .cta-strip__in{flex-direction:column; align-items:stretch} .footer__in{flex-direction:column} .hero__badge{position:static; margin-top:1.5rem; display:inline-block; animation:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important} .rv{opacity:1; transform:none} } /* ---------- 24. 講演ページ ---------- */ /* 対象（学校・企業・医療福祉・行政）の4枠 */ .aud{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem} .aud__item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.3rem; box-shadow:var(--shadow-sm); display:grid; gap:.5rem; transition:transform .5s var(--ease), box-shadow .5s var(--ease); } @media (hover:hover) and (pointer:fine){ .aud__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)} } .aud__item h3{font-family:var(--font-mincho); font-weight:700; font-size:1.14rem; letter-spacing:.06em; color:var(--brand-deep); line-height:1.5} .aud__item .en{font-family:var(--font-en); font-style:italic; font-size:.8rem; font-weight:600; color:var(--accent-ink); letter-spacing:.1em} .aud__item p{font-size:.84rem; color:var(--muted); line-height:1.85} /* 講演で伝えること */ .points{display:grid; gap:1.1rem} /* 番号と見出しは文字の底の線（ベースライン）でそろえる。start だと番号が3px高く見える */ .points li{ display:grid; grid-template-columns:2.6rem 1fr; gap:1.1rem; align-items:baseline; padding:1.4rem 1.6rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .points b{ font-family:var(--font-en); font-style:italic; font-weight:600; font-size:1.15rem; color:var(--accent-ink); line-height:1.4; } .points h3{font-family:var(--font-mincho); font-weight:700; font-size:1.1rem; letter-spacing:.05em; color:var(--brand-deep); margin-bottom:.4rem; line-height:1.55} .points p{font-size:.9rem; color:var(--muted); line-height:1.9} /* 演題カードは画像なしでも成立させる */ .svc__card--noimg .svc__body{padding-top:1.8rem} @media (max-width:1000px){ .aud{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ .aud{grid-template-columns:1fr} .points li{grid-template-columns:1fr; gap:.4rem} } /* ---------- 25. お問い合わせフォーム ---------- */ .form{display:grid; gap:1.5rem} .form__row{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem} .field{display:grid; gap:.55rem} .field > label{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; font-weight:500; color:var(--brand-deep); letter-spacing:.04em; } .badge{ font-size:.66rem; font-weight:500; letter-spacing:.1em; padding:.15rem .5rem; border-radius:5px; line-height:1.6; } .badge--req{background:rgba(229,32,125,.10); color:var(--accent-ink); border:1px solid rgba(229,32,125,.28)} .badge--opt{background:rgba(75,47,128,.07); color:var(--muted); border:1px solid var(--line)} .field__hint{font-size:.78rem; color:var(--muted-2); line-height:1.7} .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field textarea{ width:100%; padding:.85rem 1rem; font:inherit; font-size:.92rem; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:12px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .field textarea{min-height:9rem; resize:vertical; line-height:1.9} .field input::placeholder,.field textarea::placeholder{color:#A79FB4} .field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(229,32,125,.12); } /* ラジオはチップ状にして押しやすくする */ .choices{display:flex; flex-wrap:wrap; gap:.6rem} .choice{position:relative} .choice input{position:absolute; opacity:0; width:0; height:0} .choice span{ display:block; padding:.7rem 1.2rem; border-radius:999px; cursor:pointer; font-size:.88rem; letter-spacing:.04em; color:var(--ink-2); background:#fff; border:1.5px solid var(--line); transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); } @media (hover:hover) and (pointer:fine){ .choice span:hover{border-color:var(--accent-2); color:var(--accent-ink)} } .choice input:checked + span{ background:var(--grad-hot); border-color:transparent; color:#fff; box-shadow:0 8px 20px -10px rgba(229,32,125,.7); } /* キーボード操作でも選択位置が分かるように */ .choice input:focus-visible + span{box-shadow:0 0 0 4px rgba(229,32,125,.25)} /* 入力エラー */ .field__err{display:none; font-size:.8rem; color:var(--accent-ink); letter-spacing:.03em} .field.is-invalid input,.field.is-invalid textarea{border-color:var(--accent)} .field.is-invalid .field__err{display:block} .form__foot{display:grid; gap:1.1rem; justify-items:start} .form__note{font-size:.82rem; color:var(--muted); line-height:1.85} .form__note a{color:var(--accent-ink); font-weight:500} /* 送信結果の表示 */ .form__result{ display:none; padding:1.3rem 1.5rem; border-radius:var(--radius); font-size:.88rem; line-height:1.9; border:1px solid rgba(201,150,47,.32); background:linear-gradient(120deg,var(--cream),#FFF6E8); color:var(--ink-2); } .form__result.is-shown{display:block} .form__result strong{color:var(--gold-ink)} .form__result a{color:var(--accent-ink); font-weight:500} /* 送信成功（緑）／失敗（赤）。文字色はいずれも白地・地色ともに 4.5:1 以上 */ .form__result.is-ok{ border-color:rgba(27,94,32,.28); background:linear-gradient(120deg,#F3FAF4,#E9F6EC); color:#1B4D2B; } .form__result.is-ok strong{color:#1B5E20} .form__result.is-ng{ border-color:rgba(155,27,48,.26); background:linear-gradient(120deg,#FDF5F6,#FAEAED); color:#6B1220; } .form__result.is-ng strong{color:#9B1B30} @media (max-width:680px){ .form__row{grid-template-columns:1fr} .choice span{padding:.65rem 1rem; font-size:.85rem} } /* ---------- 20. ご依頼いただいた方の声 ---------- */ .voice{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem} .voice__card{ margin:0; padding:1.9rem 1.6rem 1.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; display:flex; flex-direction:column; } /* 引用符の飾り。装飾なので読み上げ対象にならない ::before で置く */ .voice__card::before{ content:"“"; position:absolute; top:.2rem; left:1rem; font-family:var(--font-en); font-size:3.6rem; line-height:1; color:var(--accent); opacity:.18; pointer-events:none; } .voice__quote{ margin:0 0 1.2rem; position:relative; z-index:1; flex:1; font-size:.92rem; line-height:2; color:var(--ink-2); } .voice__who{ font-size:.79rem; letter-spacing:.04em; color:var(--muted-2); line-height:1.7; border-top:1px solid var(--line); padding-top:.9rem; } .voice__who strong{display:block; color:var(--brand-deep); font-weight:500; font-size:.85rem} /* カードごとにごく淡い背景色（左：青／中：ピンク／右：黄）。文字の読みやすさを優先し、白に近い明るさにとどめる。 */ .voice__card:nth-child(1){background:#EEF4FC} .voice__card:nth-child(2){background:#FCEFF5} .voice__card:nth-child(3){background:#FCF7E6} /* ---------- 21. よくある質問 ---------- */ .faq{max-width:46rem; margin-inline:auto; display:grid; gap:.7rem} .faq__item{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); overflow:hidden; } .faq__item summary{ list-style:none; cursor:pointer; position:relative; padding:1.15rem 3.2rem 1.15rem 1.4rem; font-size:.94rem; font-weight:500; line-height:1.7; color:var(--brand-deep); transition:background .3s var(--ease); } .faq__item summary::-webkit-details-marker{display:none} @media (hover:hover) and (pointer:fine){ .faq__item summary:hover{background:var(--paper-2)} } .faq__item summary:focus-visible{outline:2px solid var(--accent-ink); outline-offset:-2px} /* 開閉を示す矢印 */ .faq__item summary::after{ content:""; position:absolute; right:1.5rem; top:50%; width:8px; height:8px; border-right:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink); transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease); } .faq__item[open] summary::after{transform:translateY(-20%) rotate(225deg)} .faq__a{padding:0 1.4rem 1.35rem; font-size:.88rem; line-height:2; color:var(--ink-2)} .faq__a p{margin:0} .faq__a p + p{margin-top:.8rem} @media (max-width:900px){ .voice{grid-template-columns:1fr; gap:1rem} } @media (prefers-reduced-motion:reduce){ .faq__item summary, .faq__item summary::after{transition:none} } /* ---------- 26. スマホの文字組み・画像（680px以下） ---------- */ /* スマホは1行が短く、1文字単位で折り返すと「告｜げられました」「マジシ｜ャン」のように語の途中で切れた行が目立つ。スマホでだけ keep-all にして、と空白の位置でだけ折り返す。 iPhone の Safari は keep-all のとき「、」「。」の後ろや「「」の前でも自動では折り返さないため、文節の区切りに加えて、句読点の後ろ・開きカッコの前・nowrap のかたまりの間にもを入れる（入れ忘れると、長い文が画面からはみ出したり変な位置で折り返されたりする）。 */ /* PC・タブレットではを描画しない。で文字の並びが区切られると字の位置が 0.1〜0.3px ずれるため、その影響をできるだけ小さくする。 */ @media (min-width:681px){ wbr{display:none} } @media (max-width:680px){ body{word-break:keep-all; overflow-wrap:anywhere} input,textarea{word-break:normal; overflow-wrap:break-word} /* スマホでだけ効かせる nowrap。「」を」のようにカッコの直後で切れるのを防ぐ時などに使う */ .nowrap-sp{white-space:nowrap} /* 見出し・扉の文は、折り返したときに行の長さをそろえる */ .page-hero h1,.page-hero .s-lead,.s-title,.s-lead,.about__body h3,.cta-strip h2, .contact__main h3,.toc__ttl,.svc__body h3,.points h3,.article h2,.article .lede, .pull,.marfan__quote blockquote,.faq__item summary,.media__meta h3{text-wrap:balance} /* 2行の見出しを PC と同じ2行で見せる。長いほうの行が1行に収まる大きさまで縮める（割る数＝長い行の文字数×字間込みの1文字幅）。最小値より小さくはせず、それでも入らない狭い画面では文節の区切りで折り返す。 */ .hero__copy br{display:inline} /* 1100px 以下で消している改行を、スマホでは戻す */ .page-hero h1{font-size:max(1.6rem, min(clamp(2rem,1.3rem + 3.2vw,3.4rem), calc((100vw - var(--gutter)*2) / 9.7)))} /* 講演ページ「〜実体験で伝える講演〜」（11字） */ .page-hero h1.is-long{font-size:max(1.5rem, min(clamp(2rem,1.3rem + 3.2vw,3.4rem), calc((100vw - var(--gutter)*2) / 11.8)))} /* プロフィール「心に残る時間をお届けします。」（14字）。左の線と余白ぶん（1rem＋2px）を引く */ .about__body h3.about__catch{font-size:max(1.1rem, min(clamp(1.4rem,1.1rem + 1.4vw,2.1rem), calc((100vw - var(--gutter)*2 - 1rem - 2px) / 14.9)))} /* マルファン「「自分が病気であると知らない」」（15字） */ .marfan__quote blockquote{font-size:max(1.1rem, min(clamp(1.3rem,1rem + 1.8vw,2.3rem), calc((100vw - var(--gutter)*2) / 16)))} /* お問い合わせ「マジック出演・講演・取材の」（13字）。カードの左右の余白（2rem ずつ）と枠線を引く */ .contact__main h3.is-long{font-size:max(1.1rem, min(clamp(1.35rem,1.1rem + 1.1vw,1.9rem), calc((100vw - var(--gutter)*2 - 4rem - 2px) / 14)))} /* 料金の見出し「料金（税込）」と金額「¥33,000〜」を途中で折らない */ .svc__price small,.svc__price b{white-space:nowrap} /* マルファン「1万人に1人」のカード。「「あれ、自分もあてはまっている」—」のかたまりが縮められないため、348px 以下ではカードが画面からはみ出す。余白と文字を少し小さくして収める */ @media (max-width:348px){ .marfan__stat{padding:1.25rem} .marfan__stat p{font-size:.84rem} } /* 扉の写真。PC では文章の右に置いている写真を、スマホでは文章のすぐ下に置く（これまでスマホでは非表示だった）。HTML では写真が文章より前にあるため、order で下に回す。 */ .page-hero:has(> .page-hero__portrait),.page-hero--wash{display:flex; flex-direction:column} .page-hero__portrait,.page-hero__xray{order:1} .page-hero__xray-note{order:2} /* 講演ページの人物写真。PC と同じく上半身だけを見せ、下へ行くほど薄くして扉の下端に接地させる */ .page-hero__portrait{ display:block; position:relative; align-self:center; pointer-events:none; width:min(62vw, 250px); aspect-ratio:720 / 807; overflow:hidden; margin:2.2rem 0 calc(clamp(3rem,6vw,4.5rem) * -1); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.5) 54%, rgba(0,0,0,.15) 78%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 34%, rgba(0,0,0,.5) 54%, rgba(0,0,0,.15) 78%, transparent 100%); } .page-hero__portrait img{display:block; width:100%; height:auto} /* マルファンのレントゲン写真と注記。PC と同じ重ね方（ぼかし＋くっきり）で、注記は写真の下の中央に添える */ .page-hero__xray{ display:block; position:relative; align-self:center; pointer-events:none; mix-blend-mode:luminosity; width:min(64vw, 260px); aspect-ratio:426 / 516; margin-top:2.4rem; } .page-hero__xray img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .page-hero__xray .page-hero__xray-blur{ inset:auto; left:-6%; top:-6%; width:112%; height:112%; filter:blur(16px); -webkit-mask-image:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 18%, #000 82%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-composite:intersect; } .page-hero__xray-main{ -webkit-mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite:intersect; } .page-hero__xray-note{ display:block; align-self:center; width:min(64vw, 260px); margin:1rem 0 0; font-size:.72rem; line-height:1.7; letter-spacing:.04em; color:var(--muted-2); text-align:center; } }