@charset "utf-8"; /* ========================================================================= かがわーくフェア 参加者募集サイト（試作）共通スタイル 色はここでは決めない。3 つのテーマ（assets/css/themes/a.css b.css c.css）が :root の変数を与え、 で切り替わる。既定は a。 このファイルは骨組み（余白・大きさ・並び・動き）だけを持つ。 ========================================================================= */ :root { --w-max: 1120px; --w-text: 46rem; --fs-body: 17px; --lh-body: 1.75; --e-out: cubic-bezier(.16, .84, .44, 1); } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "palt" 0; text-align: left; } img { max-width: 100%; height: auto; } a { color: var(--brand-ink); } a:hover { color: var(--field-2); } :focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; } h1, h2, h3, h4 { line-height: 1.4; margin: 0; font-weight: 700; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 1em; padding-left: 1.4em; } li { margin-bottom: .35em; } table { border-collapse: collapse; } .num { font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .01em; } .tnum { font-variant-numeric: tabular-nums; } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- layout ---------- */ .wrap { width: min(100% - 2.4rem, var(--w-max)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.4rem, 62rem); margin-inline: auto; } .section { padding: 4.5rem 0; } .section + .section { border-top: 1px solid var(--line); } .section--sand { background: var(--bg-2); border-top: 1px solid var(--line); } .section--sand + .section { border-top: 1px solid var(--line); } .lede { max-width: var(--w-text); } /* ---------- header ---------- */ .hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); } .hdr__in { display: flex; align-items: center; gap: 1rem; height: 64px; width: min(100% - 2rem, var(--w-max)); margin-inline: auto; } .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); } .brand__mark { width: 30px; height: 30px; flex: none; background: var(--field); color: var(--bg); display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1; border-radius: 50%; } .brand__name { font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; } .brand__sub { display: block; font-size: .72rem; font-weight: 400; color: var(--ink-sub); line-height: 1.3; } .hdr__nav { margin-left: auto; display: flex; align-items: center; gap: 1.35rem; } .hdr__nav a { color: var(--ink); text-decoration: none; font-size: .94rem; padding: .4rem 0; } .hdr__nav a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 4px; } .hdr__cta { margin-left: auto; } .hdr__nav + .hdr__cta { margin-left: 0; } /* ---------- 目次バー（chips） ---------- */ .toc { position: sticky; top: 65px; z-index: 30; background: var(--bg-2); border-bottom: 1px solid var(--line); } .toc__in { width: min(100% - 2rem, var(--w-max)); margin-inline: auto; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: thin; padding: .5rem 0; } .toc a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .toc a:hover { background: var(--field); border-color: var(--field); color: var(--bg); } /* ヘッダーは狭い画面ではナビを畳む（行き先は下の目次バーと画面下の固定ボタンが受け持つ） */ @media (max-width: 899px) { .hdr__nav { display: none; } .hdr__cta { margin-left: auto; } } @media (max-width: 599px) { .hdr__cta { display: none; } .brand__name { font-size: 1rem; } .brand__sub { font-size: .68rem; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .6rem 1.5rem; font-size: 1rem; font-weight: 700; line-height: 1.3; text-decoration: none; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn--cta { background: var(--cta); color: var(--bg); border-color: var(--cta); } .btn--cta:hover { background: var(--cta-d); border-color: var(--cta-d); color: var(--bg); } .btn--lg { min-height: 60px; font-size: 1.14rem; padding: .7rem 2.2rem; } .btn--sm { min-height: 44px; font-size: .92rem; padding: .4rem 1.1rem; } .btn--line { background: var(--bg); color: var(--brand-ink); border-color: var(--brand-ink); } .btn--line:hover { background: var(--field); color: var(--bg); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn--ghost:hover { border-color: var(--brand-ink); color: var(--brand-ink); } .btn--block { display: flex; width: 100%; } /* ---------- 見出し ---------- */ .h-sec { margin-bottom: 1.9rem; } .h-sec__no { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .16em; color: var(--brand-ink); text-transform: uppercase; margin-bottom: .35rem; } .h-sec__t { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); color: var(--ink); letter-spacing: .01em; padding-bottom: .55rem; border-bottom: 4px solid var(--field); display: inline-block; } .h-sec__note { margin-top: .8rem; color: var(--ink-sub); font-size: .95rem; max-width: var(--w-text); } .h-sub { font-size: 1.16rem; margin: 2.2rem 0 .7rem; padding-left: .7rem; border-left: 5px solid var(--accent); } /* ---------- hero ---------- */ .hero { padding: 2.6rem 0 3.4rem; } .hero__grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; } .hero__kicker { display: inline-block; background: var(--field); color: var(--bg); font-size: .86rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .85rem; margin-bottom: 1rem; } .hero__h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem); letter-spacing: .02em; line-height: 1.24; margin-bottom: .5rem; } .hero__h1 small { display: block; font-size: clamp(.92rem, .8rem + .5vw, 1.12rem); font-weight: 700; color: var(--brand-ink); margin-top: .55rem; letter-spacing: .01em; } .hero__lede { max-width: 34rem; margin-bottom: 1.5rem; } .datecard { background: var(--field); color: var(--bg); padding: 1.6rem 1.5rem 1.4rem; } .datecard__label { font-size: .82rem; font-weight: 700; letter-spacing: .18em; color: var(--field-label); margin-bottom: .5rem; } .datecard__d { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; line-height: 1; } .datecard__d b { font-size: clamp(3.6rem, 2.2rem + 7vw, 6.2rem); font-weight: 700; letter-spacing: -.01em; } .datecard__d .sep { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); font-weight: 600; color: var(--field-label); padding: 0 .08em; } .datecard__d .you { font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem); font-weight: 700; } .datecard__wa { margin-top: .55rem; font-size: 1rem; font-weight: 700; color: var(--field-label); } .datecard__t { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.45); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.85rem); font-weight: 700; line-height: 1.2; } .datecard__t small { display: block; font-size: .9rem; font-weight: 400; margin-top: .4rem; color: var(--field-soft); } .facts { border-top: 1px solid var(--line); margin: 0 0 1.5rem; } .facts__row { display: grid; grid-template-columns: 5.4rem 1fr; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: start; } .facts__k { background: var(--field); color: var(--bg); font-size: .84rem; font-weight: 700; text-align: center; padding: .18rem 0; align-self: start; letter-spacing: .06em; } .facts__v { font-size: 1rem; } .facts__v small { display: block; color: var(--ink-sub); font-size: .88rem; margin-top: .15rem; } .badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .badge { border: 2px solid var(--brand-ink); color: var(--brand-ink); font-size: .88rem; font-weight: 700; padding: .22rem .8rem; border-radius: 999px; background: var(--bg); } .hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; } .hero__note { margin-top: .9rem; font-size: .86rem; color: var(--ink-sub); } /* スマホ幅（899px以下）は DATE ブロックをタイトル直下・リード文の前に出す。 hero__main / hero__side の入れ子を無効化して中身を1列のグリッド項目に展開し、 order だけで並びを入れ替える（PC幅＝900px以上の見え方はこの下のブロックで従来どおり）。 */ @media (max-width: 899px) { .hero__grid { gap: 0; } .hero__main, .hero__side { display: contents; } .hero__kicker { order: 1; } .hero__h1 { order: 2; } .datecard { order: 3; margin: 1rem 0 1.6rem; } .hero__lede { order: 4; } .facts { order: 5; } .badges { order: 6; } .hero__btns { order: 7; } .hero__note { order: 8; } } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.08fr .92fr; gap: 3rem; align-items: start; } .hero__main { order: 1; } .hero__side { order: 2; position: sticky; top: 130px; } } /* ---------- 出展企業への入口 ---------- */ .entry { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 820px) { .entry { grid-template-columns: 1fr 20rem; gap: 2.6rem; } } .entry__count { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .8rem; } .entry__count b { font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem); color: var(--field); line-height: .95; } .entry__count span { font-size: 1.15rem; font-weight: 700; } .axes { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; } .axes li { margin: 0; } .axis { display: inline-block; background: var(--bg); border: 1px solid var(--line-2); padding: .25rem .75rem; font-size: .88rem; border-radius: 999px; } /* ---------- 当日の流れ ---------- */ .flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); } @media (min-width: 860px) { .flow { grid-template-columns: repeat(4, 1fr); } } .flow > li { background: var(--bg); margin: 0; padding: 1.4rem 1.3rem 1.5rem; } .flow__no { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--bg); background: var(--field); display: inline-block; padding: .1rem .55rem; margin-bottom: .7rem; } .flow__time { font-size: 1.34rem; font-weight: 700; color: var(--brand-ink); line-height: 1.2; } .flow__time small { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-sub); margin-top: .2rem; } .flow__t { font-size: 1.06rem; margin: .55rem 0 .35rem; } .flow__d { font-size: .94rem; color: var(--ink); margin: 0; } /* ---------- 調整中の札 ---------- */ .tbd { display: inline-block; background: var(--accent); color: var(--on-accent); font-size: .86rem; font-weight: 700; padding: .2rem .8rem; letter-spacing: .04em; } .panel { background: var(--bg); border: 1px solid var(--line); border-left: 6px solid var(--field); padding: 1.4rem 1.5rem; } .panel--tbd { border-left-color: var(--accent); } /* ---------- 交通費補助 ---------- */ .spec { border-top: 1px solid var(--line); margin: 1.2rem 0 0; } .spec__row { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .85rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 700px) { .spec__row { grid-template-columns: 11rem 1fr; gap: 1.2rem; } } .spec__k { font-weight: 700; color: var(--brand-ink); font-size: .95rem; } .spec__v { font-size: 1rem; } /* ---------- アクセス図 ---------- */ .access { display: grid; gap: 1.8rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .access { grid-template-columns: 1.1fr .9fr; gap: 2.6rem; } } .accessmap { width: 100%; height: auto; display: block; background: var(--bg-2); border: 1px solid var(--line); } .walk { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .walk li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--line); } .walk b { font-size: 1.02rem; font-weight: 700; } .walk span { font-weight: 700; color: var(--brand-ink); white-space: nowrap; } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.4rem 1.05rem 2.2rem; position: relative; font-weight: 700; font-size: 1.02rem; min-height: 48px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::before { content: "Q"; position: absolute; left: 0; top: 1.02rem; color: var(--alert); font-weight: 700; font-size: 1.02rem; } .faq summary::after { content: ""; position: absolute; right: .5rem; top: 1.5rem; width: 11px; height: 11px; border-right: 2px solid var(--brand-ink); border-bottom: 2px solid var(--brand-ink); transform: rotate(45deg); transition: transform .18s ease; } .faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; } .faq summary:hover { color: var(--brand-ink); } .faq__a { padding: 0 1rem 1.3rem 2.2rem; position: relative; } .faq__a::before { content: "A"; position: absolute; left: 0; top: 0; color: var(--brand-ink); font-weight: 700; } .faq__a p { margin-bottom: .6em; } .pending { color: var(--alert); font-weight: 700; } /* ---------- 問い合わせ ---------- */ .contact { background: var(--field-2); color: var(--bg); padding: 2.2rem 1.8rem; } .contact h2 { color: var(--bg); font-size: 1.3rem; margin-bottom: .8rem; } .contact p { color: var(--field2-soft); } .contact strong { color: var(--field2-label); } /* ---------- footer ---------- */ .ftr { background: var(--field-2); color: var(--field2-soft); padding: 2.6rem 0 6.5rem; font-size: .93rem; } .ftr a { color: var(--bg); } .ftr__grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .ftr__grid { grid-template-columns: 1.4fr 1fr; gap: 3rem; } .ftr { padding-bottom: 2.6rem; } } body.no-fixedcta .ftr { padding-bottom: 2.6rem; } .ftr__h { font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: var(--field2-label); margin-bottom: .5rem; } .ftr__links { list-style: none; margin: 0; padding: 0; } .ftr__links li { margin-bottom: .1rem; } .ftr__links a { display: inline-flex; align-items: center; min-height: 44px; } .ftr__dummy { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.3); font-size: .88rem; color: var(--field2-soft); } /* ---------- 追従 CTA ---------- */ .cta-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); padding: .55rem .8rem calc(.55rem + env(safe-area-inset-bottom)); display: flex; gap: .5rem; } .cta-fixed .btn { flex: 1; } .cta-side { display: none; } @media (min-width: 900px) { .cta-fixed { display: none; } .cta-side { display: block; position: fixed; right: 0; top: 46%; z-index: 45; background: var(--cta); color: var(--bg); text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: .1em; padding: 1.1rem .55rem; writing-mode: vertical-rl; border-radius: 4px 0 0 4px; transition: background-color .15s ease; } .cta-side:hover { background: var(--cta-d); color: var(--bg); } } /* ========================================================================= 出展企業一覧 ========================================================================= */ .pagehead { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 2.2rem 0 2rem; } .crumb { font-size: .86rem; color: var(--ink-sub); margin-bottom: .7rem; } .crumb a { color: var(--ink-sub); } .pagehead h1 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem); letter-spacing: .01em; } .pagehead p { margin-top: .7rem; max-width: var(--w-text); } .filter { padding: 1.6rem 0 .4rem; } .filter__grp { padding: .85rem 0; border-bottom: 1px solid var(--line); } .filter__grp:first-child { border-top: 1px solid var(--line); } .filter__k { font-size: .88rem; font-weight: 700; color: var(--brand-ink); margin-bottom: .5rem; } .chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chip { min-height: 44px; display: inline-flex; align-items: center; padding: .3rem 1rem; font-size: .92rem; font-family: inherit; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { border-color: var(--brand-ink); color: var(--brand-ink); } .chip[aria-pressed="true"] { background: var(--field); border-color: var(--field); color: var(--bg); font-weight: 700; } .searchbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); } .searchbar input[type="search"] { flex: 1 1 18rem; min-height: 48px; padding: .5rem .9rem; font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; } .searchbar input::placeholder { color: var(--ink-sub); } .listbar { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 2px solid var(--field); margin-bottom: 1.6rem; } .listbar__count { font-size: 1rem; font-weight: 700; } .listbar__count b { font-size: 1.5rem; color: var(--brand-ink); } .listbar__right { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; } .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } } .cards > li { margin: 0; } .card { height: 100%; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--field); padding: 1.1rem 1.15rem 1rem; } .card__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; } .tag { font-size: .76rem; font-weight: 700; padding: .12rem .55rem; border-radius: 3px; letter-spacing: .02em; } .tag--m { background: var(--field); color: var(--bg); } /* 面接会 */ .tag--k { background: var(--cta); color: var(--bg); } /* 交流会 */ .tag--i { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); } /* 業種 */ .tag--a { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); } /* 勤務地 */ .card__name { font-size: 1.1rem; line-height: 1.45; margin-bottom: .45rem; } .card__name a { color: var(--ink); text-decoration: none; } .card__name a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; } .card__kana { display: block; font-size: .76rem; font-weight: 400; color: var(--ink-sub); letter-spacing: .04em; } .card__pr { font-size: .95rem; margin-bottom: .6rem; } .card__meta { font-size: .88rem; color: var(--ink-sub); margin-bottom: .45rem; } .card__meta b { color: var(--ink); font-weight: 700; } .card__foot { margin-top: auto; padding-top: .8rem; display: flex; gap: .5rem; align-items: center; } .card__foot .btn { flex: 1; } .fav { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .3rem .8rem; font-size: .9rem; font-family: inherit; font-weight: 700; background: var(--bg); color: var(--brand-ink); border: 2px solid var(--brand-ink); border-radius: 4px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .fav:hover { background: var(--bg-2); } .fav[aria-pressed="true"] { background: var(--field); color: var(--bg); } .fav__on { display: none; } .fav[aria-pressed="true"] .fav__on { display: inline; } .fav[aria-pressed="true"] .fav__off { display: none; } .empty { padding: 3rem 0; border-bottom: 1px solid var(--line); } .noscript { background: var(--bg-2); border: 1px solid var(--line-2); padding: 1rem 1.2rem; margin-bottom: 1.4rem; } /* 気になるリストの印刷向け表示 */ body.is-printview .cards { display: block; } body.is-printview .cards > li { border-bottom: 1px solid var(--line); } body.is-printview .card { border: 0; padding: .7rem 0; flex-direction: row; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; } body.is-printview .card__pr, body.is-printview .card__foot { display: none; } body.is-printview .card__name { margin: 0; font-size: 1.02rem; } body.is-printview .card__meta { margin: 0; } body.is-printview .filter, body.is-printview .searchbar { display: none; } @media print { .hdr, .toc, .cta-fixed, .cta-side, .filter, .searchbar, .listbar__right, .ftr__links { display: none !important; } body { font-size: 12pt; } .card { border: 0; border-bottom: 1px solid #999; } a[href]::after { content: ""; } } /* ========================================================================= 企業詳細 ========================================================================= */ .detail { display: grid; gap: 2.4rem; grid-template-columns: 1fr; padding: 2.6rem 0 3rem; } @media (min-width: 960px) { .detail { grid-template-columns: 1fr 19rem; gap: 3rem; } } .detail__pr { font-size: 1.12rem; font-weight: 700; color: var(--brand-ink); line-height: 1.7; margin-bottom: 1.6rem; } .jobtable { width: 100%; font-size: .97rem; } .jobtable caption { text-align: left; font-weight: 700; padding-bottom: .5rem; } .jobtable th, .jobtable td { border: 1px solid var(--line); padding: .7rem .8rem; text-align: left; vertical-align: top; } .jobtable thead th { background: var(--field); color: var(--bg); font-size: .9rem; white-space: nowrap; } .jobtable tbody th { background: var(--bg-2); font-weight: 700; width: 30%; } .side { background: var(--bg-2); border: 1px solid var(--line); padding: 1.3rem 1.3rem 1.4rem; } .side dl { margin: 0 0 1.2rem; } .side dt { font-size: .82rem; font-weight: 700; color: var(--brand-ink); letter-spacing: .04em; } .side dd { margin: .15rem 0 .9rem; font-size: .97rem; } .pager { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: space-between; padding: 1.6rem 0 3rem; border-top: 1px solid var(--line); } /* ========================================================================= 申込フォーム ========================================================================= */ .steps { list-style: none; display: flex; gap: .4rem; margin: 0 0 2rem; padding: 0; } .steps li { flex: 1; margin: 0; text-align: center; font-size: .9rem; font-weight: 700; padding: .6rem .3rem; background: var(--bg-2); color: var(--ink-sub); border-bottom: 4px solid var(--line-2); } .steps li[aria-current="step"] { background: var(--bg); color: var(--brand-ink); border-bottom-color: var(--field); } .steps li b { font-family: "Barlow Semi Condensed", sans-serif; margin-right: .3rem; } .fset { border: 0; margin: 0 0 2.4rem; padding: 0; } .fset__h { font-size: 1.14rem; font-weight: 700; padding: 0 0 .55rem; margin: 0 0 1.1rem; border-bottom: 2px solid var(--field); width: 100%; } .fset__h span { color: var(--brand-ink); margin-right: .5rem; font-family: "Barlow Semi Condensed", sans-serif; } .field { margin-bottom: 1.5rem; } .field > label, .field__k { display: block; font-weight: 700; font-size: .98rem; margin-bottom: .4rem; } .req { background: var(--cta); color: var(--bg); font-size: .74rem; font-weight: 700; padding: .1rem .45rem; margin-left: .5rem; border-radius: 3px; vertical-align: 2px; } .opt { background: var(--bg-2); color: var(--ink-sub); border: 1px solid var(--line-2); font-size: .74rem; padding: .06rem .45rem; margin-left: .5rem; border-radius: 3px; vertical-align: 2px; } .hint { font-size: .87rem; color: var(--ink-sub); margin: .25rem 0 .45rem; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; min-height: 48px; padding: .55rem .8rem; font-size: 1rem; font-family: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; } select { min-height: 48px; } input:focus, select:focus, textarea:focus { border-color: var(--brand-ink); border-width: 2px; } .radios { display: grid; gap: .5rem; } @media (min-width: 620px) { .radios--2 { grid-template-columns: 1fr 1fr; } } .radio { display: flex; align-items: flex-start; gap: .6rem; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); cursor: pointer; } .radio:hover { border-color: var(--field); } .radio input { margin-top: .25rem; width: 20px; height: 20px; flex: none; accent-color: var(--field); } .radio b { display: block; font-size: 1rem; } .radio small { display: block; color: var(--ink-sub); font-size: .87rem; line-height: 1.6; } .err { color: #A11212; font-size: .9rem; font-weight: 700; margin-top: .3rem; display: none; } .field.is-err input, .field.is-err select { border-color: #A11212; border-width: 2px; } .field.is-err .err { display: block; } .errsum { background: #FDF1F1; border: 2px solid #A11212; padding: 1rem 1.2rem; margin-bottom: 1.6rem; } .errsum h2 { color: #A11212; font-size: 1.02rem; margin-bottom: .4rem; } .errsum ul { margin: 0; padding-left: 1.3rem; } .errsum a { color: #A11212; } .favpick { border: 1px solid var(--line); padding: 1rem 1.1rem; background: var(--bg-2); } .favpick__list { list-style: none; margin: .8rem 0 0; padding: 0; max-height: 16rem; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); } .favpick__list li { margin: 0; border-bottom: 1px solid var(--line); } .favpick__list label { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; min-height: 48px; cursor: pointer; font-size: .95rem; } .favpick__list input { width: 20px; height: 20px; accent-color: var(--field); flex: none; } .favpick__cnt { font-size: .9rem; font-weight: 700; color: var(--brand-ink); } .confirm { border-top: 1px solid var(--line); margin-bottom: 2rem; } .confirm__row { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .85rem .2rem; border-bottom: 1px solid var(--line); } @media (min-width: 700px) { .confirm__row { grid-template-columns: 13rem 1fr; gap: 1.2rem; } } .confirm__k { font-weight: 700; color: var(--brand-ink); font-size: .93rem; } .confirm__v { word-break: break-all; } .formfoot { display: flex; gap: .8rem; flex-wrap: wrap; padding-top: .5rem; } .done__mark { display: inline-block; background: var(--field); color: var(--bg); font-size: .86rem; font-weight: 700; padding: .3rem .9rem; margin-bottom: 1rem; } .callout { border: 2px solid var(--field); padding: 1.4rem 1.5rem; margin: 1.6rem 0; background: var(--bg); } .callout--big { border-color: var(--cta); border-width: 3px; background: var(--bg-2); } .callout h3 { font-size: 1.1rem; margin-bottom: .5rem; color: var(--brand-ink); } .callout--big h3 { color: var(--cta-d); font-size: 1.22rem; } .mini { font-size: .86rem; color: var(--ink-sub); } /* ---------- 本文ページ（プライバシー） ---------- */ .prose { max-width: var(--w-text); padding: 2.6rem 0 3.4rem; } .prose h2 { font-size: 1.2rem; margin: 2.2rem 0 .6rem; padding-left: .7rem; border-left: 5px solid var(--field); } .prose h2:first-child { margin-top: 0; } .prose ol, .prose ul { padding-left: 1.4em; } /* ========================================================================= ここから下は「作り込み版（v2）」で足した部分 見せ場は 3 か所だけに絞る（ヒーロー／160 の数え上げ／当日の流れの出現）。 動きはすべて prefers-reduced-motion で止まる。 ========================================================================= */ /* ---------- 出現の動き（JS が付ける .js / .is-in で動かす） ------------- 初期状態を CSS だけで opacity:0 にはしない。JS が に .js を付けた ときだけ隠れる。JS が無効なら最初から全部見える。 */ .js .anim { opacity: 0; transform: translateY(18px); } .js .anim.is-in { opacity: 1; transform: none; transition: opacity .55s var(--e-out), transform .55s var(--e-out); } .js .anim--left { transform: translateX(-20px); } .js .anim--zoom { transform: scale(.96); } @media (prefers-reduced-motion: reduce) { .js .anim, .js .anim.is-in { opacity: 1 !important; transform: none !important; } .marquee__row { animation: none !important; transform: none !important; } } /* ---------- ボタン（沈む・矢印が出る） ---------- */ .btn { position: relative; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); } .btn:hover { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, .18); } .btn:active { transform: translateY(3px); } .btn--cta::after, .btn--line::after { content: ""; flex: none; width: .46em; height: .46em; margin-left: .1em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .18s var(--e-out); } .btn--cta:hover::after, .btn--line:hover::after { transform: rotate(-45deg) translate(3px, 3px); } .btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--e-out), box-shadow .12s var(--e-out); } /* ---------- セクション見出しの装置（番号＋英字＋下線） ---------- */ .h-sec__no { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; } .h-sec__num { flex: none; display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; background: var(--field); color: var(--bg); font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1; } .h-sec__en { font-size: .82rem; font-weight: 700; letter-spacing: .18em; color: var(--brand-ink); } .h-sec__t { border-bottom: 0; padding-bottom: .5rem; position: relative; } .h-sec__t::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: linear-gradient(to right, var(--field) 0 3.2rem, var(--accent) 3.2rem 100%); } /* ---------- ヒーロー ---------- */ .hero { padding: 2.2rem 0 3rem; position: relative; } .hero__kicker { position: relative; } .datecard { position: relative; overflow: hidden; } .datecard::after { content: ""; position: absolute; right: -3.2rem; top: -3.2rem; width: 11rem; height: 11rem; border-radius: 50%; background: rgba(255, 255, 255, .07); } .datecard__d b { display: inline-block; } /* 開催までの残り日数（JS が入れる。JS 無効なら要素ごと出ない） */ .countdown { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(255, 255, 255, .45); display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: .95rem; font-weight: 700; color: var(--field-soft); } .countdown b { font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: 2.5rem; line-height: 1; color: var(--field-label); font-variant-numeric: tabular-nums; } .countdown small { font-size: .86rem; font-weight: 400; } /* ヒーローの写真 */ .hero__photo { margin-top: 1rem; } .photo { position: relative; overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo--16x9 { aspect-ratio: 16 / 9; } .photo--4x3 { aspect-ratio: 4 / 3; } .photo--3x2 { aspect-ratio: 3 / 2; } .photo__cap { margin-top: .4rem; font-size: .78rem; color: var(--ink-sub); } @supports not (aspect-ratio: 1) { .photo--16x9 img, .photo--4x3 img, .photo--3x2 img { height: auto; } } /* ---------- 出展企業の入口（160 の数え上げ＋写真の帯） ---------- */ .numbanner { display: grid; grid-template-columns: 1fr; background: var(--field-2); margin-bottom: 2rem; overflow: hidden; } .numbanner__in { margin: 0; padding: 1.9rem 1.6rem 2rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; align-content: center; } .numbanner__n { font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: clamp(4.4rem, 3rem + 9vw, 8.4rem); font-weight: 700; line-height: .85; color: var(--bg); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .numbanner__u { font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); font-weight: 700; color: var(--bg); } .numbanner__t { width: 100%; margin: .8rem 0 0; font-size: clamp(1rem, .93rem + .4vw, 1.28rem); font-weight: 700; color: var(--field2-label); } .numbanner__img { position: relative; aspect-ratio: 16 / 10; } .numbanner__img img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 820px) { .numbanner { grid-template-columns: 1.02fr .98fr; } .numbanner__in { padding: 2.4rem 2.4rem 2.6rem; } .numbanner__img { aspect-ratio: auto; min-height: 17rem; } } /* ---------- 業種・企業名が横に流れる帯 ---------- */ .marquee { position: relative; overflow: hidden; border-top: 3px solid var(--field); border-bottom: 3px solid var(--field); background: var(--bg); padding: .7rem 0; margin: 0 0 1.8rem; } .marquee__track { display: flex; width: max-content; } .marquee__row { display: flex; flex: none; gap: 1.6rem; padding-right: 1.6rem; align-items: center; white-space: nowrap; animation: marquee 44s linear infinite; } .marquee:hover .marquee__row, .marquee:focus-within .marquee__row { animation-play-state: paused; } .marquee__i { font-size: .96rem; font-weight: 700; color: var(--ink); } .marquee__i::before { content: ""; display: inline-block; vertical-align: .1em; width: .5rem; height: .5rem; margin-right: .55rem; background: var(--accent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } .entry__count b { line-height: .9; } /* ---------- 当日の流れ（時刻の線でつなぐ） ---------- */ .flow { position: relative; gap: 0; background: transparent; } .flow > li { position: relative; background: transparent; padding: 2.2rem 1.2rem 1.4rem 0; border-top: 4px solid var(--line); } .flow > li::before { content: ""; position: absolute; left: 0; top: -4px; width: 4px; height: 4px; background: var(--line); } .flow > li::after { content: ""; position: absolute; left: 0; top: -12px; width: 20px; height: 20px; border-radius: 50%; background: var(--field); border: 4px solid var(--bg); } .flow__no { background: transparent; color: var(--brand-ink); padding: 0; font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: .86rem; letter-spacing: .16em; margin-bottom: .35rem; } .flow__time { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .flow__t { font-size: 1.1rem; } @media (min-width: 860px) { .flow { grid-template-columns: repeat(4, 1fr); } .flow > li { padding-right: 1.6rem; } } @media (max-width: 859px) { .flow > li { padding: 1.8rem 0 1.4rem 1.6rem; border-top: 0; border-left: 4px solid var(--line); } .flow > li::after { left: -12px; top: 1.2rem; } .flow > li::before { display: none; } } .js .flow > li.anim.is-in { transition-duration: .5s; } /* 当日のイメージ写真（3 枚） */ .shots { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .shots { grid-template-columns: repeat(3, 1fr); } } .shots > li { margin: 0; } .shots__cap { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-sub); } /* ---------- セミナー ---------- */ .seminar { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .seminar { grid-template-columns: 1.15fr .85fr; gap: 2.4rem; } } /* ---------- 大きい数字のかたまり（交通費・アクセス） ---------- */ .bignums { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--line); margin: 0 0 1.6rem; } @media (min-width: 640px) { .bignums { grid-template-columns: repeat(3, 1fr); } } .bignum { background: var(--bg); padding: 1.2rem 1.1rem 1.3rem; } .bignum__k { font-size: .86rem; font-weight: 700; color: var(--brand-ink); letter-spacing: .04em; margin-bottom: .2rem; } .bignum__v { font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: clamp(2.4rem, 1.7rem + 3vw, 3.6rem); font-weight: 700; line-height: 1; color: var(--field); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap; } .bignum__v small { font-family: "Noto Sans JP", sans-serif; font-size: 1rem; font-weight: 700; color: var(--ink); } .bignum__n { font-size: .84rem; color: var(--ink-sub); margin-top: .45rem; } .bignum--strong { background: var(--field); } .bignum--strong .bignum__k { color: var(--field-label); } .bignum--strong .bignum__v { color: var(--bg); } .bignum--strong .bignum__v small { color: var(--bg); } .bignum--strong .bignum__n { color: var(--field-soft); } .travel { display: grid; gap: 1.8rem; grid-template-columns: 1fr; } @media (min-width: 940px) { .travel { grid-template-columns: 1.25fr .75fr; gap: 2.6rem; } } /* ---------- アクセス（徒歩の分数を大きく） ---------- */ .walk li { padding: .95rem 0; } .walk span { font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: 1.5rem; line-height: 1; } .walk span i { font-style: normal; font-size: .8rem; font-family: "Noto Sans JP", sans-serif; } .walk li:first-child span { font-size: 2.4rem; } .walk li:first-child b { font-size: 1.1rem; } /* アクセス図（色はテーマに追随させる） */ .accessmap .m-sea { fill: var(--map-sea); } .accessmap .m-base { fill: var(--bg-2); } .accessmap .m-box { fill: var(--bg); stroke: var(--field); } .accessmap .m-goal { fill: var(--field); } .accessmap .m-ink { fill: var(--ink); } .accessmap .m-sub { fill: var(--ink-sub); } .accessmap .m-rev { fill: var(--bg); } .accessmap .m-rev2 { fill: var(--field-soft); } .accessmap .m-seaink{ fill: var(--ink); } .accessmap .m-path { stroke: var(--cta); } .accessmap .m-tagbx { fill: var(--bg); stroke: var(--cta); } .accessmap .m-tagtx { fill: var(--cta-d); } /* ---------- FAQ（開閉の動き） ---------- */ .faq__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--e-out); } .faq details[open] .faq__wrap { grid-template-rows: 1fr; } .faq__wrap > .faq__a { overflow: hidden; min-height: 0; } @media (prefers-reduced-motion: reduce) { .faq__wrap { transition: none; } } .faq summary { transition: background-color .15s ease; } .faq summary:hover { background: var(--bg-2); } .faq details[open] summary { color: var(--brand-ink); } /* ---------- 下層ページのヒーロー帯 ---------- */ .pagehead { position: relative; overflow: hidden; } .pagehead--photo { background: var(--field-2); border-bottom: 0; padding: 2.4rem 0 2.6rem; } .pagehead--photo .pagehead__img { position: absolute; inset: 0; } .pagehead--photo .pagehead__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pagehead--photo .pagehead__veil { position: absolute; inset: 0; background: var(--shade); } .pagehead--photo .wrap { position: relative; z-index: 1; } /* 文字は写真の上に直接置かず、無地の色面の上に置く（明暗の差を確実にするため） */ .pagehead__panel { background: var(--field-2); padding: 1.4rem 1.6rem 1.5rem; max-width: 46rem; } .pagehead--photo h1 { color: var(--bg); } .pagehead--photo p { color: var(--field2-soft); } .pagehead--photo .crumb, .pagehead--photo .crumb a { color: var(--field2-soft); } .pagehead--photo .pagehead__note { color: var(--field2-soft); font-size: .78rem; margin-top: .9rem; } .pagehead--field { background: var(--field); border-bottom: 0; padding: 2.4rem 0 2.2rem; } .pagehead--field h1 { color: var(--bg); } .pagehead--field p { color: var(--field-soft); } .pagehead--field .crumb, .pagehead--field .crumb a { color: var(--field-soft); } .pagehead--field .tag--i, .pagehead--field .tag--a { background: transparent; color: var(--bg); border-color: var(--field-soft); } /* ---------- 一覧カード（ホバー・「気になる」の押下） ---------- */ .card { transition: transform .16s var(--e-out), box-shadow .16s var(--e-out), border-color .16s ease; } .cards > li:hover .card { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 6px 0 var(--bg-3); } .fav { transition: background-color .15s ease, color .15s ease, transform .12s var(--e-out); } .fav:active { transform: scale(.95); } .fav.is-pop { animation: favpop .34s var(--e-out); } @keyframes favpop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .fav.is-pop { animation: none; } } /* ---------- フォームの進行表示 ---------- */ .steps li { position: relative; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .steps li[aria-current="step"] { border-bottom-width: 6px; } .steps li b { color: inherit; } /* ---------- 比較ページ（compare.html） ---------- */ .cmp { padding: 1.6rem 0 3rem; } .cmp__lead { max-width: var(--w-text); margin-bottom: 1.4rem; } .cmp__tabs { display: none; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; } .cmp__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; } @media (min-width: 1000px) { .cmp__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } @media (max-width: 999px) { .cmp__tabs { display: flex; } .cmp__col[hidden] { display: none; } } .cmp__col { border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; } .cmp__hd { padding: .9rem 1rem 1rem; border-bottom: 1px solid var(--line); } .cmp__name { font-size: 1.05rem; font-weight: 700; margin: 0 0 .1rem; } .cmp__note { font-size: .84rem; color: var(--ink-sub); margin: 0 0 .7rem; } .cmp__sw { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; } .cmp__sw li { margin: 0; } .cmp__sw span { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-family: "Barlow Semi Condensed", monospace; letter-spacing: .04em; color: var(--ink-sub); } .cmp__sw i { display: block; width: 1.1rem; height: 1.1rem; border: 1px solid var(--line-2); } .cmp__frame { position: relative; overflow: hidden; height: 34rem; background: var(--bg); } .cmp__frame iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 1700px; border: 0; display: block; transform-origin: top left; transform: scale(.3); } .cmp__scale { font-size: .78rem; color: var(--ink-sub); margin: .4rem 0 0; } .cmp__ft { padding: .7rem 1rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; flex-wrap: wrap; } /* ---------- フッターの注記 ---------- */ .ftr__photo { margin-top: .5rem; font-size: .84rem; color: var(--field2-soft); } /* ---------- 印刷 ---------- */ @media print { .marquee, .numbanner__img, .numbanner__veil, .hero__photo, .shots, .pagehead__img, .pagehead__veil { display: none !important; } .js .anim { opacity: 1 !important; transform: none !important; } } /* ---------- ヒーローの並び（写真を足したことによる調整） ---------- */ @media (max-width: 899px) { .hero__photo { order: 9; margin-top: 1.6rem; } .countdown b { font-size: 2.1rem; } } @media (min-width: 900px) { .hero__side { position: static; } } .countdown[hidden] { display: none; } /* ---------- 追加の細部（v2） ---------- */ .hero__h1 { font-weight: 900; } .h-sec__t { font-weight: 900; } .numbanner__t { font-weight: 700; } .photo-fig { margin: 0; } .seminar .photo-fig { margin: 0; } .travel .photo-fig { margin: 0; } /* アクセスの徒歩分数 */ .walk span { display: inline-flex; align-items: baseline; gap: .18rem; font-family: "Noto Sans JP", sans-serif; font-size: 1rem; } .walk span i { font-style: normal; font-size: .92rem; font-weight: 700; } .walk span em { font-style: normal; font-family: "Barlow Semi Condensed", "Noto Sans JP", sans-serif; font-size: 2.1rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; } .walk li:first-child em { font-size: 3rem; } .walk li:first-child b { font-size: 1.08rem; } /* 企業詳細のヒーロー帯 */ .pagehead__kana { font-size: .9rem; letter-spacing: .04em; margin-top: .3rem; } .pagehead--field .pagehead__kana { color: var(--field-soft); } .pagehead--field .tag--m { background: var(--bg); color: var(--field); } .pagehead--field .tag--k { background: var(--accent); color: var(--on-accent); } /* 一覧のカードの上辺は主色の帯 */ .card { border-top-width: 5px; }