/* * PHOTOGENIC 写真展ページ（出展者向け /service/exhibition/・主催者向け /service/exhibition-planning/） * - すべてのセレクタは #pgc-ex で始める（テーマ GENESIS の .post_content 系の指定より詳細度で勝つ。!important は使わない） * - #pgc-ex の外には指定しない。例外は1つ: #pgc-ex を直接含む本文枠の overflow 解除（画面幅の帯が切れないように） * - クラス名は pgc- 接頭辞。配色はサイトの基調（黒・白・#ff4000）に合わせる（フォトコンLPの青とは分ける） */ .post_content:has(> #pgc-ex) { overflow: visible; } /* トップ（テーマのコンテンツビルダー）: [pgc_top] を入れたフリースペースは、ブロック自体の上下余白（PC 150px）を外す （中身の区画が自分で余白を持つため。外さないとスライダーの下・NEWS の上に大きな空白が残る）。 あわせて Instagram のブロックの上下を詰める（開催実績→Instagram→フッターの間が空きすぎないように）。いずれもトップだけ */ body.home .cb_free_space:has(#pgc-ex) { padding-top: 0; padding-bottom: 0; } /* トップのスライダー: キャッチコピー（MAKE THE WORLD 等）を消して文字の枠が空のときは、その枠（画面の高さの半分）を外し、 動画・画像のスライダーだけを見せる。コピーを入れ直せば元の表示に戻る */ body.home #header_slider_wrap:not(:has(#header_slider_content .catch, #header_slider_content .desc_area, #header_slider_content .desc)) { height: auto; } body.home #header_slider_wrap:not(:has(#header_slider_content .catch, #header_slider_content .desc_area, #header_slider_content .desc)) #header_slider_content { display: none; } body.home #header_slider_wrap:not(:has(#header_slider_content .catch, #header_slider_content .desc_area, #header_slider_content .desc)) #header_slider { height: min(calc((100vh - 80px) * .7), 720px); } @media (max-width: 767px) { body.home #header_slider_wrap:not(:has(#header_slider_content .catch, #header_slider_content .desc_area, #header_slider_content .desc)) #header_slider { height: min(calc((100svh - 60px) * .5), 460px); } } body.home .cb_free_space:has(#sb_instagram) { padding-top: 72px; padding-bottom: 72px; } @media (max-width: 767px) { body.home .cb_free_space:has(#sb_instagram) { padding-top: 32px; padding-bottom: 40px; } } /* 主催者向けページ（BtoB）: テーマのサービス投稿ヘッダーの写真を出さず、黒の無地＋低めの帯にする（H1 はそのまま）。 写真の上に白文字で重なるテーマのヘッダーメニューが読めるよう、背景は黒。このページだけ */ body:has(#pgc-ex.pgc-ex--organizer) #single_service_header { height: 380px; background: #1b1b1d; } body:has(#pgc-ex.pgc-ex--organizer) #single_service_header :is(.image, .overlay) { display: none; } body:has(#pgc-ex.pgc-ex--organizer) #single_service_header .category { height: 220px; } /* 帯の上（ヘッダーが透明な状態）でテーマが出すロゴ #header_logo2 は、PC では紺の文字で黒の上では読めない。 白い文字のスマホ用ロゴを PC でも出す（スクロールして白いヘッダーになると、テーマが通常のロゴ #header_logo に切り替える） */ body:has(#pgc-ex.pgc-ex--organizer) #header_logo2 img.pc { display: none; } body:has(#pgc-ex.pgc-ex--organizer) #header_logo2 img.mobile { display: block; } @media (max-width: 1000px) { body:has(#pgc-ex.pgc-ex--organizer) #single_service_header { height: 320px; } body:has(#pgc-ex.pgc-ex--organizer) #single_service_header .category { height: 180px; } } @media (max-width: 750px) { body:has(#pgc-ex.pgc-ex--organizer) #single_service_header { height: 250px; } body:has(#pgc-ex.pgc-ex--organizer) #single_service_header .category { height: 120px; } } /* ---------- トークン ---------- */ #pgc-ex { --ex-ink: #1b1b1d; --ex-text: #43454b; --ex-muted: #6b6d73; /* 白・紙色の上で 4.7:1 以上 */ --ex-line: #e4e1db; --ex-paper: #f6f4f0; --ex-white: #fff; --ex-accent: #ff4000; /* 飾り専用（文字には使わない。白の上で 3.5:1） */ --ex-accent-d: #c42f00; /* 文字・ボタン（白の上で 5.6:1） */ --ex-accent-l: #fff1ea; --ex-radius: 6px; --ex-wrap: 1120px; --ex-gutter: 24px; display: block; position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); color: var(--ex-text); font-size: 16px; line-height: 1.8; letter-spacing: .02em; text-align: left; overflow-wrap: anywhere; word-break: normal; line-break: strict; -webkit-text-size-adjust: 100%; } /* ---------- テーマの本文スタイルを #pgc-ex 配下だけで打ち消す ---------- */ #pgc-ex *, #pgc-ex *::before, #pgc-ex *::after { box-sizing: border-box; } #pgc-ex :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, figcaption, table, caption, thead, tbody, tr, th, td, details, summary, section, article, div) { margin: 0; padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; line-height: inherit; text-align: inherit; color: inherit; clear: none; float: none; box-shadow: none; } #pgc-ex :is(ul, ol) { list-style: none; margin-left: 0; } #pgc-ex :is(h1, h2, h3, h4) { color: var(--ex-ink); font-weight: 700; line-height: 1.5; letter-spacing: .04em; } /* 行の長さをそろえる（balance）・段落を整える（pretty）は、日本語を文節で折り返せるブラウザ（Chrome 等）だけで使う。 Safari（iPhone）は文節の折り返し（auto-phrase）に対応しておらず、balance だと「キャ／プション」のように語の途中で2行に分け、 pretty だと行を短く切って右に空きができるため。対応していないブラウザは通常の折り返し */ @supports (word-break: auto-phrase) { #pgc-ex :is(h1, h2, h3, h4) { word-break: auto-phrase; text-wrap: balance; } #pgc-ex :is(.pgc-lead, .pgc-ex-intro__lead) { word-break: auto-phrase; text-wrap: pretty; } } #pgc-ex .pgc-nw { display: inline-block; max-width: 100%; } #pgc-ex img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; box-shadow: none; } #pgc-ex a { color: var(--ex-accent-d); text-decoration: none; } #pgc-ex strong { font-weight: 700; color: var(--ex-ink); } #pgc-ex .pgc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } #pgc-ex .pgc-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } #pgc-ex .pgc-br-pc { display: inline; } #pgc-ex :is(a, summary):focus-visible { outline: 3px solid #ff9a6e; outline-offset: 3px; } /* ---------- レイアウト ---------- */ #pgc-ex .pgc-wrap { width: 100%; max-width: calc(var(--ex-wrap) + var(--ex-gutter) * 2); margin: 0 auto; padding: 0 var(--ex-gutter); } #pgc-ex .pgc-wrap--narrow { max-width: calc(840px + var(--ex-gutter) * 2); } #pgc-ex .pgc-section { padding: 96px 0; } #pgc-ex .pgc-band--paper { background: var(--ex-paper); } #pgc-ex .pgc-band--ink { background: var(--ex-ink); color: #d2d2d6; } /* 見出し */ #pgc-ex .pgc-head { max-width: 760px; margin: 0 auto 48px; text-align: center; } #pgc-ex .pgc-head__en { margin-bottom: 12px; color: var(--ex-ink); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } /* ブランドバー（フォトコンLPの .pgc-brandbar と同じ形。写真展系のページは赤系） 今後のページで色を変えるときは --bar-from / --bar-mid / --bar-to / --bar-dot だけを差し替える */ #pgc-ex .pgc-ex-brandbar { --bar-from: #1b1b1d; --bar-mid: #c42f00; --bar-to: #ff6a2b; --bar-dot: #ff6a2b; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 auto 16px; } #pgc-ex .pgc-ex-brandbar::before { content: ""; width: 72px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--bar-from) 0%, var(--bar-mid) 48%, var(--bar-to) 100%); } #pgc-ex .pgc-ex-brandbar i { display: block; border-radius: 2px; background: var(--bar-dot); } #pgc-ex .pgc-ex-brandbar i:nth-child(1) { width: 8px; height: 8px; margin-left: 3px; } #pgc-ex .pgc-ex-brandbar i:nth-child(2) { width: 6px; height: 6px; opacity: .7; } #pgc-ex .pgc-ex-brandbar i:nth-child(3) { width: 4px; height: 4px; opacity: .45; } #pgc-ex .pgc-band--ink .pgc-ex-brandbar { --bar-from: #fff; --bar-mid: #ffb08a; --bar-to: #ff4000; --bar-dot: #ff6a2b; } #pgc-ex .pgc-title { font-size: clamp(24px, 2vw + 12px, 34px); } #pgc-ex .pgc-lead { margin-top: 18px; font-size: 16px; line-height: 2; } #pgc-ex .pgc-text { font-size: 15px; line-height: 1.95; } #pgc-ex .pgc-note { margin-top: 12px; color: var(--ex-muted); font-size: 13px; line-height: 1.7; } #pgc-ex .pgc-note--center { margin-top: 32px; text-align: center; } #pgc-ex .pgc-head--invert .pgc-title { color: #fff; } #pgc-ex .pgc-head--invert .pgc-head__en { color: #fff; } #pgc-ex .pgc-head--invert .pgc-lead { color: #c9c9ce; } /* ボタン・リンク */ #pgc-ex .pgc-ex-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } #pgc-ex .pgc-ex-actions--center { justify-content: center; } #pgc-ex .pgc-ex-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 32px; border: 2px solid transparent; border-radius: 999px; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-align: center; transition: background-color .2s, color .2s, border-color .2s; } #pgc-ex .pgc-ex-btn .pgc-ico { width: 18px; height: 18px; } #pgc-ex .pgc-ex-btn--primary { background: var(--ex-accent-d); color: #fff; } #pgc-ex .pgc-ex-btn--primary:hover { background: #a32700; color: #fff; } #pgc-ex .pgc-ex-btn--ghost { border-color: var(--ex-ink); background: #fff; color: var(--ex-ink); } #pgc-ex .pgc-ex-btn--ghost:hover { background: var(--ex-ink); color: #fff; } #pgc-ex .pgc-ex-btn--lg { min-height: 64px; padding: 0 44px; font-size: 17px; } #pgc-ex .pgc-ex-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ex-accent-d); font-weight: 700; border-bottom: 1px solid currentColor; line-height: 1.6; } #pgc-ex .pgc-ex-link .pgc-ico { width: 16px; height: 16px; } #pgc-ex .pgc-ex-link--invert { color: #fff; } /* ---------- 写真（未決定のあいだは写真枠を出す） ---------- */ #pgc-ex .pgc-ex-img { position: relative; overflow: hidden; border-radius: var(--ex-radius); background: #e9e6e0; } #pgc-ex .pgc-ex-img img { width: 100%; height: 100%; object-fit: cover; } #pgc-ex .pgc-ex-img--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; border: 1px dashed #b9b3a8; background: repeating-linear-gradient(135deg, #efece6 0 12px, #e9e5de 12px 24px); color: #5d5a54; text-align: center; } #pgc-ex .pgc-ex-img__id { padding: 2px 10px; border-radius: 999px; background: var(--ex-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; } #pgc-ex .pgc-ex-img__role { font-size: 13px; font-weight: 700; line-height: 1.5; } #pgc-ex .pgc-ex-img__ratio { font-size: 11px; color: #77736b; } /* ---------- 0. 導入 ---------- */ #pgc-ex .pgc-ex-intro { padding: 0 0 64px; text-align: center; } /* 上はテーマのパンくず・本文枠の余白があるので詰める */ #pgc-ex .pgc-ex-eyebrow { display: inline-block; padding: 6px 16px; border: 1px solid var(--ex-ink); border-radius: 999px; color: var(--ex-ink); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; } #pgc-ex .pgc-ex-intro__title { margin-top: 18px; font-size: clamp(30px, 2.6vw + 16px, 48px); font-weight: 900; line-height: 1.4; letter-spacing: .06em; } #pgc-ex .pgc-ex-intro__lead { max-width: 900px; margin: 14px auto 0; font-size: 16px; line-height: 1.95; } #pgc-ex .pgc-ex-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; } #pgc-ex .pgc-ex-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--ex-paper); color: var(--ex-ink); font-size: 14px; font-weight: 700; line-height: 1.5; } #pgc-ex .pgc-ex-chips .pgc-ico { width: 18px; height: 18px; color: var(--ex-accent-d); stroke-width: 2.6; } #pgc-ex .pgc-ex-intro .pgc-ex-actions { justify-content: center; margin-top: 26px; } /* CTA の下の補足（チップにせず、1行の控えめな文字） */ #pgc-ex .pgc-ex-intro__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 14px; color: var(--ex-muted); font-size: 14px; font-weight: 700; line-height: 1.6; } #pgc-ex .pgc-ex-intro__notes span + span::before { content: "／"; margin: 0 10px; color: #c4c0b8; font-weight: 400; } /* 主催者向けページへの補助導線（ボタンほど強くせず、リンク文字だけより認識しやすく） */ #pgc-ex .pgc-ex-switch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; padding: 10px 20px; border: 1px solid var(--ex-line); border-radius: 999px; background: #fff; color: var(--ex-ink); font-size: 14px; font-weight: 700; line-height: 1.5; word-break: auto-phrase; transition: border-color .2s, background-color .2s; } #pgc-ex .pgc-ex-switch:hover { border-color: var(--ex-ink); background: var(--ex-paper); color: var(--ex-ink); } #pgc-ex .pgc-ex-switch .pgc-ico { width: 16px; height: 16px; color: var(--ex-accent-d); } /* ---------- 1. 募集中の写真展 ---------- */ #pgc-ex .pgc-ex-calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; max-width: 1120px; margin: 0 auto; } #pgc-ex .pgc-ex-calls--1 { max-width: 980px; grid-template-columns: minmax(0, 1fr); } /* 1件だけのときは横幅と写真を広げる */ #pgc-ex .pgc-ex-call__link { display: grid; height: 100%; overflow: hidden; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; color: var(--ex-text); transition: border-color .2s, transform .2s, box-shadow .2s; } #pgc-ex .pgc-ex-call__link:hover { border-color: var(--ex-ink); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27, 27, 29, .10); color: var(--ex-text); } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__link { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__body { padding: 30px 32px 30px; } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__name { font-size: 26px; } #pgc-ex .pgc-ex-call__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e9e6e0; } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__media { aspect-ratio: auto; min-height: 100%; } #pgc-ex .pgc-ex-call__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #pgc-ex .pgc-ex-call__badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 12px; border-radius: 999px; background: var(--ex-accent-d); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; } #pgc-ex .pgc-ex-call__body { display: flex; flex-direction: column; padding: 24px 26px 26px; } #pgc-ex .pgc-ex-call__name { font-size: 22px; } #pgc-ex .pgc-ex-call__venue { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--ex-muted); font-size: 14px; line-height: 1.6; } #pgc-ex .pgc-ex-call__venue .pgc-ico { margin-top: .25em; } #pgc-ex .pgc-ex-call__badge--soon { background: var(--ex-ink); } #pgc-ex .pgc-ex-call__media--none { background: var(--ex-ink); } #pgc-ex .pgc-ex-call__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } #pgc-ex .pgc-ex-call__tags li { padding: 2px 10px; border: 1px solid var(--ex-line); border-radius: 999px; color: var(--ex-ink); font-size: 12px; font-weight: 700; line-height: 1.7; } #pgc-ex .pgc-ex-call__deadline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; padding: 10px 14px; border-radius: 6px; background: var(--ex-accent-l); color: var(--ex-ink); font-size: 16px; font-weight: 700; line-height: 1.5; } #pgc-ex .pgc-ex-call__deadline span { color: var(--ex-accent-d); font-size: 13px; } #pgc-ex .pgc-ex-call__deadline em { padding: 1px 8px; border-radius: 4px; background: var(--ex-accent-d); color: #fff; font-size: 12px; font-style: normal; } #pgc-ex .pgc-ex-call__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin-top: 16px; font-size: 14px; line-height: 1.6; } #pgc-ex .pgc-ex-call__meta dt { color: var(--ex-muted); font-weight: 700; white-space: nowrap; } #pgc-ex .pgc-ex-call__meta dd { color: var(--ex-ink); } #pgc-ex .pgc-ex-call__fee { font-size: 16px; font-weight: 700; } #pgc-ex .pgc-ex-call__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; color: var(--ex-accent-d); font-size: 15px; font-weight: 700; } #pgc-ex .pgc-ex-call__go .pgc-ico { width: 18px; height: 18px; transition: transform .2s; } #pgc-ex .pgc-ex-call__link:hover .pgc-ex-call__go .pgc-ico { transform: translateX(3px); } #pgc-ex .pgc-ex-calls-empty { max-width: 640px; margin: 0 auto; padding: 36px 28px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff; text-align: center; } #pgc-ex .pgc-ex-calls-empty p + p { margin-top: 8px; color: var(--ex-muted); font-size: 14px; } /* ---------- 2. 出展の特徴 ---------- */ #pgc-ex .pgc-ex-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } #pgc-ex .pgc-ex-feature { display: flex; flex-direction: column; } #pgc-ex .pgc-ex-feature > .pgc-ex-img, #pgc-ex .pgc-ex-caption-sample, #pgc-ex .pgc-ex-venues { margin-bottom: 20px; } #pgc-ex .pgc-ex-feature > .pgc-ex-img { aspect-ratio: 4 / 3; } #pgc-ex .pgc-ex-feature__no { color: var(--ex-accent-d); font-size: 14px; font-weight: 700; letter-spacing: .1em; } #pgc-ex .pgc-ex-feature__title { margin: 6px 0 10px; font-size: 18px; } #pgc-ex .pgc-ex-feature--venues .pgc-ex-venues { order: -1; } #pgc-ex .pgc-ex-venues { display: grid; align-content: center; gap: 10px; aspect-ratio: 4 / 3; padding: 20px; border-radius: var(--ex-radius); background: var(--ex-ink); } #pgc-ex .pgc-ex-venues li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; } #pgc-ex .pgc-ex-venues .pgc-ico { width: 18px; height: 18px; color: var(--ex-accent); } #pgc-ex .pgc-ex-feature--name .pgc-ex-caption-sample { order: -1; } /* 特徴③（在廊不要）: 写真ではなく図。誰が何をするかを3行で */ #pgc-ex .pgc-ex-attend { order: -1; display: grid; align-content: center; gap: 10px; aspect-ratio: 4 / 3; margin-bottom: 20px; padding: 20px 22px; border-radius: var(--ex-radius); background: var(--ex-paper); } #pgc-ex .pgc-ex-attend > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 6px; background: #fff; } #pgc-ex .pgc-ex-attend dt { color: var(--ex-muted); font-size: 13px; font-weight: 700; } #pgc-ex .pgc-ex-attend dd { color: var(--ex-ink); font-size: 14px; font-weight: 700; } #pgc-ex .pgc-ex-attend > div:nth-child(3) dd { color: var(--ex-accent-d); } /* キャプションの見本（写真ではなく図。実在の出展者名を出さない） */ #pgc-ex .pgc-ex-caption-sample { display: flex; flex-direction: column; justify-content: center; aspect-ratio: 4 / 3; padding: 22px 24px; border-radius: var(--ex-radius); background: var(--ex-paper); } #pgc-ex .pgc-ex-caption-sample > * { max-width: 220px; } #pgc-ex .pgc-ex-caption-sample__title { color: var(--ex-ink); font-size: 16px; font-weight: 700; line-height: 1.5; } #pgc-ex .pgc-ex-caption-sample__name { display: inline-flex; align-self: flex-start; margin-top: 4px; padding: 0 4px; background: linear-gradient(transparent 60%, rgba(255, 64, 0, .25) 60%); color: var(--ex-ink); font-size: 14px; font-weight: 700; } #pgc-ex .pgc-ex-caption-sample__text { margin-top: 10px; color: var(--ex-text); font-size: 12px; line-height: 1.8; } /* ---------- 3. 出展の流れ ---------- */ #pgc-ex .pgc-ex-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; counter-reset: none; } #pgc-ex .pgc-ex-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 10px; text-align: center; } #pgc-ex .pgc-ex-flow__step::after { content: ""; position: absolute; left: calc(50% + 32px); right: calc(-50% + 32px); top: 58px; height: 2px; background: #cfcac1; } #pgc-ex .pgc-ex-flow__step:last-child::after { content: none; } #pgc-ex .pgc-ex-flow__who { margin-bottom: 10px; padding: 2px 10px; border-radius: 4px; background: #e9e6e0; color: var(--ex-muted); font-size: 12px; font-weight: 700; line-height: 1.6; } #pgc-ex .pgc-ex-flow__step--you .pgc-ex-flow__who { background: var(--ex-accent-l); color: var(--ex-accent-d); } #pgc-ex .pgc-ex-flow__no { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--ex-ink); border-radius: 50%; background: #fff; color: var(--ex-ink); font-size: 18px; font-weight: 700; } #pgc-ex .pgc-ex-flow__step--you .pgc-ex-flow__no { border-color: var(--ex-accent-d); background: var(--ex-accent-d); color: #fff; } #pgc-ex .pgc-ex-flow__title { margin-top: 14px; font-size: 16px; } #pgc-ex .pgc-ex-flow__text { margin-top: 6px; color: var(--ex-text); font-size: 13px; line-height: 1.7; word-break: auto-phrase; } #pgc-ex .pgc-ex-timeline { margin-top: 48px; padding: 28px 32px; border-radius: 10px; background: #fff; } #pgc-ex .pgc-ex-timeline__label { color: var(--ex-ink); font-size: 15px; font-weight: 700; } #pgc-ex .pgc-ex-timeline__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: 16px; } #pgc-ex .pgc-ex-timeline__list > div { padding-left: 16px; border-left: 3px solid var(--ex-accent); } #pgc-ex .pgc-ex-timeline__list dt { color: var(--ex-muted); font-size: 13px; font-weight: 700; } #pgc-ex .pgc-ex-timeline__list dd { margin-top: 4px; color: var(--ex-ink); font-size: 15px; line-height: 1.7; } #pgc-ex .pgc-ex-timeline__list dd span { display: block; margin-top: 4px; color: var(--ex-muted); font-size: 12px; } /* ---------- 4. 出展料に含まれるもの ---------- */ #pgc-ex .pgc-ex-included { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; } #pgc-ex .pgc-ex-included li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px 20px; border: 1px solid var(--ex-line); border-radius: 10px; color: var(--ex-ink); font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; } #pgc-ex .pgc-ex-included .pgc-ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ex-accent-l); color: var(--ex-accent-d); } #pgc-ex .pgc-ex-fee-note { margin-top: 24px; color: var(--ex-muted); font-size: 14px; text-align: center; } /* ---------- 5. 展示の品質 ---------- */ #pgc-ex .pgc-ex-quality { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; } #pgc-ex .pgc-ex-quality__photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } #pgc-ex .pgc-ex-quality__photos figcaption { margin-top: 8px; color: #a9a9ae; font-size: 12px; line-height: 1.6; } #pgc-ex .pgc-band--ink .pgc-ex-img--ph { border-color: #55555b; background: repeating-linear-gradient(135deg, #2a2a2e 0 12px, #26262a 12px 24px); color: #d2d2d6; } #pgc-ex .pgc-band--ink .pgc-ex-img__id { background: #fff; color: var(--ex-ink); } #pgc-ex .pgc-band--ink .pgc-ex-img__ratio { color: #9a9aa0; } #pgc-ex .pgc-ex-spec { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; } #pgc-ex .pgc-ex-spec caption { padding-bottom: 12px; color: #fff; font-size: 15px; font-weight: 700; text-align: left; } #pgc-ex .pgc-ex-spec th, #pgc-ex .pgc-ex-spec td { padding: 14px 0; border-top: 1px solid #3a3a40; vertical-align: top; text-align: left; } #pgc-ex .pgc-ex-spec tr:last-child :is(th, td) { border-bottom: 1px solid #3a3a40; } #pgc-ex .pgc-ex-spec th { width: 8.5em; padding-right: 16px; color: #a9a9ae; font-weight: 700; } #pgc-ex .pgc-ex-spec td { color: #fff; } #pgc-ex .pgc-ex-spec__sub { display: block; margin-top: 4px; color: #a9a9ae; font-size: 12px; } #pgc-ex .pgc-ex-spec__note { margin: 14px 0 24px; color: #a9a9ae; font-size: 12px; } /* ---------- 6. 過去の写真展 ---------- */ #pgc-ex .pgc-ex-past { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } #pgc-ex .pgc-ex-past__link { display: flex; flex-direction: column; height: 100%; color: var(--ex-text); } #pgc-ex .pgc-ex-past__link:hover { color: var(--ex-text); } #pgc-ex .pgc-ex-past__link > .pgc-ex-img { aspect-ratio: 3 / 2; } #pgc-ex .pgc-ex-past__link:hover .pgc-ex-past__name { color: var(--ex-accent-d); } #pgc-ex .pgc-ex-past__body { padding-top: 16px; } #pgc-ex .pgc-ex-past__venue { color: var(--ex-muted); font-size: 13px; font-weight: 700; } #pgc-ex .pgc-ex-past__name { margin-top: 2px; font-size: 19px; transition: color .2s; } #pgc-ex .pgc-ex-past__date { margin-top: 2px; color: var(--ex-muted); font-size: 13px; } /* 実績の数字: 大きな数字＋小さなラベル（確定値のみ） */ #pgc-ex .pgc-ex-past__stats { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ex-ink); } #pgc-ex .pgc-ex-past__stats span { display: flex; flex-direction: column-reverse; gap: 2px; color: var(--ex-muted); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; } #pgc-ex .pgc-ex-past__stats strong { color: var(--ex-accent-d); font-size: 30px; font-weight: 900; line-height: 1.15; letter-spacing: .01em; } /* ---------- 7. FAQ ---------- */ #pgc-ex .pgc-ex-faq { display: grid; gap: 12px; } #pgc-ex .pgc-ex-faq__item { border-radius: 10px; background: #fff; } #pgc-ex .pgc-ex-faq__q { position: relative; display: block; padding: 20px 56px 20px 56px; color: var(--ex-ink); font-size: 16px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; } #pgc-ex .pgc-ex-faq__q::-webkit-details-marker { display: none; } #pgc-ex .pgc-ex-faq__q::before { content: "Q"; position: absolute; left: 22px; top: 19px; color: var(--ex-accent-d); font-size: 18px; font-weight: 700; } #pgc-ex .pgc-ex-faq__q::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ex-ink); border-bottom: 2px solid var(--ex-ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; } #pgc-ex .pgc-ex-faq__item[open] .pgc-ex-faq__q::after { transform: translateY(-30%) rotate(-135deg); } #pgc-ex .pgc-ex-faq__a { padding: 0 28px 22px 56px; font-size: 15px; line-height: 1.95; } /* ---------- 8. 最後の誘導・主催者向けへの導線 ---------- */ #pgc-ex .pgc-ex-final { padding: 96px 0 72px; text-align: center; } #pgc-ex .pgc-ex-final__title { font-size: clamp(26px, 2vw + 14px, 38px); font-weight: 900; letter-spacing: .06em; } #pgc-ex .pgc-ex-final__sub { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--ex-text); font-size: 14px; } #pgc-ex .pgc-ex-final__sub .pgc-ico { width: 18px; height: 18px; } #pgc-ex .pgc-ex-final__sub a { text-decoration: underline; text-underline-offset: 3px; } #pgc-ex .pgc-ex-cross { padding: 0 0 96px; } #pgc-ex .pgc-ex-cross__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; max-width: 860px; margin: 0 auto; padding: 28px 32px; border: 1px solid var(--ex-line); border-radius: 12px; background: var(--ex-paper); color: var(--ex-text); transition: border-color .2s; } #pgc-ex .pgc-ex-cross__link:hover { border-color: var(--ex-ink); color: var(--ex-text); } #pgc-ex .pgc-ex-cross__label { grid-column: 1; color: var(--ex-muted); font-size: 13px; font-weight: 700; } #pgc-ex .pgc-ex-cross__text { grid-column: 1; color: var(--ex-ink); font-size: 19px; font-weight: 700; line-height: 1.5; } #pgc-ex .pgc-ex-cross__desc { grid-column: 1; font-size: 14px; } #pgc-ex .pgc-ex-cross__link > .pgc-ico { grid-column: 2; grid-row: 1 / span 3; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--ex-ink); color: #fff; } /* ================= 主催者向け（.pgc-ex--organizer） ================= */ /* 導入の数字 */ /* 導入の信頼材料（3つとも「アイコン＋短い名詞句＋補足」で揃える） */ #pgc-ex .pgc-ex-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 860px; margin: 32px auto 0; padding: 20px 0; border-top: 1px solid var(--ex-line); border-bottom: 1px solid var(--ex-line); } #pgc-ex .pgc-ex-facts li { display: grid; justify-items: center; gap: 4px; padding: 0 16px; text-align: center; } #pgc-ex .pgc-ex-facts li + li { border-left: 1px solid var(--ex-line); } #pgc-ex .pgc-ex-facts .pgc-ico { width: 28px; height: 28px; margin-bottom: 4px; color: var(--ex-accent-d); } #pgc-ex .pgc-ex-facts strong { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; word-break: auto-phrase; } #pgc-ex .pgc-ex-facts span { color: var(--ex-muted); font-size: 13px; line-height: 1.6; } #pgc-ex .pgc-ex--organizer .pgc-ex-intro .pgc-ex-chips { margin-top: 20px; } #pgc-ex .pgc-ex--organizer .pgc-ex-intro .pgc-ex-chips li { background: var(--ex-accent-l); } /* 1. 用途 */ #pgc-ex .pgc-ex-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #pgc-ex .pgc-ex-uses li { padding: 24px 22px; border-radius: 10px; background: #fff; } #pgc-ex .pgc-ex-uses .pgc-ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ex-accent-l); color: var(--ex-accent-d); } #pgc-ex .pgc-ex-uses h3 { margin-top: 14px; font-size: 16px; } #pgc-ex .pgc-ex-uses p { margin-top: 6px; font-size: 13px; line-height: 1.8; } /* 2. 工程（4つの段階） */ #pgc-ex .pgc-ex-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: pgc-ex-step; } #pgc-ex .pgc-ex-phase { position: relative; padding: 0 20px 0 0; } #pgc-ex .pgc-ex-phase__name { position: relative; padding: 10px 16px; background: var(--ex-ink); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .08em; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 10px 50%); padding-left: 24px; } #pgc-ex .pgc-ex-phase:first-child .pgc-ex-phase__name { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 16px; } #pgc-ex .pgc-ex-phase ul { display: grid; gap: 8px; margin-top: 14px; } #pgc-ex .pgc-ex-phase ul li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ex-line); border-radius: 8px; color: var(--ex-ink); font-size: 15px; font-weight: 700; line-height: 1.5; counter-increment: pgc-ex-step; } #pgc-ex .pgc-ex-phase ul li::before { content: counter(pgc-ex-step, decimal-leading-zero); color: var(--ex-accent-d); font-size: 12px; letter-spacing: .04em; } #pgc-ex .pgc-ex-scope-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto 40px; } #pgc-ex .pgc-ex-scope-notes li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 10px; background: var(--ex-accent-l); color: var(--ex-ink); font-size: 15px; line-height: 1.7; } #pgc-ex .pgc-ex-scope-notes .pgc-ico { width: 26px; height: 26px; margin-top: 1px; padding: 5px; border-radius: 50%; background: var(--ex-accent-d); color: #fff; stroke-width: 3; } #pgc-ex .pgc-ex-scope-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; } /* 3. 実績（全景1枚＋文字のカード。きれいな展示写真を並べるだけにしない） */ #pgc-ex .pgc-ex-record { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: stretch; } #pgc-ex .pgc-ex-record__media > .pgc-ex-img { height: 100%; } #pgc-ex .pgc-ex-record__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #pgc-ex .pgc-ex-record__list a { display: block; height: 100%; padding: 18px 18px 16px; border: 1px solid transparent; border-radius: 10px; background: #fff; color: var(--ex-text); transition: border-color .2s; } #pgc-ex .pgc-ex-record__list a:hover { border-color: var(--ex-ink); color: var(--ex-text); } #pgc-ex .pgc-ex-record__list a:hover .pgc-ex-past__name { color: var(--ex-accent-d); } #pgc-ex .pgc-ex-scope-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-left: auto; margin-right: auto; } #pgc-ex .pgc-ex-scope-photos figcaption { margin-top: 8px; color: var(--ex-muted); font-size: 13px; font-weight: 700; } /* 4. メリット（黒背景） */ #pgc-ex .pgc-ex-why { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; } #pgc-ex .pgc-ex-why--full { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-why--full .pgc-ex-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } #pgc-ex .pgc-ex-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } #pgc-ex .pgc-ex-why__list li { padding-top: 16px; border-top: 2px solid var(--ex-accent); } #pgc-ex .pgc-ex-why__list h3 { color: #fff; font-size: 17px; } #pgc-ex .pgc-ex-why__list p { margin-top: 8px; color: #c9c9ce; font-size: 14px; line-height: 1.85; } /* 5. フォトコンテストから展示まで */ #pgc-ex .pgc-ex-bridge { display: grid; grid-template-columns: 5fr 3fr; gap: 12px; } #pgc-ex .pgc-ex-bridge__group { padding: 18px 18px 20px; border-radius: 10px; } #pgc-ex .pgc-ex-bridge__group--contest { background: #eef2f8; } #pgc-ex .pgc-ex-bridge__group--exhibit { background: var(--ex-accent-l); } #pgc-ex .pgc-ex-bridge__label { margin-bottom: 14px; color: var(--ex-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; } #pgc-ex .pgc-ex-bridge ol { display: flex; gap: 0; } #pgc-ex .pgc-ex-bridge ol li { position: relative; flex: 1; min-width: 0; padding: 12px 6px; border-radius: 6px; background: #fff; color: var(--ex-ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; word-break: auto-phrase; } #pgc-ex .pgc-ex-bridge ol li + li { margin-left: 18px; } #pgc-ex .pgc-ex-bridge ol li + li::before { content: ""; position: absolute; left: -13px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #8a8780; border-right: 2px solid #8a8780; transform: translateY(-50%) rotate(45deg); } #pgc-ex .pgc-ex-bridge__group--exhibit ol li:first-child::after { content: none; } #pgc-ex .pgc-ex-bridge__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 40px; } #pgc-ex .pgc-ex-bridge__text .pgc-ex-link { margin-top: 20px; } /* PISEL のロゴ（フォトコンテスト運営サービスへのリンク） */ #pgc-ex .pgc-ex-pisel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 3 / 2; padding: 32px; border: 1px solid var(--ex-line); border-radius: 12px; background: #fff; color: #5b6478; transition: border-color .2s, box-shadow .2s; } #pgc-ex .pgc-ex-pisel:hover { border-color: #2563ff; box-shadow: 0 12px 28px rgba(11, 31, 68, .10); color: #5b6478; } #pgc-ex .pgc-ex-pisel img { width: min(78%, 340px); height: auto; } #pgc-ex .pgc-ex-pisel span { font-size: 14px; font-weight: 700; letter-spacing: .1em; } /* 6. 料金 */ #pgc-ex .pgc-ex-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } #pgc-ex .pgc-ex-price > div { padding: 28px 30px; border-radius: 10px; background: #fff; } #pgc-ex .pgc-ex-price__h { margin-bottom: 18px; font-size: 18px; } #pgc-ex .pgc-ex-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; } #pgc-ex .pgc-ex-checks li { position: relative; padding-left: 26px; color: var(--ex-ink); font-size: 15px; line-height: 1.6; } #pgc-ex .pgc-ex-checks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 16px; height: 16px; border-radius: 4px; background: var(--ex-accent-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c42f00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; } #pgc-ex .pgc-ex-ranges { display: grid; gap: 10px; } #pgc-ex .pgc-ex-ranges li { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--ex-line); border-radius: 8px; font-size: 14px; line-height: 1.7; } #pgc-ex .pgc-ex-ranges li.is-full { border-color: var(--ex-ink); } #pgc-ex .pgc-ex-ranges a { display: inline-block; margin-left: 4px; text-decoration: underline; text-underline-offset: 3px; } #pgc-ex .pgc-ex-ranges__k { color: var(--ex-ink); font-size: 15px; font-weight: 700; } #pgc-ex .pgc-ex-price + .pgc-ex-actions { margin-top: 40px; } /* 7. 開催までの流れ */ #pgc-ex .pgc-ex-steps { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; } #pgc-ex .pgc-ex-steps li { position: relative; display: grid; gap: 6px; justify-items: center; padding: 18px 4px 16px; border-top: 3px solid var(--ex-ink); background: var(--ex-paper); color: var(--ex-ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center; word-break: auto-phrase; } #pgc-ex .pgc-ex-steps li:nth-child(n+5):nth-child(-n+9) { border-top-color: var(--ex-accent); } #pgc-ex .pgc-ex-steps span { color: var(--ex-muted); font-size: 12px; letter-spacing: .06em; } #pgc-ex .pgc-ex-lead-time { margin-top: 28px; color: var(--ex-text); font-size: 16px; text-align: center; } #pgc-ex .pgc-ex-lead-time strong { background: linear-gradient(transparent 62%, rgba(255, 64, 0, .22) 62%); } /* 9. 最後の誘導 */ #pgc-ex .pgc-ex-final__lead { max-width: 640px; margin: 16px auto 0; font-size: 15px; } #pgc-ex .pgc-ex-final__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 28px; font-size: 15px; } /* ================= トップページ（.pgc-ex--top） ================= */ /* 背景の並び: スライダー(白) → 入口(生成り) → 募集中(白) → テーマの NEWS(灰) …と交互にする */ #pgc-ex .pgc-ex-top-intro { padding: 88px 0 80px; background: var(--ex-paper); } #pgc-ex .pgc-ex-top-call { padding: 88px 0 104px; background: #fff; } #pgc-ex .pgc-ex-top-intro .pgc-ex-intro__title { font-size: clamp(28px, 2.2vw + 14px, 42px); } #pgc-ex .pgc-ex-top-bar { margin: 48px auto 28px; } /* 事業の入口（主要3サービス。プリント・パネルは下の文字リンクだけ） */ #pgc-ex .pgc-ex-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: left; } #pgc-ex .pgc-ex-entry__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--ex-line); border-radius: 12px; background: #fff; color: var(--ex-text); transition: border-color .2s, transform .2s, box-shadow .2s; } #pgc-ex .pgc-ex-entry__link:hover { border-color: var(--ex-ink); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27, 27, 29, .10); color: var(--ex-text); } #pgc-ex .pgc-ex-entry__link > .pgc-ex-img { border-radius: 0; aspect-ratio: 4 / 3; } #pgc-ex .pgc-ex-entry__pisel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 4 / 3; padding: 24px; background: #f4f7fb; color: #5b6478; } #pgc-ex .pgc-ex-entry__pisel img { width: min(72%, 260px); height: auto; } #pgc-ex .pgc-ex-entry__pisel span { font-size: 13px; font-weight: 700; letter-spacing: .1em; } #pgc-ex .pgc-ex-entry__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } #pgc-ex .pgc-ex-entry__who { align-self: flex-start; padding: 2px 10px; border-radius: 4px; background: var(--ex-paper); color: var(--ex-muted); font-size: 12px; font-weight: 700; line-height: 1.7; } #pgc-ex .pgc-ex-entry__title { margin-top: 10px; font-size: 22px; } #pgc-ex .pgc-ex-entry__text { margin-top: 8px; font-size: 14px; line-height: 1.85; } #pgc-ex .pgc-ex-entry__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--ex-accent-d); font-size: 15px; font-weight: 700; } #pgc-ex .pgc-ex-entry__go .pgc-ico { width: 18px; height: 18px; transition: transform .2s; } #pgc-ex .pgc-ex-entry__link:hover .pgc-ex-entry__go .pgc-ico { transform: translateX(3px); } #pgc-ex .pgc-ex-top-sub { margin-top: 24px; font-size: 14px; } #pgc-ex .pgc-ex-top-sub a { display: inline-flex; align-items: center; gap: 6px; color: var(--ex-muted); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } #pgc-ex .pgc-ex-top-sub a:hover { color: var(--ex-ink); } #pgc-ex .pgc-ex-top-sub .pgc-ico { width: 14px; height: 14px; } #pgc-ex .pgc-ex-top-more { margin-top: 28px; text-align: center; font-size: 15px; } /* ---------- レスポンシブ ---------- */ @media (max-width: 1080px) { #pgc-ex .pgc-ex-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } #pgc-ex .pgc-ex-past { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } #pgc-ex .pgc-ex-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } #pgc-ex .pgc-ex-flow__step:nth-child(3)::after { content: none; } #pgc-ex .pgc-ex-included { grid-template-columns: repeat(3, minmax(0, 1fr)); } #pgc-ex .pgc-ex-quality { grid-template-columns: minmax(0, 1fr); gap: 40px; } #pgc-ex .pgc-ex-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgc-ex .pgc-ex-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } #pgc-ex .pgc-ex-why { grid-template-columns: minmax(0, 1fr); gap: 36px; } #pgc-ex .pgc-ex-why__media { max-width: 420px; } #pgc-ex .pgc-ex-bridge { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-price { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } #pgc-ex .pgc-ex-scope-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgc-ex .pgc-ex-record { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-why--full .pgc-ex-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgc-ex .pgc-ex-entries { gap: 16px; } #pgc-ex .pgc-ex-entry__body { padding: 18px 18px 20px; } #pgc-ex .pgc-ex-entry__title { font-size: 19px; } #pgc-ex .pgc-ex-record__media > .pgc-ex-img { height: auto; } } @media (max-width: 767px) { #pgc-ex { --ex-gutter: 16px; font-size: 15px; } #pgc-ex .pgc-section { padding: 64px 0; } #pgc-ex .pgc-head { margin-bottom: 32px; } #pgc-ex .pgc-lead { font-size: 15px; text-align: left; } #pgc-ex .pgc-br-pc { display: none; } #pgc-ex .pgc-ex-intro { padding: 8px 0 56px; } #pgc-ex .pgc-ex-intro__title { font-size: clamp(24px, 6.6vw, 30px); letter-spacing: .04em; } #pgc-ex .pgc-ex-intro__lead { text-align: left; font-size: 15px; } #pgc-ex .pgc-ex-chips { justify-content: flex-start; } #pgc-ex .pgc-ex-chips li { font-size: 13px; padding: 6px 12px; } #pgc-ex .pgc-ex-intro .pgc-ex-actions .pgc-ex-btn { width: 100%; } #pgc-ex.pgc-ex--exhibitor .pgc-ex-intro__title { font-size: 32px; } /* 「撮った写真を、／展示作品に。」の2行で大きく */ #pgc-ex .pgc-ex-intro__notes { font-size: 13px; } #pgc-ex .pgc-ex-switch { font-size: 13px; padding: 10px 16px; } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__link { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__media { aspect-ratio: 3 / 2; min-height: 0; } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__body { padding: 20px; } #pgc-ex .pgc-ex-calls--1 .pgc-ex-call__name { font-size: 22px; } #pgc-ex .pgc-ex-past__stats strong { font-size: 28px; } #pgc-ex .pgc-ex-call__body { padding: 20px; } #pgc-ex .pgc-ex-features { grid-template-columns: minmax(0, 1fr); gap: 40px; } /* 1列（画面幅いっぱい）では 4:3 の箱が中身に対して縦に大きすぎるので、中身の高さに合わせる */ #pgc-ex :is(.pgc-ex-venues, .pgc-ex-caption-sample, .pgc-ex-attend) { aspect-ratio: auto; padding: 18px 20px; } /* 流れ: 縦の一列（番号の左に線） */ #pgc-ex .pgc-ex-flow { grid-template-columns: minmax(0, 1fr); row-gap: 0; } #pgc-ex .pgc-ex-flow__step { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "no who" "no title" "no text"; column-gap: 16px; align-items: start; padding: 0 0 24px; text-align: left; } #pgc-ex .pgc-ex-flow__step::after { left: 25px; right: auto; top: 52px; bottom: 0; width: 2px; height: auto; } #pgc-ex .pgc-ex-flow__step:nth-child(3)::after { content: ""; } #pgc-ex .pgc-ex-flow__step:last-child::after { content: none; } #pgc-ex .pgc-ex-flow__no { grid-area: no; } #pgc-ex .pgc-ex-flow__who { grid-area: who; justify-self: start; margin: 0 0 2px; } #pgc-ex .pgc-ex-flow__title { grid-area: title; margin-top: 0; } #pgc-ex .pgc-ex-flow__text { grid-area: text; margin-top: 2px; } #pgc-ex .pgc-ex-timeline { margin-top: 24px; padding: 22px 20px; } #pgc-ex .pgc-ex-timeline__list { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-included { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #pgc-ex .pgc-ex-included li { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 14px 12px; font-size: 14px; text-align: left; } #pgc-ex .pgc-ex-included .pgc-ico { width: 36px; height: 36px; padding: 8px; } #pgc-ex .pgc-ex-spec th { width: 7em; } #pgc-ex .pgc-ex-past { grid-template-columns: minmax(0, 1fr); gap: 28px; } #pgc-ex .pgc-ex-faq__q { padding: 18px 44px 18px 44px; font-size: 15px; } #pgc-ex .pgc-ex-faq__q::before { left: 16px; top: 17px; } #pgc-ex .pgc-ex-faq__q::after { right: 18px; } #pgc-ex .pgc-ex-faq__a { padding: 0 18px 20px 44px; font-size: 14px; } #pgc-ex .pgc-ex-final { padding: 64px 0 48px; } #pgc-ex .pgc-ex-final .pgc-ex-btn { width: 100%; } #pgc-ex .pgc-ex-final__sub { flex-wrap: wrap; } #pgc-ex .pgc-ex-cross { padding-bottom: 64px; } #pgc-ex .pgc-ex-cross__link { padding: 20px; gap: 4px 12px; } #pgc-ex .pgc-ex-cross__text { font-size: 16px; } #pgc-ex .pgc-ex-cross__desc { font-size: 13px; } #pgc-ex .pgc-ex-cross__link > .pgc-ico { width: 40px; height: 40px; padding: 10px; } /* 主催者向け */ #pgc-ex .pgc-ex-intro .pgc-ex-actions .pgc-ex-btn--ghost { width: 100%; } #pgc-ex .pgc-ex-facts { grid-template-columns: minmax(0, 1fr); padding: 4px 0; } #pgc-ex .pgc-ex-facts li { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "ico strong" "ico span"; justify-items: start; column-gap: 12px; padding: 12px 4px; text-align: left; } #pgc-ex .pgc-ex-facts li + li { border-left: 0; border-top: 1px solid var(--ex-line); } #pgc-ex .pgc-ex-facts .pgc-ico { grid-area: ico; align-self: center; margin: 0; } #pgc-ex .pgc-ex-facts strong { grid-area: strong; font-size: 16px; } #pgc-ex .pgc-ex-facts span { grid-area: span; font-size: 12px; } #pgc-ex .pgc-ex-scope-notes { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; } #pgc-ex .pgc-ex-scope-notes li { padding: 14px 16px; font-size: 14px; } #pgc-ex .pgc-ex-scope-photos { gap: 10px; } #pgc-ex .pgc-ex-scope-photos figcaption { font-size: 12px; } #pgc-ex .pgc-ex-record__list { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-why--full .pgc-ex-why__list { grid-template-columns: minmax(0, 1fr); } /* トップ */ #pgc-ex .pgc-ex-top-intro { padding: 48px 0 48px; } #pgc-ex .pgc-ex-top-call { padding: 56px 0 64px; } #pgc-ex .pgc-ex-top-intro .pgc-ex-intro__title { font-size: clamp(20px, 5.8vw, 24px); letter-spacing: .02em; } /* 「写真展とフォトコンテストを、／企画から運営まで。」の2行に収める */ #pgc-ex .pgc-ex-top-bar { margin: 36px auto 20px; } #pgc-ex .pgc-ex-entries { grid-template-columns: minmax(0, 1fr); } #pgc-ex .pgc-ex-entry__link { display: grid; grid-template-columns: 38% minmax(0, 1fr); } /* 幅と高さを両方決めて、写真枠の aspect-ratio（style 属性）を効かせない＝列からはみ出さない */ #pgc-ex .pgc-ex-entry__link > .pgc-ex-img, #pgc-ex .pgc-ex-entry__pisel { width: 100%; height: 100%; min-height: 150px; aspect-ratio: auto; } #pgc-ex .pgc-ex-entry__pisel { padding: 12px; gap: 6px; } #pgc-ex .pgc-ex-entry__pisel span { display: none; } #pgc-ex .pgc-ex-entry__body { padding: 14px 14px 16px; } #pgc-ex .pgc-ex-entry__title { margin-top: 6px; font-size: 17px; } #pgc-ex .pgc-ex-entry__text { font-size: 13px; line-height: 1.7; } #pgc-ex .pgc-ex-entry__go { padding-top: 8px; font-size: 13px; } #pgc-ex .pgc-ex-uses { grid-template-columns: minmax(0, 1fr); gap: 10px; } #pgc-ex .pgc-ex-uses li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; } #pgc-ex .pgc-ex-uses .pgc-ico { grid-row: span 2; } #pgc-ex .pgc-ex-uses h3 { margin-top: 0; } #pgc-ex .pgc-ex-uses p { margin-top: 2px; } #pgc-ex .pgc-ex-phases { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } #pgc-ex .pgc-ex-phase { padding: 0; } #pgc-ex .pgc-ex-phase .pgc-ex-phase__name, #pgc-ex .pgc-ex-phase:first-child .pgc-ex-phase__name { clip-path: none; padding-left: 16px; border-radius: 6px; } #pgc-ex .pgc-ex-phase ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgc-ex .pgc-ex-phase ul li { font-size: 14px; padding: 10px 12px; } #pgc-ex .pgc-ex-why__list { grid-template-columns: minmax(0, 1fr); gap: 22px; } #pgc-ex .pgc-ex-bridge ol { flex-direction: column; } #pgc-ex .pgc-ex-bridge ol li + li { margin: 18px 0 0; } #pgc-ex .pgc-ex-bridge ol li + li::before { left: 50%; top: -13px; transform: translateX(-50%) rotate(135deg); } #pgc-ex .pgc-ex-bridge__foot { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; } #pgc-ex .pgc-ex-price > div { padding: 22px 18px; } #pgc-ex .pgc-ex-checks { gap: 8px 12px; } #pgc-ex .pgc-ex-checks li { font-size: 14px; } #pgc-ex .pgc-ex-ranges li { grid-template-columns: minmax(0, 1fr); gap: 2px; } #pgc-ex .pgc-ex-price + .pgc-ex-actions .pgc-ex-btn { width: 100%; } #pgc-ex .pgc-ex-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } #pgc-ex .pgc-ex-lead-time { font-size: 15px; text-align: left; } #pgc-ex .pgc-ex-final__lead { text-align: left; } #pgc-ex .pgc-ex-final__links { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { #pgc-ex * { transition: none; } }