/* * トップページ（/）専用。承認済みモック A-1（紺×生成り・電話優先）。1280px（PC）と 390px（スマホ）がモック、 * 中間は 1200px（ヘッダー）/ 1024px / 900px（ヒーロー）/ 768px で段階的に切り替える。 * ヘッダー・相談CTA・フッターと CSS 変数は全ページ共通の /css/chrome.css（先に読む）。ここはそれ以外（ヒーロー〜新着情報）。 * には現行 WordPress のプラグイン CSS（ブロック用など）が残っているので、要素セレクタの初期値はここで打ち消す。 * リンク色は --c で渡す（プラグイン側の a:hover 等に負けないよう、色の指定は body.home a に集約）。 */ html { margin-top: 0 !important; } body.home { margin: 0; background: var(--t-cream); color: var(--t-ink); font-family: var(--t-head); font-size: 16px; font-weight: 500; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } body.home *, body.home *::before, body.home *::after { box-sizing: border-box; } body.home a { color: var(--c, var(--t-navy)); text-decoration: none; } body.home a:hover, body.home a:focus, body.home a:active { color: var(--c, #0a5aa0); } body.home a:focus-visible, body.home button:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; } /* 初期値の打ち消しは :where() で詳細度を上げない（各コンポーネントの余白指定を優先させる） */ :where(.t-main) :is(ul, li > ul) { list-style: none; margin: 0; padding: 0; } :where(.t-main) :is(p, h2, h3) { margin: 0; } .t-main h2, .t-main h3 { font-family: var(--t-head); } .t-main img, .t-main video, .t-main svg { vertical-align: middle; } /* 視覚的に隠す（h1・スキップリンク） */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; margin: 0; left: 8px; top: 8px; z-index: 1000; padding: 12px 16px; background: #fff; --c: var(--t-navy); font-weight: 700; border-radius: 8px; } .t-eyebrow { font-size: 12px; letter-spacing: 0.2em; color: var(--t-accent); font-weight: 900; } .t-heading { display: flex; flex-direction: column; gap: 6px; } .t-heading--center { align-items: center; text-align: center; } .t-heading__title { font-size: 32px; font-weight: 900; color: var(--t-navy); line-height: 1.4; } .t-heading__title--sm { font-size: 28px; } .t-stars { display: inline-flex; gap: 1px; } /* ---------- ヒーロー ---------- */ .t-hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: stretch; height: auto; max-width: 1280px; margin: 0 auto; background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); } /* 動画は 16:9 の箱に収めて上下を切らない（幅が広い画面でも cover で欠けないよう箱の比率を固定） */ .t-hero__video { aspect-ratio: 16 / 9; } .t-hero__video { position: relative; overflow: hidden; background: #0f2a48; } .t-hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .t-hero__panels { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; } .t-panel { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 32px; border-radius: 16px; transition: filter 0.15s; } .t-panel:hover { filter: brightness(1.06); } .t-panel--primary { background: var(--t-navy); --c: #fff; } .t-panel--secondary { background: var(--t-pale); --c: var(--t-navy); } .t-panel__text { display: flex; flex-direction: column; gap: 10px; } .t-panel__pre { font-size: 13px; letter-spacing: 0.1em; } .t-panel--primary .t-panel__pre { opacity: 0.85; } .t-panel--secondary .t-panel__pre { color: var(--t-muted); } .t-panel__title { font-size: 26px; font-weight: 900; line-height: 1.4; } .t-panel__sub { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; } .t-panel--primary .t-panel__sub { color: #c9d6e6; } .t-panel__sub svg { transition: transform 0.15s; } .t-panel:hover .t-panel__sub svg { transform: translateX(3px); } .t-panel__arrow { display: none; flex-shrink: 0; } /* ---------- 安心材料の帯・電話カード（スマホ） ---------- */ .t-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 40px; min-height: 64px; padding: 12px var(--t-gutter); background: #fff; border-top: 1px solid var(--t-line); font-size: 14px; font-weight: 700; color: var(--t-ink); } .t-trust__item { display: flex; align-items: center; gap: 8px; } .t-trust__check { width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; background: var(--t-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } .t-telcard { margin: 12px 16px 0; padding: 12px 16px; display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--t-navy); border-radius: 14px; --c: var(--t-navy); } .t-telcard svg { flex-shrink: 0; } .t-telcard__body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; } .t-telcard__label, .t-telcard__note { font-size: 11px; font-weight: 700; color: var(--t-muted); } .t-telcard__num { font-family: var(--t-body); font-size: 24px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; } /* ---------- 会計ソフトの帯 ---------- */ .t-soft { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; min-height: 76px; padding: 10px var(--t-gutter); background: #fff; border-top: 1px solid var(--t-line); } .t-soft__list { display: flex; justify-content: center; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; } .t-soft__badge { display: flex; } .t-soft__img { display: block; width: 84px; height: 84px; } /* ---------- 共通セクション ---------- */ .t-section { padding: 64px var(--t-gutter) 0; } /* ---------- 業務のご案内 ---------- */ .t-services { display: flex; flex-direction: column; gap: 36px; } .t-svc-group { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; } .t-svc-group--audit { border-top: 1px solid #e3ddcf; padding-top: 32px; } .t-svc-group__label { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; font-weight: inherit; line-height: 1.4; } .t-svc-group__pre { font-size: 12px; letter-spacing: 0.14em; color: var(--t-gray); font-weight: 700; } .t-svc-group__name { font-size: 22px; font-weight: 900; color: var(--t-navy); } .t-svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .t-svc-grid__cell { display: flex; } .t-tax-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; --c: var(--t-ink); transition: box-shadow 0.15s; } .t-tax-card:hover, .t-audit-card:hover { box-shadow: 0 6px 18px rgba(1, 63, 115, 0.12); } .t-tax-card__media { display: block; width: 100%; height: 120px; object-fit: cover; } .t-tax-card__media--icon { display: flex; align-items: center; justify-content: center; background: var(--t-pale); } .t-tax-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; } .t-tax-card__title { font-size: 17px; font-weight: 900; color: var(--t-navy); } .t-tax-card__desc, .t-audit-card__desc { font-size: 12px; line-height: 1.7; color: var(--t-muted); } .t-tax-card__arrow { display: none; } .t-audit-card { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; background: #fff; border-radius: 16px; --c: var(--t-ink); transition: box-shadow 0.15s; } .t-audit-card__title { font-size: 16px; font-weight: 900; color: var(--t-navy); line-height: 1.5; } /* ---------- 事務所紹介 ---------- */ .t-about { margin-top: 64px; padding: 56px var(--t-gutter); background: #fff; display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 56px; align-items: center; } .t-about__img { display: block; width: 100%; height: 320px; object-fit: cover; border-radius: 20px; } .t-about__body { display: flex; flex-direction: column; gap: 18px; } .t-about__title { font-size: 28px; font-weight: 900; color: var(--t-navy); line-height: 1.5; } .t-about__text { font-family: var(--t-body); font-size: 14px; font-weight: 400; line-height: 2; color: #4b5563; } .t-textlink { position: relative; display: inline-flex; align-items: center; gap: 10px; width: max-content; padding-bottom: 4px; border-bottom: 2px solid currentColor; --c: var(--t-navy); font-size: 14px; font-weight: 900; } .t-textlink::after, .t-reviews__more::after { content: ""; position: absolute; inset: -10px -4px; } /* ---------- お客様の声 ---------- */ .t-reviews { display: flex; flex-direction: column; gap: 28px; } .t-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .t-rating { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #fff; border-radius: 14px; } .t-rating__g { flex-shrink: 0; } .t-rating__body { display: flex; flex-direction: column; gap: 2px; } .t-rating__label { font-size: 12px; font-weight: 700; color: var(--t-muted); } .t-rating__count { color: var(--t-ink); } .t-rating__score { display: flex; align-items: center; gap: 8px; } .t-rating__num { font-size: 20px; font-weight: 900; color: var(--t-ink); line-height: 1.3; } .t-rating__score .t-stars { gap: 2px; } .t-reviews__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .t-review { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .t-review__head { display: flex; align-items: center; gap: 12px; } .t-review__avatar { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--t-body); font-size: 16px; font-weight: 700; } .t-review__who { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; } .t-review__name { font-size: 14px; font-weight: 700; color: var(--t-ink); } .t-review__date { font-size: 12px; color: var(--t-gray); } .t-review__g { flex-shrink: 0; } .t-review .t-stars { gap: 2px; } .t-review__text { font-family: var(--t-body); font-size: 13px; font-weight: 400; line-height: 1.8; color: #374151; } .t-review__service { margin-top: auto; font-size: 11px; color: var(--t-gray); } .t-reviews__more { position: relative; display: block; padding: 6px; text-align: center; font-size: 13px; font-weight: 900; --c: var(--t-navy); } /* ---------- 新着情報 ---------- */ .t-news { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; } .t-news__list { background: #fff; border-radius: 16px; overflow: hidden; } .t-news__list > li + li { border-top: 1px solid var(--t-line); } .t-news__item { display: flex; align-items: center; gap: 20px; padding: 18px 24px; font-size: 14px; --c: var(--t-ink); } .t-news__item:hover .t-news__title { color: var(--t-navy); text-decoration: underline; } .t-news__date { width: 90px; flex-shrink: 0; font-family: var(--t-body); color: var(--t-gray); } .t-news__tag { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--t-pale); color: var(--t-navy); font-size: 11px; font-weight: 700; white-space: nowrap; } .t-news__title { font-weight: 700; } /* ================= 1279px 以下（サービス・クチコミの列を減らす） ================= */ @media (max-width: 1279px) { .t-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-about { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; } } /* ================= 1023px 以下 ================= */ @media (max-width: 1023px) { .t-hero { grid-template-columns: minmax(0, 1fr) 360px; height: auto; } .t-panel { padding: 0 24px; } .t-panel__title { font-size: 22px; } .t-svc-group { grid-template-columns: minmax(0, 1fr); gap: 16px; } .t-svc-group__label { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 0; } .t-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .t-about__img { height: 280px; } .t-about__title { font-size: 22px; } .t-news { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* ================= 899px 以下（ヒーローを縦積み：動画は横幅いっぱい 16:9、パネルはその下） ================= */ @media (max-width: 899px) { .t-hero { display: block; height: auto; } .t-hero__video { width: 100%; aspect-ratio: 16 / 9; } .t-hero__panels { gap: 10px; padding: 12px 12px 0; } .t-panel { flex: none; padding: 18px 20px; border-radius: 14px; } .t-panel__text { gap: 3px; } .t-panel__pre { font-size: 11px; } .t-panel__title { font-size: 20px; line-height: 1.5; } .t-panel__sub { display: none; } .t-panel__arrow { display: block; } } /* ================= 767px 以下（スマホ） ================= */ @media (max-width: 767px) { .t-eyebrow { font-size: 11px; } .t-heading { gap: 2px; } .t-heading--center { gap: 4px; } .t-heading__title, .t-heading__title--sm { font-size: 24px; } .t-trust { justify-content: flex-start; gap: 8px 16px; min-height: 0; padding: 14px 20px; border-top: 0; border-bottom: 1px solid var(--t-line); font-size: 12px; } .t-trust__item { gap: 6px; } .t-trust__check { width: 18px; height: 18px; background-size: 10px; } .t-soft { display: block; min-height: 0; padding: 12px 16px 0; background: transparent; border: 0; } .t-soft__list { gap: 20px; } .t-soft__img { width: 60px; height: 60px; } .t-section { padding-top: 32px; } .t-services { padding-top: 28px; gap: 14px; } .t-svc-group { gap: 14px; } .t-svc-group--audit { border-top: 0; padding-top: 6px; } .t-svc-group__label { gap: 0; } .t-svc-group__pre, .t-svc-group__name { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--t-gray); } .t-svc-grid { gap: 8px; } .t-svc-grid--tax { grid-template-columns: minmax(0, 1fr); } .t-tax-card { flex-direction: row; align-items: center; gap: 14px; border-radius: 14px; } .t-tax-card__media { width: 96px; height: 72px; flex-shrink: 0; } .t-tax-card__media--icon svg { width: 30px; height: 30px; } .t-tax-card__body { flex-grow: 1; gap: 2px; padding: 0; } .t-tax-card__title { font-size: 16px; } .t-tax-card__desc { line-height: 1.5; } .t-tax-card__arrow { display: block; flex-shrink: 0; margin-right: 14px; } .t-audit-card { padding: 14px; border-radius: 14px; } .t-audit-card__title { font-size: 14px; } .t-audit-card__desc { display: none; } .t-about { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; padding: 28px 16px; } .t-about__img { height: auto; aspect-ratio: 3 / 2; border-radius: 14px; } .t-about__body { gap: 12px; } .t-about__title { font-size: 20px; } .t-about__text { font-size: 13px; line-height: 1.9; } .t-reviews { gap: 12px; } .t-reviews__head { align-items: center; flex-wrap: nowrap; } .t-rating { gap: 8px; padding: 8px 12px; border-radius: 12px; } .t-rating__g { width: 22px; height: 22px; } .t-rating__body.t-sp-only { display: flex; } .t-rating__body.t-sp-only .t-rating__num { font-size: 16px; line-height: 1; } .t-rating__body.t-sp-only .t-rating__count { font-size: 11px; color: var(--t-gray); } .t-rating__body.t-sp-only .t-stars { margin-top: 2px; } .t-reviews__list { grid-template-columns: minmax(0, 1fr); gap: 12px; } /* モックどおりスマホは1件目と4件目の2枚だけ（残りは「クチコミをもっと見る」から） */ .t-review:nth-child(2), .t-review:nth-child(3) { display: none; } .t-review { gap: 10px; padding: 16px; border-radius: 14px; box-shadow: none; } .t-review__head { gap: 10px; } .t-review__avatar { width: 36px; height: 36px; font-size: 15px; } .t-review__name { font-family: var(--t-body); font-size: 13px; } .t-review__date { font-size: 11px; } .t-review__g { width: 16px; height: 16px; } .t-review .t-stars svg { width: 14px; height: 14px; } .t-review__service { display: none; } .t-news { gap: 12px; } .t-news__item { flex-wrap: wrap; gap: 6px 12px; padding: 14px 16px; } .t-news__date { width: auto; font-size: 13px; } .t-news__title { flex-basis: 100%; line-height: 1.6; } }