/* 透明シンフォニア UPCOMING EVENT */ :root { --tsym-bg: #fdf0ef; --tsym-pink-deep: #c9647f; --tsym-pink-text: #cf7590; --tsym-text-main: #5d4249; --tsym-text-sub: #9c7f86; --tsym-blue-text: #7189ad; /* bar geometry (measured from the supplied bar images) */ --bar-w: 994px; --bar-row-top: 36px; --bar-row-h: 112px; --bar-row-pitch: 128px; --bar-date-l: 92px; --bar-date-w: 123px; --bar-content-l: 234px; --bar-content-r: 30px; /* カード内の列幅 */ --col-venue: 188px; --col-acts: 156px; --col-gap: 24px; } .tsym-upcoming, .tsym-upcoming *, .tsym-lb, .tsym-lb * { box-sizing: border-box; } /* ============ section ============ */ .tsym-upcoming { font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; color: var(--tsym-text-main); position: relative; overflow: hidden; background: var(--tsym-bg); /* リボン・見出し・装飾をまとめて下げる */ padding: 78px 0 46px; } .tsym-upcoming[hidden] { display: none; } .tsym-upcoming__lace { position: absolute; z-index: 0; pointer-events: none; } .tsym-upcoming__lace--left { top: 40px; left: 0; width: 190px; } .tsym-upcoming__lace--right { top: 150px; right: 0; width: 190px; } /* ============ heading ============ */ /* 散らした音符・キラキラ */ .tsym-upcoming__scatter { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .tsym-upcoming__scatter .s { position: absolute; } .tsym-upcoming__scatter .s1 { top: 26px; left: 13%; width: 42px; transform: rotate(-6deg); } .tsym-upcoming__scatter .s2 { top: 12px; left: 26%; width: 25px; } .tsym-upcoming__scatter .s3 { top: 74px; left: 8%; width: 22px; transform: rotate(8deg); } .tsym-upcoming__scatter .s4 { top: 54px; left: 20%; width: 18px; } .tsym-upcoming__scatter .s5 { top: 78px; left: 31%; width: 46px; opacity: .85; } .tsym-upcoming__scatter .s6 { top: 78px; right: 31%; width: 50px; opacity: .85; } .tsym-upcoming__scatter .s7 { top: 42px; right: 24%; width: 28px; transform: rotate(5deg); } .tsym-upcoming__scatter .s8 { top: 22px; right: 19%; width: 19px; } .tsym-upcoming__scatter .s9 { top: 62px; right: 13%; width: 30px; transform: rotate(-7deg); } .tsym-upcoming__scatter .s10 { top: 20px; right: 9%; width: 25px; } .tsym-upcoming__scatter .s11 { top: 88px; right: 5%; width: 18px; } .tsym-upcoming__scatter .s12 { top: 46px; right: 2%; width: 23px; transform: rotate(10deg); } .tsym-upcoming__head { position: relative; z-index: 2; text-align: center; /* リボン→UPCOMING EVENT の間隔。狭い画面ではリボンの縮小に合わせて詰まる。 bar画像は1行目のカードまで上に36pxの余白を持っているため、 見出し下は margin を取らなくてもカードとの間隔が確保される。 */ padding-top: clamp(58px, 6.4vw, 82px); margin-bottom: 0; } .tsym-upcoming__arc { position: absolute; top: 0; z-index: 0; pointer-events: none; } .tsym-upcoming__arc--left { left: 50%; margin-left: -600px; width: 440px; } .tsym-upcoming__arc--right { left: 50%; margin-left: 150px; width: 470px; } .tsym-upcoming__ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); /* 画面が狭くなるほど少しずつ小さくなる */ width: clamp(52px, 6vw, 78px); z-index: 1; pointer-events: none; } .tsym-upcoming__head h2 { position: relative; z-index: 1; margin: 0; font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: 34px; font-weight: 500; letter-spacing: 0.14em; color: var(--tsym-pink-deep); } .tsym-upcoming__head-sub { position: relative; z-index: 1; margin: 8px 0 0; font-size: 12.5px; letter-spacing: 0.22em; color: var(--tsym-pink-text); } /* ============ stage / bar image ============ */ .tsym-upcoming__stage { position: relative; z-index: 1; width: var(--bar-w); margin: 0 auto; } .tsym-upcoming__rows { position: relative; list-style: none; margin: 0; padding: 0; width: var(--bar-w); background-repeat: no-repeat; background-position: top left; background-size: var(--bar-w) auto; } /* ============================================================ 件数ごとの背景画像 ------------------------------------------------------------ ★6枚目・7枚目の素材が追加されたときの注意★ bar画像は手作業で書き出されているため、行の縦位置が完全な等間隔では ない。実測（bar5 / L）では行ピッチが 128 / 128 / 127 / 126px と 1〜2pxずつ詰まっていた。 このズレを吸収するために、下の「カード別の位置補正」で 行ごとに translateY を当てている。 6件用・7件用を追加するときは、次の手順で必ず実測すること。 そのまま追記するだけでは、6行目・7行目の文字がカードから 数pxずれる可能性が高い。 1. 画像の高さを調べ、data-count="6" / "7" の height に入れる 2. 各行のカード枠の上下端を測り、カード中心を出す 3. 文字側の中心 = 36 + (行番号-1) * 128 + 56 と比べる 4. 差が出た行は「カード別の位置補正」に1行足す （目標は全行そろえて「カード中心より +2px 下」） 実測に使ったスクリプト： C:\ClaudeProjects\03_Test\20260805_tsym_upcoming_crop\measure_rows2.ps1 （Pillow版はDOC17の作業記録を参照） LL / M / S / SS の各サイズも同様に実測が必要。 ============================================================ */ .tsym-upcoming__rows[data-count="1"] { height: 159px; background-image: url("images/upcoming-event/bars/L/bar1.webp"); } .tsym-upcoming__rows[data-count="2"] { height: 287px; background-image: url("images/upcoming-event/bars/L/bar2.webp"); } .tsym-upcoming__rows[data-count="3"] { height: 417px; background-image: url("images/upcoming-event/bars/L/bar3.webp"); } .tsym-upcoming__rows[data-count="4"] { height: 543px; background-image: url("images/upcoming-event/bars/L/bar4.webp"); } .tsym-upcoming__rows[data-count="5"] { height: 667px; background-image: url("images/upcoming-event/bars/L/bar5.webp"); } .tsym-upcoming__rows[data-count="6"] { height: 794px; background-image: url("images/upcoming-event/bars/L/bar6.webp"); } /* ============ row (text layer only) ============ */ .tsym-upcoming__row { position: absolute; left: 0; right: 0; height: var(--bar-row-h); top: calc(var(--bar-row-top) + var(--i) * var(--bar-row-pitch)); } .tsym-upcoming__date { position: absolute; left: var(--bar-date-l); top: 0; width: var(--bar-date-w); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-bottom: 12px; text-align: center; } .tsym-upcoming__year { font-size: 11.5px; letter-spacing: 0.08em; color: var(--tsym-text-sub); } .tsym-upcoming__md { font-size: 27px; line-height: 1.05; font-weight: 600; color: var(--tsym-pink-deep); letter-spacing: 0.02em; } .tsym-upcoming__wd { font-size: 10.5px; letter-spacing: 0.16em; color: var(--tsym-text-sub); } .tsym-upcoming__row[data-accent="blue"] .tsym-upcoming__md { color: #6e86ab; } .tsym-upcoming__row[data-accent="blue"] .tsym-upcoming__year, .tsym-upcoming__row[data-accent="blue"] .tsym-upcoming__wd { color: #8b98ad; } .tsym-upcoming__body { position: absolute; left: var(--bar-content-l); right: var(--bar-content-r); top: 0; height: 100%; display: grid; grid-template-columns: var(--col-venue) minmax(0, 1fr) var(--col-acts); align-items: center; gap: var(--col-gap); padding: 0 12px 0 32px; } /* 会場とイベント名の左右を入れ替える切り替え 既定 = 左:会場 / 右:イベント名 .tsym-upcoming[data-layout="title-first"] を付けると 左:イベント名 / 右:会場 */ .tsym-upcoming[data-layout="title-first"] .tsym-upcoming__body { grid-template-columns: minmax(0, 1fr) var(--col-venue) var(--col-acts); } /* 列の中身 ・種別ラベル … 常に左の列の上（動かさない） ・出演メンバー … 常に右の列（動かさない） ・会場とイベント名 … この2つだけが左右で入れ替わる */ .tsym-upcoming__col { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; } /* 種別ラベルは行の上端に固定。会場名を押し下げないので会場が上下センターに来る */ .tsym-upcoming__col--1 { position: relative; padding-top: 14px; } .tsym-upcoming__col--1 .tsym-upcoming__type { position: absolute; top: 13px; left: 0; margin: 0; } .tsym-upcoming__col--1 .tsym-upcoming__slot--title { display: none; } .tsym-upcoming__col--2 .tsym-upcoming__slot--venue { display: none; } .tsym-upcoming[data-layout="title-first"] .tsym-upcoming__col--1 .tsym-upcoming__slot--venue { display: none; } .tsym-upcoming[data-layout="title-first"] .tsym-upcoming__col--1 .tsym-upcoming__slot--title { display: block; } .tsym-upcoming[data-layout="title-first"] .tsym-upcoming__col--2 .tsym-upcoming__slot--title { display: none; } .tsym-upcoming[data-layout="title-first"] .tsym-upcoming__col--2 .tsym-upcoming__slot--venue { display: block; } .tsym-upcoming__type { display: inline-block; padding: 1px 7px 2px; border-radius: 3px; font-size: 10px; line-height: 1.2; letter-spacing: 0.05em; border: 1px solid #eeb6c4; background: rgba(255,255,255,0.72); color: var(--tsym-pink-text); margin-bottom: 5px; } /* イベント種別ラベル（種別が増えたらここに1行足す） */ .tsym-upcoming__type--oneman { border-color: #eeb6c4; color: var(--tsym-pink-text); } /* ワンマンライブ */ .tsym-upcoming__type--taiban { border-color: #b8c9e2; color: var(--tsym-blue-text); } /* 対バンイベント */ .tsym-upcoming__type--host { border-color: #c9bde0; color: #8271a6; } /* 主催イベント */ .tsym-upcoming__type--cheki { border-color: #f0c3ac; color: #b3775a; } /* チェキ会 */ .tsym-upcoming__type--photo { border-color: #bcd6c6; color: #6a9179; } /* 撮影イベント */ .tsym-upcoming__type--offkai { border-color: #e5cba0; color: #9d8046; } /* オフ会 */ .tsym-upcoming__type--bbq { border-color: #d8c9a4; color: #8d7a4b; } /* BBQオフ会 */ .tsym-upcoming__type--stream { border-color: #b6cfe0; color: #5f87a0; } /* 配信 */ .tsym-upcoming__type--other { border-color: #d6c9c4; color: #8a7a74; } /* その他 */ .tsym-upcoming__title { margin: 0; font-size: 15.5px; line-height: 1.42; font-weight: 600; letter-spacing: 0.02em; color: var(--tsym-text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 会場（左） */ .tsym-upcoming__venue { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0.02em; color: var(--tsym-text-main); overflow-wrap: break-word; } .tsym-upcoming__venue--tbd { color: var(--tsym-text-sub); font-weight: 400; } .tsym-upcoming__talents { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 7px; } .tsym-upcoming__talent { font-size: 10px; color: #ab9199; } .tsym-upcoming__talent--rest { color: #a89096; } .tsym-upcoming__talent--rest::after { content: "休"; margin-left: 2px; font-size: 8.5px; padding: 0 3px; border-radius: 2px; background: #efe3de; color: #96796f; } /* min-width:0 が無いと、ボタンの文字（改行しにくい日本語）が グリッド列の想定幅(--col-acts)を押し広げ、隣のタイトル列(minmax(0,1fr)) から幅を奪ってタイトルが極端に折り返される事故になる（実機で確認）。 */ .tsym-upcoming__acts { position: relative; display: flex; flex-direction: column; gap: 7px; padding-left: 20px; min-width: 0; } /* チケット半券の破線（画像から外し、CSSで描画） */ .tsym-upcoming__acts::before { content: ""; position: absolute; left: calc(var(--col-gap) / -2); top: 14px; bottom: 14px; border-left: 1px dashed #eab9c6; } .tsym-upcoming__btn { display: flex; align-items: center; justify-content: center; min-height: 33px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0.04em; text-decoration: none; /* 入りきる時は1行、入らない時だけの位置で2行になる */ text-align: center; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; transition: transform .15s ease, box-shadow .15s ease; } /* 1行目：詳細を見る／イベント画像を見る（どちらか一方） */ .tsym-upcoming__btn--detail { background: linear-gradient(180deg,#eb92a8,#dd7c95); color: #fff; border: none; box-shadow: 0 2px 5px rgba(198,102,131,.28); font-family: inherit; cursor: pointer; } /* 2行目：カレンダー共有（文字のみ） v1.8.8: 共有マークを廃止。押す前に何が起きるかを文字で伝える。 アイコン用の gap も不要になったので外した。 */ .tsym-upcoming__btn--cal { background: rgba(255,255,255,.92); color: var(--tsym-pink-text); border: 1px solid #edb3c3; } .tsym-upcoming__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(198,102,131,.3); } .tsym-upcoming__btn:focus-visible { outline: 2px solid var(--tsym-pink-deep); outline-offset: 2px; } /* ============ footer ============ */ .tsym-upcoming__foot { position: relative; z-index: 1; margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 22px; } .tsym-upcoming__foot-note { width: 134px; pointer-events: none; } .tsym-upcoming__more { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid #f0bdcb; color: var(--tsym-pink-text); text-decoration: none; font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: 14px; letter-spacing: 0.28em; text-indent: 0.28em; transition: transform .15s ease, box-shadow .15s ease; } .tsym-upcoming__more svg { width: 12px; height: 12px; } .tsym-upcoming__more:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(198,102,131,.22); } .tsym-upcoming__more:focus-visible { outline: 2px solid var(--tsym-pink-deep); outline-offset: 2px; } .tsym-upcoming__emblem { position: absolute; right: 56px; bottom: 16px; width: 86px; z-index: 1; pointer-events: none; } /* ============ size variants (design-first, not fluid) ============ */ @media (max-width: 1180px) { :root { --bar-w: 894px; } .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/M/bar1.webp"); } .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/M/bar2.webp"); } .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/M/bar3.webp"); } .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/M/bar4.webp"); } .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/M/bar5.webp"); } .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/M/bar6.webp"); } :root { --col-venue: 168px; --col-acts: 150px; } .tsym-upcoming__arc--left { margin-left: -545px; width: 400px; } .tsym-upcoming__arc--right { margin-left: 140px; width: 420px; } } @media (max-width: 1000px) { :root { --bar-w: 794px; } .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/S/bar1.webp"); } .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/S/bar2.webp"); } .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/S/bar3.webp"); } .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/S/bar4.webp"); } .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/S/bar5.webp"); } .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/S/bar6.webp"); } :root { --col-venue: 146px; --col-acts: 142px; --col-gap: 18px; } .tsym-upcoming__lace { display: none; } .tsym-upcoming__more { min-width: 170px; } .tsym-upcoming__foot-note { width: 118px; } } @media (max-width: 860px) { :root { --bar-w: 674px; --bar-date-l: 72px; --bar-content-l: 214px; } .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/SS/bar1.webp"); } .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/SS/bar2.webp"); } .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/SS/bar3.webp"); } .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/SS/bar4.webp"); } .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/SS/bar5.webp"); } /* ★bar6のSS素材だけ実測694px幅（他の件数は674px）。 ここ(700〜860px)はJSが動く前の暫定フォールバックなので、 widthまでは強制しない（699px以下のSP割合指定と詳細度が衝突し、 スマホ側の表示を壊してしまうため）。694px→674pxへの多少の縮小は このごく短い過渡区間だけの話なので実害は小さい。 */ .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/SS/bar6.webp"); } :root { --col-venue: 124px; --col-acts: 130px; --col-gap: 14px; } .tsym-upcoming__body { padding-left: 22px; } .tsym-upcoming__venue { font-size: 14px; } .tsym-upcoming__title { font-size: 14px; } .tsym-upcoming__arc { display: none; } .tsym-upcoming__emblem { width: 80px; right: 40px; bottom: 16px; } .tsym-upcoming__foot-note { width: 100px; } .tsym-upcoming__more { min-width: 150px; } } /* below the smallest artwork: scale the whole stage down proportionally */ /* ============ ライトボックス ============ */ .tsym-lb { position: fixed; inset: 0; z-index: 9000; background: rgba(60, 40, 50, .82); display: flex; align-items: center; justify-content: center; padding: 76px 16px 24px; overscroll-behavior: contain; } .tsym-lb[hidden] { display: none; } .tsym-lb__inner { max-width: 100%; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } /* 縦長のタイムテーブルでも全体が見える。勝手に切り取らない */ .tsym-lb__img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; background: #fff; } /* ×はスマホの親指で押しやすい大きさ・位置に固定 */ .tsym-lb__close { position: fixed; top: 14px; right: 14px; width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.94); color: #6b4a55; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.3); -webkit-tap-highlight-color: transparent; } .tsym-lb__close svg { width: 24px; height: 24px; } .tsym-lb__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 640px) { .tsym-lb { padding: 82px 10px 18px; } .tsym-lb__close { width: 58px; height: 58px; top: 12px; right: 12px; } .tsym-lb__close svg { width: 26px; height: 26px; } } /* ============ 予定が0件のとき ============ */ .tsym-upcoming__soon { margin: 0; padding: 46px 0 40px; text-align: center; font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 3.2vw, 30px); letter-spacing: 0.22em; text-indent: 0.22em; color: var(--tsym-pink-deep); opacity: .9; } .tsym-upcoming__soon[hidden] { display: none; } /* ============ カード別の位置補正 ============ bar画像のカード枠は行ごとに数px位置が異なるため（実測値）、 中央の情報ブロックだけを行ごとに補正して見え位置をそろえる。 4枚目（文字がカード中心より2px下）を基準とし、全行をその状態へ合わせる。 行 カード中心 文字中心 補正前のズレ 補正量 1 92.0 92 0 +2px 2 220.0 220 0 +2px 3 347.5 348 +0.5 +2px 4 474.0 476 +2.0 0 ←基準 5 600.0 604 +4.0 -2px 日付枠・右側ボタン・カード高さ・カード間隔は動かさない。 */ .tsym-upcoming__col { transform: translateY(var(--tsym-dy, 0)); } .tsym-upcoming__row:nth-child(1) { --tsym-dy: 2px; } .tsym-upcoming__row:nth-child(2) { --tsym-dy: 2px; } .tsym-upcoming__row:nth-child(3) { --tsym-dy: 2px; } .tsym-upcoming__row:nth-child(4) { --tsym-dy: 0; } .tsym-upcoming__row:nth-child(5) { --tsym-dy: -2px; } .tsym-upcoming__row:nth-child(6) { --tsym-dy: -1px; } /* ============ 地域・開始時刻 ============ */ /* 会場名の上に小さく出す地域（秋葉原・五反田 など） */ .tsym-upcoming__area { display: block; margin-bottom: 2px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--tsym-text-sub); } /* 開始時刻。終了時刻は持たないので「18:00〜」で止める */ .tsym-upcoming__time { margin: 3px 0 0; font-size: 11.5px; letter-spacing: 0.02em; color: var(--tsym-text-sub); } @media (max-width: 860px) { .tsym-upcoming__area { font-size: 10px; } .tsym-upcoming__time { font-size: 11px; } } /* ============ 装飾画像を背景になじませる ============ 素材は透過なしの矩形で切り出しているため、そのまま置くと 地色のわずかな差で四角い継ぎ目が見える。 縁をマスクでぼかし、角をわずかに丸めて境目を消す。 */ .tsym-upcoming__lace, .tsym-upcoming__arc, .tsym-upcoming__foot-note, .tsym-upcoming__scatter .s { border-radius: 6px; } /* 左上のレース：内側（右下）へ向けて消す */ .tsym-upcoming__lace--left { -webkit-mask-image: radial-gradient(135% 135% at 0% 0%, #000 52%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(135% 135% at 0% 0%, #000 52%, rgba(0,0,0,0) 100%); } /* 右のレース：内側（左下）へ向けて消す */ .tsym-upcoming__lace--right { -webkit-mask-image: radial-gradient(135% 135% at 100% 0%, #000 52%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(135% 135% at 100% 0%, #000 52%, rgba(0,0,0,0) 100%); } /* 見出し左右の弧線・下部の音符：四辺をやわらかく落とす */ .tsym-upcoming__arc, .tsym-upcoming__foot-note { -webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0) 100%); } /* 散らした音符・キラキラ：小さいので強めにぼかす */ .tsym-upcoming__scatter .s { -webkit-mask-image: radial-gradient(closest-side, #000 55%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(closest-side, #000 55%, rgba(0,0,0,0) 100%); } /* ============ MOREボタン ============ 白いカードだと背景から浮くので、地色(#fdf0ef)からごくわずかに 明るいだけの色にして、枠線で形が分かる程度にとどめる。 */ .tsym-upcoming__more { background: #fef6f5; /* 地色 #fdf0ef よりほんの少し明るいだけ */ border-color: #eec3ce; box-shadow: none; } .tsym-upcoming__more:hover { background: #fffaf9; box-shadow: 0 2px 8px rgba(201, 110, 136, 0.12); } /* ============================================================ テーマのCSSに負けないための指定 ------------------------------------------------------------ TENJIKU系テーマは #main_col h3 のようにID付きで見出しを指定するため、 クラス1つの指定（0,1,0）では詳細度で負けて文字が巨大化する。 :is() の詳細度は「引数の中で最も強いもの」になるため、 ID を1つ含めることでテーマ側と同じ土俵に乗せる。 セクション内だけに効くので他ページへは影響しない。 ============================================================ */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming h2, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming h3, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming p, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming ul, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming li, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming span { margin: 0; padding: 0; border: 0; text-align: inherit; text-indent: 0; } /* ここで background を打ち消してはいけない。 カードの枠と質感は ul.tsym-upcoming__rows の背景画像で描いているため、 一括で background:none を当てるとカードが丸ごと消える。 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming li::before, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming li::marker { content: none; } /* 見出し */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__head h2 { font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: 0.14em; color: var(--tsym-pink-deep); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__head-sub { margin-top: 8px; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.22em; color: var(--tsym-pink-text); } /* 日付 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__year { font-size: 11.5px; line-height: 1.3; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__md { font-size: 27px; line-height: 1.05; font-weight: 600; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__wd { font-size: 10.5px; line-height: 1.3; } /* カード内の文字 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__title { font-size: 15.5px; line-height: 1.42; font-weight: 600; letter-spacing: 0.02em; color: var(--tsym-text-main); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__venue { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--tsym-text-main); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__area { font-size: 10.5px; line-height: 1.3; margin-bottom: 2px; color: var(--tsym-text-sub); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__time { font-size: 11.5px; line-height: 1.3; margin-top: 3px; color: var(--tsym-text-sub); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__talent { font-size: 10px; line-height: 1.4; color: #ab9199; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__talents { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 7px; list-style: none; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__type { display: inline-block; padding: 1px 7px 2px; font-size: 10px; line-height: 1.2; letter-spacing: 0.05em; border: 1px solid #eeb6c4; border-radius: 3px; background: rgba(255,255,255,0.72); margin-bottom: 5px; } /* ボタン */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn { font-size: 11.5px; line-height: 1.3; letter-spacing: 0.04em; text-decoration: none; min-height: 33px; padding: 5px 10px; border-radius: 999px; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__more { font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: 14px; line-height: 1; letter-spacing: 0.28em; text-indent: 0.28em; text-decoration: none; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__soon { font-family: "Times New Roman", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; letter-spacing: 0.22em; text-indent: 0.22em; color: var(--tsym-pink-deep); text-align: center; padding: 46px 0 40px; } /* 画像がテーマ側で伸縮されないように */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming img { max-width: none; height: auto; vertical-align: top; box-shadow: none; border: 0; border-radius: 0; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__lace, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__arc, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__foot-note, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__scatter .s { border-radius: 6px; } @media (max-width: 860px) { :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__head h2 { font-size: 26px; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__venue { font-size: 14px; } } /* ============ タレント名とはみ出し防止 ============ カードは背景画像なので高さが固定されている。 中身が入りきらないと文字がカードの外へこぼれるため、 列の中で必ず収まるようにする。 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__col { max-height: 100%; overflow: hidden; } /* イベント名は最大2行まで。長い名前でもタレント名を押し出さない。 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* タレント名は1行に収め、入らない分は隠す（並びは崩さない） */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__talents { max-height: 2.9em; overflow: hidden; } /* PCでは小さすぎるので少し大きくする。狭い画面では従来どおり。 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__talent { font-size: 11.5px; } @media (max-width: 1000px) { :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__talent { font-size: 10.5px; } } @media (max-width: 860px) { :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__talent { font-size: 10px; } } /* ============================================================ コンテナ幅に合わせた素材選択と、チケットの中心合わせ ------------------------------------------------------------ ・素材サイズは画面幅ではなく「実際に使える幅」で選ぶ。 テーマのコンテンツ幅が狭いと、画面が広くてもカードがはみ出すため。 JSが data-size を付ける（JSが動かない場合は下のメディアクエリが働く）。 ・横位置はズラさない（--bar-shift: 0）。 この構図は「左のポール（縦線）から、チケットの一番右まで」で ひとまとまりの幅になっている。 実測でもその範囲の中心は画像の中心とほぼ一致する（差1.5px）ため、 画像をそのまま中央に置けば正しい位置になる。 チケット単体を中央に合わせようとすると、逆にポール側が寄って見える。 --bar-shift は微調整が必要になったときのために残してある。 ============================================================ */ .tsym-upcoming__stage { position: relative; left: var(--bar-shift, 0px); max-width: 100%; } /* ★カード幅(--bar-w)と一緒に、カード内の列幅(--col-*)も必ずここで指定する。 これが無いと、素材はSS(674px)に切り替わっているのに列幅だけ広い階層の値が 残り、真ん中のイベント名の列が潰れて「デ／ビュ…」のように1〜2文字ずつ 折り返される（実機で発生）。 素材の切り替えはJSがdata-sizeで行うため、@mediaのブレークポイントとは 一致しない。@media側の指定だけに頼らず、data-size側にも同じ値を書く。 値は下の@mediaブロックと合わせてあること。 */ .tsym-upcoming__stage[data-size="LL"] { --bar-w: 1094px; --bar-date-l: 92px; --bar-content-l: 234px; --bar-shift: 0px; --col-venue: 188px; --col-acts: 156px; --col-gap: 24px; } .tsym-upcoming__stage[data-size="L"] { --bar-w: 994px; --bar-date-l: 92px; --bar-content-l: 234px; --bar-shift: 0px; --col-venue: 188px; --col-acts: 156px; --col-gap: 24px; } .tsym-upcoming__stage[data-size="M"] { --bar-w: 894px; --bar-date-l: 92px; --bar-content-l: 234px; --bar-shift: 0px; --col-venue: 168px; --col-acts: 150px; --col-gap: 24px; } .tsym-upcoming__stage[data-size="S"] { --bar-w: 794px; --bar-date-l: 92px; --bar-content-l: 234px; --bar-shift: 0px; --col-venue: 146px; --col-acts: 142px; --col-gap: 18px; } .tsym-upcoming__stage[data-size="SS"] { --bar-w: 674px; --bar-date-l: 72px; --bar-content-l: 214px; --bar-shift: 0px; --col-venue: 124px; --col-acts: 130px; --col-gap: 14px; } .tsym-upcoming__stage[data-size="LL"] .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/LL/bar1.webp"); } .tsym-upcoming__stage[data-size="LL"] .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/LL/bar2.webp"); } .tsym-upcoming__stage[data-size="LL"] .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/LL/bar3.webp"); } .tsym-upcoming__stage[data-size="LL"] .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/LL/bar4.webp"); } .tsym-upcoming__stage[data-size="LL"] .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/LL/bar5.webp"); } .tsym-upcoming__stage[data-size="LL"] .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/LL/bar6.webp"); } .tsym-upcoming__stage[data-size="L"] .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/L/bar1.webp"); } .tsym-upcoming__stage[data-size="L"] .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/L/bar2.webp"); } .tsym-upcoming__stage[data-size="L"] .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/L/bar3.webp"); } .tsym-upcoming__stage[data-size="L"] .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/L/bar4.webp"); } .tsym-upcoming__stage[data-size="L"] .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/L/bar5.webp"); } .tsym-upcoming__stage[data-size="L"] .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/L/bar6.webp"); } .tsym-upcoming__stage[data-size="M"] .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/M/bar1.webp"); } .tsym-upcoming__stage[data-size="M"] .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/M/bar2.webp"); } .tsym-upcoming__stage[data-size="M"] .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/M/bar3.webp"); } .tsym-upcoming__stage[data-size="M"] .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/M/bar4.webp"); } .tsym-upcoming__stage[data-size="M"] .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/M/bar5.webp"); } .tsym-upcoming__stage[data-size="M"] .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/M/bar6.webp"); } .tsym-upcoming__stage[data-size="S"] .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/S/bar1.webp"); } .tsym-upcoming__stage[data-size="S"] .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/S/bar2.webp"); } .tsym-upcoming__stage[data-size="S"] .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/S/bar3.webp"); } .tsym-upcoming__stage[data-size="S"] .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/S/bar4.webp"); } .tsym-upcoming__stage[data-size="S"] .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/S/bar5.webp"); } .tsym-upcoming__stage[data-size="S"] .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/S/bar6.webp"); } .tsym-upcoming__stage[data-size="SS"] .tsym-upcoming__rows[data-count="1"] { background-image: url("images/upcoming-event/bars/SS/bar1.webp"); } .tsym-upcoming__stage[data-size="SS"] .tsym-upcoming__rows[data-count="2"] { background-image: url("images/upcoming-event/bars/SS/bar2.webp"); } .tsym-upcoming__stage[data-size="SS"] .tsym-upcoming__rows[data-count="3"] { background-image: url("images/upcoming-event/bars/SS/bar3.webp"); } .tsym-upcoming__stage[data-size="SS"] .tsym-upcoming__rows[data-count="4"] { background-image: url("images/upcoming-event/bars/SS/bar4.webp"); } .tsym-upcoming__stage[data-size="SS"] .tsym-upcoming__rows[data-count="5"] { background-image: url("images/upcoming-event/bars/SS/bar5.webp"); } /* ★bar6のSS素材だけ実測694px幅（他は674px）。右端の余白が18pxしか無く 674pxへ切り詰めると飾りが2pxほど欠ける恐れがあるため実寸のまま使う。 */ .tsym-upcoming__stage[data-size="SS"] .tsym-upcoming__rows[data-count="6"] { background-image: url("images/upcoming-event/bars/SS/bar6.webp"); width: 694px; background-size: 694px auto; } /* ============================================================ 縮小とチケットの中心合わせ（画面幅に関係なく効かせる） ------------------------------------------------------------ 以前は 700px 以下のときだけ縮小していたが、 素材サイズをコンテナ幅で選ぶようにしたため、 画面が広くてもテーマのコンテンツ幅が狭ければ縮小が要る。 translateX を scale のあとに書くことで、 中心合わせのズラし量も縮小率に合わせて自動で小さくなる。 ============================================================ */ .tsym-upcoming__stage { /* ズラしは箱ごと動かす。中身をずらすと、はみ出した側が切り取られてしまう。 縮小しているときはズラす量も同じだけ小さくする。 */ left: calc(var(--bar-shift, 0px) * var(--tsym-scale, 1)); margin: 0 auto; overflow: visible; } .tsym-upcoming__rows { transform: scale(var(--tsym-scale, 1)); transform-origin: top left; } /* MORE の文字色をイベント名と同じにする */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__more { color: var(--tsym-ink-head, #b34c5f); border-color: #eec3ce; } /* ============ イベント名・会場名の文字色 ============ 「大切な記録を、あなたとともに。」（.tsym-records__head）と同じ色にする。 サイト側が :root で --tsym-ink-head: #B34C5F を定義しているので、 その変数をそのまま参照する。サイト側で色を変えれば自動で追従し、 変数が無い環境では後ろの固定値が使われる。 */ .tsym-upcoming { --tsym-rose: var(--tsym-ink-head, #B34C5F); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__title, :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__venue { color: var(--tsym-rose); } /* ============ 左右の余白 ============ 端いっぱいまで広げると窮屈に見えるため、必ず余白を残す。 余白はJS側で幅から差し引いて確保しているので、 ここでpaddingを足すと二重になり左右が不揃いになる。 ステージの幅＝カードの実寸にして、margin auto で中央に置く。 */ .tsym-upcoming__stage { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; } /* ============================================================ イベント個別ページ ============================================================ */ .tsym-single { --tsym-rose: var(--tsym-ink-head, #B34C5F); max-width: 760px; margin: 0 auto; } /* 戻る導線 */ /* v2.5.0: 左に「トップへ戻る」を並べるため横並びにした（利用者指示 2026-08-10）。 狭い画面では自然に折り返す（改行位置は決め打ちしない）。 gap の縦8pxは、折り返して2行になったときの札どうしの間隔。 */ /* ★v2.5.0: --tsym-rose をここでも定義する。 この変数は .tsym-single と .tsym-upcoming の中でしか定義されていなかったが、 戻る導線はそのどちらの中にも入っていない （append_back_link は the_content へ、archive_intro は #blog_list へ直接出る）。 そのため色が未解決になり、テーマのリンク色を継承していた。 ID22 v2.24 側（.tsym-back__link）は var(--tsym-ink-head,#B34C5F) を 直接見ているので、揃えるにはこちらも同じ値に確定させる必要がある。 */ .tsym-single__back { --tsym-rose: var(--tsym-ink-head, #B34C5F); display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(10px, 1.4vw, 18px); margin: 0 0 18px; font-size: 13px; } /* v1.9.9: 下の戻るは左寄せにして、記事本文との間隔を広げる（利用者指定）。 中央寄せだと本文の終わりと近く、記事の一部のように見えてしまうため。 */ .tsym-single__back--bottom { margin: 56px 0 0; text-align: left; } /* v1.9.9: テーマの「前後の記事」ナビを出さない。 別の形で入れる可能性があるため、テーマ側の機能は削除せず、 イベントの個別ページでだけ隠す。 ★single-tsym_event は body に付くクラスなので body に直接書く。 */ body.single-tsym_event #next_prev_post { display: none; } /* アーカイブ（カテゴリー・タグ・一覧）の先頭に出すまとまり */ /* ★v2.5.0: .tsym-arch__cta も var(--tsym-rose) を使うが、 .tsym-arch は .tsym-single / .tsym-upcoming の中に入らないため 同じく未解決だった。ここでも定義する（上の .tsym-single__back と同じ理由）。 */ .tsym-arch { --tsym-rose: var(--tsym-ink-head, #B34C5F); margin: 0 0 28px; } .tsym-arch__back { margin: 0 0 22px; text-align: left; } .tsym-arch__body { margin: 0 0 8px; } /* v2.0.1: 一覧の先頭のまとまりがカード1枚分の枠を取ってしまう問題。 .tsym-arch は loop_start で出すため #blog_list の中に入る。 サイト側（一覧ページ整形）が #blog_list を display:grid の2列にしているので、 .tsym-arch も1マス目のカードとして数えられ、1件目が右のマスへ押し出される。 ★テーマ TENJIKU の index.php には #blog_list の手前に差し込めるフックが無い。 （have_posts() の直後に div が開き、loop_start はその内側で発火する） テーマを書き換えない方針なので、DOMではなく「1行を占有させる」指定で外す。 grid と flex のどちらでも効くように両方書いておく。 #blog_list の中では下余白を0にする。行間は grid の gap が持っているため、 28px の margin を残すと戻るリンクと1件目の間が倍近く開いてしまう。 */ #blog_list > .tsym-arch, #news_list > .tsym-arch { grid-column: 1 / -1; flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; } /* v2.1.0: カードの下に出す本文。上の本文と同じ .tsym-arch なので 1行を占有する指定はそのまま効く。カードとの間だけ少し広く取る。 */ .tsym-arch--bottom { margin: 28px 0 0; } #blog_list > .tsym-arch--bottom, #news_list > .tsym-arch--bottom { margin: 12px 0 0; } .tsym-arch__body--bottom { margin: 0; } /* v2.2.0: 過去／今後の切り替え。 見た目は「戻る」導線（.tsym-single__back a）と同じ札にそろえる。 一覧の末尾に置くので中央寄せ。 */ .tsym-arch__cta { margin: 22px 0 0; text-align: center; } .tsym-arch__cta a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border: 1px solid #eec3ce; border-radius: 999px; background: #fef6f5; color: var(--tsym-rose); font-size: 13px; text-decoration: none; line-height: 1; } .tsym-arch__cta a:hover { background: #fffaf9; } .tsym-arch__cta-mark { font-size: 10px; } /* 過去を見ているときの見出し */ .tsym-arch__past-label { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--tsym-rose); } .tsym-single__back a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1px solid #eec3ce; border-radius: 999px; background: #fef6f5; color: var(--tsym-rose); text-decoration: none; line-height: 1; } .tsym-single__back a:hover { background: #fffaf9; } .tsym-single__back-mark { font-size: 10px; } /* 画像スライド */ .tsym-single__images { margin: 0 0 22px; text-align: center; } .tsym-single__image-btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .tsym-single__image-btn[hidden] { display: none; } .tsym-single__image-btn img { max-width: 100%; height: auto; /* 縦長でも全体が見える。切り取らない */ border-radius: 6px; } .tsym-single__slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; } .tsym-single__slider-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #eec3ce; background: #fef6f5; color: var(--tsym-rose); cursor: pointer; font-size: 12px; line-height: 1; } .tsym-single__slider-btn:hover { background: #fffaf9; } .tsym-single__slider-dots { display: flex; gap: 7px; } .tsym-single__slider-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid #e0aebd; background: transparent; cursor: pointer; } .tsym-single__slider-dot[aria-current="true"] { background: var(--tsym-rose); border-color: var(--tsym-rose); } .tsym-single__images figcaption { margin-top: 10px; font-size: 12px; color: #9c7f86; } /* 見出しと情報 */ .tsym-single__type { margin: 0 0 8px; } .tsym-single__past { margin-left: 8px; padding: 2px 8px; border-radius: 3px; background: #efe6e0; color: #8d7a72; font-size: 11px; } .tsym-single__name { margin: 0 0 16px; font-size: 22px; line-height: 1.5; color: var(--tsym-rose); } .tsym-single__info { margin: 0 0 22px; padding: 16px 18px; border: 1px solid #f0d7dd; border-radius: 8px; background: #fffaf9; font-size: 14px; line-height: 1.7; } .tsym-single__info dt { font-weight: 600; color: #9c7f86; font-size: 12px; } .tsym-single__info dd { margin: 2px 0 12px; } .tsym-single__info dd:last-child { margin-bottom: 0; } .tsym-single__time { margin-left: 8px; color: #9c7f86; } .tsym-single__info .tsym-upcoming__talents { margin: 0; } .tsym-single__info .tsym-upcoming__talent { font-size: 13px; color: #5d4249; } .tsym-single__body { margin: 0 0 22px; line-height: 1.9; } .tsym-single__actions { margin: 0; text-align: center; } .tsym-single__actions .tsym-upcoming__btn { display: inline-flex; min-width: 200px; } /* ライトボックスの送り */ .tsym-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.94); color: #6b4a55; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.3); -webkit-tap-highlight-color: transparent; } .tsym-lb__nav[hidden] { display: none; } .tsym-lb__nav svg { width: 22px; height: 22px; } .tsym-lb__nav--prev { left: 12px; } .tsym-lb__nav--next { right: 12px; } .tsym-lb__count { position: fixed; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; color: #fff; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .tsym-lb__count[hidden] { display: none; } @media (max-width: 640px) { .tsym-single__name { font-size: 18px; } .tsym-lb__nav { width: 44px; height: 44px; } .tsym-lb__nav--prev { left: 6px; } .tsym-lb__nav--next { right: 6px; } } /* ============ 外部リンクのボタン ============ 別のサイトへ出ることが押す前に分かるようにする。 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--ext { gap: 5px; } .tsym-upcoming__ext-icon { width: 11px; height: 11px; flex: none; opacity: .8; } /* 読み上げ用。画面には出さないが、リンクの行き先は伝える */ .tsym-upcoming .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ ボタンの色（利用者指定） ------------------------------------------------------------ 詳細を見る 文字 #B43159 / 枠 #F3C5D0 / 背景 #FDE7EA カレンダー 文字 #DF9299 / 枠 #EEB8C4 / 背景 #FDEBED ここは推測で変えないこと。変更するときは指定値を確認してから。 ============================================================ */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--detail { color: #B43159; border: 1px solid #F3C5D0; background: #FDE7EA; box-shadow: none; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--detail:hover { background: #FEF2F4; box-shadow: 0 2px 6px rgba(180, 49, 89, 0.14); } /* 準備中の札（v1.9.0） 色は「詳細を見る」と同じ（利用者指定）。--detail を併用しているので ここでは色を書かない。足すのは「押せない」ことと2段組みだけ。 COMING / SOON の2段にするのは、1段だと文字を小さくするしかなく 読みにくくなるため（利用者の判断）。 */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--soon { cursor: default; letter-spacing: 0.08em; line-height: 1.15; /* 2段になるぶん、1段のボタンより縦が伸びる。 行の高さは背景画像で決まっているので、伸びすぎないよう詰める。 */ padding-top: 3px; padding-bottom: 3px; flex-direction: column; } /* 1語ずつを行にする。
ではなく要素にしておくと、 語が3つ以上あっても崩れない。 */ .tsym-upcoming__soon-line { display: block; } /* リンクではないので、浮き上がりも影も出さない */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--soon:hover { transform: none; background: #FDE7EA; box-shadow: none; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--cal { color: #DF9299; border: 1px solid #EEB8C4; background: #FDEBED; box-shadow: none; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn--cal:hover { background: #FEF5F6; box-shadow: 0 2px 6px rgba(223, 146, 153, 0.16); } /* MOREボタンを出さないとき、左右のイラストだけを程よい間隔で残す */ .tsym-upcoming__foot--no-more { gap: clamp(24px, 8vw, 90px); } /* ============================================================ 透明シンフォニア UPCOMING EVENT SP可読性調整 ------------------------------------------------------------ スマートフォンでは wrapper 全体を transform: scale() で縮めない。 縮めると文字とボタンまで小さくなって読めなくなるうえ、 読み込み後に一度大きく描画されてから縮むため表示が一瞬揺れる。 代わりに、背景画像を width:100% で伸縮させ、 カード内の位置は割合（%）で決める。文字は実寸のCSSで置く。 これで倍率変換もJSでの寸法計算も不要になる。 ============================================================ */ @media (max-width: 699px) { .tsym-upcoming { padding: 40px 0 44px; } /* 画面左右に残す余白は片側10px。端へ密着させない。 */ .tsym-upcoming__stage { width: auto; max-width: none; margin: 0 10px; left: 0; padding: 0; overflow: visible; transform: none; } /* 倍率変換をやめ、画像を幅いっぱいに伸ばす */ .tsym-upcoming__rows { width: 100%; transform: none; background-size: 100% 100%; background-position: center; } .tsym-upcoming__rows[data-count="1"] { aspect-ratio: 674 / 159; height: auto; background-size: 100% 100%; } .tsym-upcoming__rows[data-count="1"] .tsym-upcoming__row:nth-child(1) { top: 22.6415%; height: 70.4403%; } .tsym-upcoming__rows[data-count="2"] { aspect-ratio: 674 / 287; height: auto; background-size: 100% 100%; } .tsym-upcoming__rows[data-count="2"] .tsym-upcoming__row:nth-child(1) { top: 12.5436%; height: 39.0244%; } .tsym-upcoming__rows[data-count="2"] .tsym-upcoming__row:nth-child(2) { top: 57.1429%; height: 39.0244%; } .tsym-upcoming__rows[data-count="3"] { aspect-ratio: 674 / 417; height: auto; background-size: 100% 100%; } .tsym-upcoming__rows[data-count="3"] .tsym-upcoming__row:nth-child(1) { top: 8.6331%; height: 26.8585%; } .tsym-upcoming__rows[data-count="3"] .tsym-upcoming__row:nth-child(2) { top: 39.3285%; height: 26.8585%; } .tsym-upcoming__rows[data-count="3"] .tsym-upcoming__row:nth-child(3) { top: 70.024%; height: 26.8585%; } .tsym-upcoming__rows[data-count="4"] { aspect-ratio: 674 / 543; height: auto; background-size: 100% 100%; } .tsym-upcoming__rows[data-count="4"] .tsym-upcoming__row:nth-child(1) { top: 6.6298%; height: 20.6262%; } .tsym-upcoming__rows[data-count="4"] .tsym-upcoming__row:nth-child(2) { top: 30.2026%; height: 20.6262%; } .tsym-upcoming__rows[data-count="4"] .tsym-upcoming__row:nth-child(3) { top: 53.7753%; height: 20.6262%; } .tsym-upcoming__rows[data-count="4"] .tsym-upcoming__row:nth-child(4) { top: 77.3481%; height: 20.6262%; } .tsym-upcoming__rows[data-count="5"] { aspect-ratio: 674 / 667; height: auto; background-size: 100% 100%; } .tsym-upcoming__rows[data-count="5"] .tsym-upcoming__row:nth-child(1) { top: 5.3973%; height: 16.7916%; } .tsym-upcoming__rows[data-count="5"] .tsym-upcoming__row:nth-child(2) { top: 24.5877%; height: 16.7916%; } .tsym-upcoming__rows[data-count="5"] .tsym-upcoming__row:nth-child(3) { top: 43.7781%; height: 16.7916%; } .tsym-upcoming__rows[data-count="5"] .tsym-upcoming__row:nth-child(4) { top: 62.9685%; height: 16.7916%; } .tsym-upcoming__rows[data-count="5"] .tsym-upcoming__row:nth-child(5) { top: 82.1589%; height: 16.7916%; } .tsym-upcoming__rows[data-count="6"] { aspect-ratio: 694 / 794; height: auto; background-size: 100% 100%; } .tsym-upcoming__rows[data-count="6"] .tsym-upcoming__row:nth-child(1) { top: 4.5340%; height: 14.1058%; } .tsym-upcoming__rows[data-count="6"] .tsym-upcoming__row:nth-child(2) { top: 20.6549%; height: 14.1058%; } .tsym-upcoming__rows[data-count="6"] .tsym-upcoming__row:nth-child(3) { top: 36.7758%; height: 14.1058%; } .tsym-upcoming__rows[data-count="6"] .tsym-upcoming__row:nth-child(4) { top: 52.8967%; height: 14.1058%; } .tsym-upcoming__rows[data-count="6"] .tsym-upcoming__row:nth-child(5) { top: 69.0176%; height: 14.1058%; } .tsym-upcoming__rows[data-count="6"] .tsym-upcoming__row:nth-child(6) { top: 85.1385%; height: 14.1058%; } /* カード内の位置は割合で決める（SS素材 674px 基準の実測値） */ .tsym-upcoming__date { left: 10.6825%; width: 18.2493%; padding-bottom: 6%; } /* 並びはPCと同じ3列のまま（会場 / イベント名 / ボタン）。 段組みは変えず、文字サイズと余白だけで収める。 */ .tsym-upcoming__body { left: 31.7507%; right: 4.451%; padding: 0; gap: 6px; grid-template-columns: 62px minmax(0, 1fr) 84px; grid-template-areas: none; align-items: center; } .tsym-upcoming__col--1 { grid-area: auto; padding-top: 10px; } .tsym-upcoming__col--2 { grid-area: auto; } .tsym-upcoming__acts { grid-area: auto; padding-left: 0; } /* 種別ラベルは会場名の上に重ねたまま（PCと同じ見え方を保つ） */ .tsym-upcoming__col--1 .tsym-upcoming__type { position: absolute; top: 1px; left: 0; margin: 0; } .tsym-upcoming__col { transform: none; overflow: visible; } /* 破線の区切りはSPでは出さない（幅が足りないため） */ .tsym-upcoming__acts::before { display: none; } /* 出演メンバーはSPでは出さない。空きは会場名とイベント名へ回す。 */ .tsym-upcoming__talents { display: none; } } /* 文字サイズ（テーマに勝てる強さで指定する） */ @media (max-width: 699px) { :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__head h2 { font-size: 24px; line-height: 1.18; letter-spacing: 0.10em; white-space: nowrap; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__head-sub { font-size: 12px; margin-top: 8px; letter-spacing: 0.18em; } .tsym-upcoming__head { padding-top: clamp(40px, 11vw, 52px); } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__year { font-size: 8.5px; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__md { font-size: 15.5px; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__wd { font-size: 7.5px; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__type { font-size: 8.5px; padding: 0 5px 1px; letter-spacing: 0.02em; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__area { font-size: 8.5px; margin-bottom: 1px; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__venue { font-size: 11.5px; line-height: 1.35; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__title { font-size: 11.5px; line-height: 1.35; } :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__time { font-size: 9px; margin-top: 1px; } /* ボタンは少し大きく、2つの間隔は1pxだけ広げる */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__btn { font-size: 10px; min-height: 26px; padding: 3px 8px; border-radius: 999px; } .tsym-upcoming__acts { gap: 5px; } .tsym-upcoming__ext-icon { width: 9px; height: 9px; } /* MOREは補助導線なので、カードより目立たせない */ :is(#main_col, #site_wrap, #container, #content, body) .tsym-upcoming .tsym-upcoming__more { min-width: 112px; height: 38px; font-size: 15px; letter-spacing: 0.18em; text-indent: 0.18em; padding: 0 12px; } .tsym-upcoming__foot { gap: 10px; margin-top: 26px; } .tsym-upcoming__foot-note { width: 78px; } .tsym-upcoming__emblem { width: 62px; right: 10px; bottom: 10px; } .tsym-upcoming__lace--left, .tsym-upcoming__lace--right { display: none; } } /* ============ 箇条書きの点を消す ============ カードは