/** * 株式会社フジイ ブランドサイト * ------------------------------------------------------------ * 見た目は Claude Design カンプ相当を維持。 * ブレークポイント: 768px（旧 isDesktop / isMobile と同一） */ /* ========================================================================== 1. カスタムプロパティ ========================================================================== */ :root { --color-text: #2a2a26; --color-text-muted: #5a5a52; --color-text-soft: #7a766d; --color-text-faint: #9a968d; --color-bg: #ffffff; --color-bg-warm: #f7f5f1; --color-bg-hero: #edeae3; --color-border: #ece9e3; --color-border-strong: #d8d4cb; --color-accent: #3e5656; --color-factory: #163d67; --color-shop: #609ca8; --font-sans: "Noto Sans JP", "Hiragino Sans", sans-serif; --font-serif: "Noto Serif JP", serif; --font-latin: "Manrope", "Noto Sans JP", sans-serif; --radius-sm: 6px; --radius-md: 8px; --space-section-x: 48px; --max-wide: 1600px; --max-about: 1680px; --bp-desktop: 768px; --header-offset: 73px; --swiper-theme-color: #3e5656; } /* ========================================================================== 2. リセット / ベース ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } の空状態を再現） ========================================================================== */ .media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: rgba(127, 127, 127, 0.08); color: var(--color-text); } .media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* display:none だと lazy 読込が走らないため、透明度で待機する */ opacity: 0; } .media picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .media.is-loaded .media__img { opacity: 1; } .media.is-loaded .media__placeholder { display: none; } .media__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; box-sizing: border-box; pointer-events: none; } .media__placeholder::before { content: ""; position: absolute; inset: 0; border: 1.5px dashed currentColor; opacity: 0.35; pointer-events: none; } .media__label { position: relative; max-width: 90%; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.75; line-height: 1.4; } /* ========================================================================== 5. ヘッダー ========================================================================== */ .site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--space-section-x); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; background: var(--color-bg); } .brand { display: flex; align-items: center; color: var(--color-text); } .brand__logo { display: block; width: auto; height: 32px; } .header-desktop { display: none; } .nav-global { display: flex; flex-wrap: wrap; gap: 20px 32px; min-width: 0; font-weight: 400; } .nav-global a { color: var(--color-text); font-size: 14px; white-space: nowrap; } .nav-global a[href="#top"] { font-family: var(--font-latin); font-size: 13px; letter-spacing: 0.06em; } .header-ctas { display: flex; gap: 10px; flex-shrink: 0; } /* CTA ボタン（ヘッダー／フッタ共用の見た目） */ .cta { display: flex; align-items: center; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 12px; line-height: 1.4; } .cta--factory { background: var(--color-factory); } .cta--shop { background: var(--color-shop); } .menu-toggle { background: none; border: none; padding: 8px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; } .menu-toggle__bar { width: 24px; height: 2px; background: var(--color-text); display: block; } /* モバイルメニュー */ .nav-mobile { display: none; position: fixed; inset: 0; top: var(--header-offset); background: var(--color-bg); z-index: 40; padding: 8px 24px 24px; overflow-y: auto; } .nav-mobile.is-open { display: block; } .nav-mobile__link { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: 15px; } .nav-mobile__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .nav-mobile__ctas .cta { padding: 14px 16px; font-size: 13px; } body.is-menu-open { overflow: hidden; } /* ========================================================================== 6. ヒーロー ========================================================================== */ .hero { position: relative; width: 100%; height: 80vh; height: 80dvh; min-height: 480px; max-height: 960px; overflow: hidden; background: var(--color-bg-hero); } @media (min-width: 768px) { .hero { height: max(720px, 85vh); height: max(720px, 85dvh); max-height: none; } } .hero .swiper { width: 100%; height: 100%; } .hero__slide { position: relative; width: 100%; height: 100%; } .hero__media { position: absolute; inset: 0; } .hero__scrim { position: absolute; inset: 0; /* 白文字の可読性のため、左から暗いグラデーション */ background: linear-gradient( 100deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0) 68% ); pointer-events: none; } .hero__copy { position: absolute; left: clamp(24px, 6vw, 80px); top: 0; height: 100%; display: flex; align-items: center; max-width: min(560px, 88%); pointer-events: none; color: #fff; } .hero__copy-inner { display: flex; flex-direction: column; gap: clamp(16px, 2.5vw, 28px); } .hero__title { font-family: var(--font-serif); font-size: clamp(24px, 3.2vw, 44px); line-height: 1.55; font-weight: 600; letter-spacing: 0.03em; color: #fff; white-space: nowrap; } .hero__lead { font-family: var(--font-sans); font-size: clamp(13px, 1.35vw, 16px); font-weight: 400; line-height: 1.9; letter-spacing: 0.04em; color: #fff; } @media (max-width: 767px) { .hero .swiper-button-prev, .hero .swiper-button-next { display: none; } } /* ========================================================================== 7. About ========================================================================== */ .about { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(32px, 5vw, 64px); padding: clamp(40px, 10vw, 88px) clamp(24px, 6vw, 64px); max-width: var(--max-about); margin: 0 auto; align-items: start; } .about__title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; letter-spacing: 0.03em; margin: 0 0 20px; } .about__text { font-size: 13px; line-height: 2.1; font-weight: 300; color: var(--color-text-muted); margin: 0 0 28px; } .btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-border-strong); color: var(--color-text); padding: 10px 22px; border-radius: var(--radius-sm); font-size: 13px; } .about__gallery { display: block; width: 100%; min-width: 0; overflow: hidden; pointer-events: none; mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 6%, #000 94%, transparent 100% ); } .about__gallery-track { display: flex; align-items: stretch; gap: 14px; width: max-content; animation: about-gallery-scroll 28s linear infinite; } .about__gallery-item { position: relative; flex: 0 0 auto; width: min(72vw, 280px); aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; height: auto; } @keyframes about-gallery-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } } .about__gallery-item .media { position: absolute; inset: 0; } @media (max-width: 767px) { .about { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 48px; } .about__gallery { mask-image: linear-gradient( 90deg, transparent 0%, #000 4%, #000 96%, transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 4%, #000 96%, transparent 100% ); } .about__gallery-item { width: min(68vw, 240px); } } @media (min-width: 768px) { .about__gallery-item { width: min(46vw, 320px); } } @media (prefers-reduced-motion: reduce) { .about__gallery { mask-image: none; -webkit-mask-image: none; } .about__gallery-track { animation: none; } } /* ========================================================================== 8. コンテンツバナー（画像のみ） ========================================================================== */ .banners { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 8px var(--space-section-x) 56px; max-width: var(--max-wide); margin: 0 auto; } .banner { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 8; } .banner__media { position: absolute; inset: 0; } @media (max-width: 767px) { .banners { grid-template-columns: 1fr; gap: 16px; padding: 8px 20px 48px; } .banner { aspect-ratio: 2 / 1; border-radius: var(--radius-sm); } } /* ========================================================================== 9. シリーズ ========================================================================== */ .series { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title more" "note note" "viewport viewport"; align-items: baseline; column-gap: 16px; row-gap: 24px; padding: 8px var(--space-section-x) 64px; max-width: var(--max-wide); margin: 0 auto; } .series__title { grid-area: title; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-accent); margin: 0; } .series__more { grid-area: more; font-size: 13px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; justify-self: end; } .series__note { grid-area: note; margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text-muted); } .series__viewport { grid-area: viewport; position: relative; width: 100%; min-width: 0; } .series__list { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .series__list::-webkit-scrollbar { display: none; } .series__item { flex: 0 0 220px; scroll-snap-align: start; } .series__card { display: block; color: inherit; text-decoration: none; } .series__card:hover .series__caption, .series__card:focus-visible .series__caption { color: var(--color-accent); } .series__nav { position: absolute; top: 36%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border-strong); border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--color-accent); font-size: 16px; cursor: pointer; box-shadow: 0 2px 10px rgba(42, 42, 38, 0.08); transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease; } .series__nav:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .series__nav:disabled { opacity: 0.35; cursor: default; } .series__nav--prev { left: 0; } .series__nav--next { right: 0; } .series__thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; } .series__thumb .media { position: absolute; inset: 0; } .series__caption { margin-top: 12px; font-size: 13px; text-align: center; color: var(--color-text); } @media (max-width: 767px) { .series { grid-template-columns: 1fr; grid-template-areas: "title" "note" "viewport" "more"; row-gap: 16px; padding: 8px 20px 56px; } .series__more { justify-self: start; margin-top: 4px; } .series__nav--prev { left: 4px; } .series__nav--next { right: 4px; } } /* ========================================================================== 10. ショールーム / 採用 ========================================================================== */ .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; padding: 8px var(--space-section-x) 64px; max-width: var(--max-wide); margin: 0 auto; } @media (max-width: 767px) { .panels { grid-template-columns: 1fr; gap: 16px; padding: 8px 20px 56px; } .panel { grid-template-columns: 1fr; } .panel__body { padding: 24px 20px; } .panel__media { min-height: 200px; border-radius: 0; } } .panel { background: var(--color-bg-warm); border-radius: var(--radius-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; overflow: hidden; } .panel__body { padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .panel__title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.02em; } .panel__text { font-size: 13px; line-height: 1.8; color: var(--color-text-muted); } .panel__btn { display: inline-flex; width: fit-content; align-items: center; gap: 8px; border: 1px solid var(--color-border-strong); color: var(--color-text); padding: 9px 20px; border-radius: var(--radius-sm); font-size: 13px; } .panel__media { position: relative; height: 100%; min-height: 180px; overflow: hidden; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .panel__media .media { position: absolute; inset: 0; } /* ========================================================================== 11. お知らせ ========================================================================== */ .news { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding: 8px var(--space-section-x) 72px; max-width: var(--max-wide); margin: 0 auto; align-items: start; } .news__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .news__title { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: 0.02em; } .news__more { font-size: 13px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; } .news__list { border-top: 1px solid var(--color-border); } .news__item { display: flex; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; } .news__date { color: var(--color-text-faint); width: 90px; flex-shrink: 0; font-family: var(--font-latin); } .news__cat { color: var(--color-accent); width: 100px; flex-shrink: 0; } .news__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; } .news__media .media { position: absolute; inset: 0; } .news__text { flex: 1; min-width: 0; line-height: 1.6; } @media (max-width: 767px) { .news { grid-template-columns: 1fr; gap: 28px; padding: 8px 20px 56px; } .news__item { flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 0; } .news__date { width: auto; } .news__cat { width: auto; } .news__text { flex: 1 1 100%; order: 3; } .news__media { order: -1; } } /* ========================================================================== 11b. デジタルカタログバナー ========================================================================== */ .catalog-banner { padding: 8px var(--space-section-x) 72px; max-width: var(--max-wide); margin: 0 auto; } .catalog-banner__link { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding: 24px clamp(24px, 4vw, 40px); background: linear-gradient(135deg, #5f7f8f 0%, #7a9aad 55%, #8eafbd 100%); border-radius: var(--radius-md); color: #fff; transition: background 0.25s ease, transform 0.25s ease; } .catalog-banner__link:hover { background: linear-gradient(135deg, #547483 0%, #6e8f9f 55%, #7fa3b1 100%); transform: translateY(-1px); } .catalog-banner__link:hover .catalog-banner__cta { background: #fff; color: #5f7f8f; } .catalog-banner__en { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; } .catalog-banner__title { margin: 0; font-family: var(--font-serif); font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; letter-spacing: 0.04em; color: #fff; } .catalog-banner__cta { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 48px; padding: 12px 28px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.12); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } @media (max-width: 767px) { .catalog-banner { padding: 8px 20px 56px; } .catalog-banner__link { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; padding: 28px 20px; } .catalog-banner__cta { width: 100%; } } /* ========================================================================== 12. フッター（PC / SP を CSS で切替） ========================================================================== */ .footer-desktop { display: none; border-top: 1px solid var(--color-border); padding: 48px var(--space-section-x) 0; } .footer-desktop__grid { max-width: var(--max-wide); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 0.85fr) 1.1fr; gap: 24px; padding-bottom: 40px; } .footer-brand { display: flex; align-items: center; margin-bottom: 16px; } .footer-brand__logo { display: block; width: auto; height: 28px; } /* SP濃色フッタ向け：ロゴを明るく見せる */ .footer-brand__logo--on-dark { filter: brightness(1.35); } .footer-address { font-style: normal; font-size: 12px; line-height: 1.9; color: var(--color-text-soft); margin-bottom: 16px; } .social { display: flex; gap: 10px; } .social__link { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: flex; align-items: center; justify-content: center; } .footer-nav__heading { font-size: 13px; margin: 0 0 14px; font-weight: 400; } .footer-nav ul { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--color-text-soft); } .footer-nav a { color: var(--color-text-soft); } .footer-desktop__ctas { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .footer-desktop__ctas .cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 14px 16px 14px 18px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: 0.02em; transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease; } .footer-desktop__ctas .cta::after { content: "→"; flex-shrink: 0; font-size: 15px; line-height: 1; opacity: 0.9; } .footer-desktop__ctas .cta:hover { transform: translateY(-1px); filter: brightness(1.08); } .footer-desktop__ctas .cta--factory:hover { background: #123155; filter: none; } .footer-desktop__ctas .cta--shop:hover { background: #508a96; filter: none; } .footer-desktop__bar { border-top: 1px solid var(--color-border); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--color-text-soft); } .footer-desktop__legal { display: flex; gap: 20px; } .footer-desktop__legal a { color: var(--color-text-soft); } /* SP フッター */ .footer-mobile { display: block; background: var(--color-accent); color: #fff; padding: 40px 24px 0; } .footer-mobile .footer-brand { margin-bottom: 28px; } .footer-mobile .footer-brand__logo { height: 30px; } .footer-mobile__nav a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-size: 14px; } /* SP フッターは濃色背景のため、.link:hover のアクセント色を使わない */ .footer-mobile a.link:hover, .footer-mobile a.link:focus, .footer-mobile a.link:active, .footer-mobile__nav a:hover, .footer-mobile__nav a:focus, .footer-mobile__nav a:active, .footer-mobile__legal a:hover, .footer-mobile__legal a:focus, .footer-mobile__legal a:active, .footer-mobile__cta.link:hover, .footer-mobile__cta.link:focus, .footer-mobile__cta.link:active { color: #fff; } .footer-mobile__ctas { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; } .footer-mobile__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 16px 20px; border-radius: var(--radius-md); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45; transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .footer-mobile__cta:hover { transform: translateY(-1px); } .footer-mobile__cta--outline { background: var(--color-factory); border: 1.5px solid transparent; } .footer-mobile__cta--outline:hover { background: #123155; } .footer-mobile__cta--shop { background: var(--color-shop); border: 1.5px solid transparent; } .footer-mobile__cta--shop:hover { background: #508a96; } .footer-mobile .social { justify-content: center; gap: 16px; padding-bottom: 28px; } .footer-mobile .social__link { width: 40px; height: 40px; border-color: rgba(255, 255, 255, 0.6); } .footer-mobile__bar { border-top: 1px solid rgba(255, 255, 255, 0.25); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.8); } .footer-mobile__legal { display: flex; gap: 16px; } .footer-mobile__legal a { color: rgba(255, 255, 255, 0.8); } /* ========================================================================== 13. デスクトップ（768px〜）— 旧 isDesktop 相当 ========================================================================== */ @media (min-width: 768px) { /* ロゴ左／ナビ＋CTAを右寄せ */ .header-desktop { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px 28px; flex: 1; min-width: 0; margin-left: auto; } .nav-global { justify-content: flex-end; margin-left: auto; } .menu-toggle { display: none; } .nav-mobile, .nav-mobile.is-open { display: none; } /* PCも横スクロール：約4件見える幅で、残りは右へ繰り出し */ .series__list { gap: 20px; } .series__item { flex: 0 0 calc((100% - 60px) / 4); } .footer-desktop { display: block; } .footer-mobile { display: none; } } /* ========================================================================== 14. お問い合わせ一覧ページ ========================================================================== */ :root { --color-contact-navy: #1a3a6e; --color-contact-beige: #f3efe6; --color-contact-circle: rgba(160, 200, 230, 0.35); } /* ページヒーローバナー（タイトルのみ） */ .page-hero { border-bottom: 1px solid var(--color-border); background: #fff; } .page-hero__inner { max-width: var(--max-wide); margin: 0 auto; } .page-hero__title-area { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 160px; padding: 40px clamp(24px, 5vw, 64px); background: radial-gradient(circle at 12% 30%, var(--color-contact-circle) 0%, transparent 42%), radial-gradient(circle at 55% 75%, var(--color-contact-circle) 0%, transparent 38%), radial-gradient(circle at 80% 20%, rgba(180, 210, 235, 0.25) 0%, transparent 35%), linear-gradient(135deg, #f7fbfe 0%, #ffffff 55%, #eef6fb 100%); overflow: hidden; } .page-hero__title-area::before, .page-hero__title-area::after { content: ""; position: absolute; border-radius: 50%; background: var(--color-contact-circle); pointer-events: none; } .page-hero__title-area::before { width: 180px; height: 180px; top: -40px; left: -30px; } .page-hero__title-area::after { width: 120px; height: 120px; bottom: -30px; right: 18%; } .page-hero__title { position: relative; z-index: 1; margin: 0; font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; color: var(--color-contact-navy); letter-spacing: 0.06em; line-height: 1.3; } .page-hero__en { position: relative; z-index: 1; margin: 8px 0 0; font-size: 14px; font-weight: 500; color: #9aa3b0; letter-spacing: 0.08em; } /* パンくず */ .breadcrumb { max-width: var(--max-wide); margin: 0 auto; padding: 14px clamp(24px, 5vw, 64px); background: #fff; } .breadcrumb__list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--color-text-soft); list-style: none; margin: 0; padding: 0; } .breadcrumb__list li { display: inline-flex; align-items: center; list-style: none; } .breadcrumb__list li:not(:last-child)::after { content: ">"; margin-left: 8px; color: var(--color-text-faint); } .breadcrumb__list a { color: var(--color-text-soft); } .breadcrumb__list a:hover { color: var(--color-contact-navy); } /* 一覧セクション */ .contact-list { background: var(--color-contact-beige); padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 64px) clamp(64px, 10vw, 100px); } .contact-list__intro { text-align: center; max-width: 720px; margin: 0 auto 40px; } .contact-list__heading { margin: 0 0 16px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--color-contact-navy); letter-spacing: 0.04em; line-height: 1.5; } .contact-list__lead { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.9; color: var(--color-text-muted); } .contact-list__grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 960px; margin: 0 auto; } .contact-card { display: block; background: #fff; border: 1px solid #e8e4dc; border-radius: 4px; padding: 28px 28px 32px; box-shadow: 0 2px 10px rgba(40, 50, 70, 0.06); color: var(--color-text); transition: box-shadow 0.2s ease, transform 0.2s ease; } .contact-card:hover { color: var(--color-text); box-shadow: 0 6px 20px rgba(40, 50, 70, 0.12); transform: translateY(-2px); } .contact-card__title { display: block; margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--color-contact-navy); text-decoration: underline; text-underline-offset: 4px; letter-spacing: 0.04em; } .contact-card__text { display: block; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.9; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(90, 90, 82, 0.35); } @media (min-width: 768px) { .page-hero__title-area { min-height: 180px; } .contact-list__grid { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ========================================================================== 15. ショールームページ ========================================================================== */ .showroom-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 20px clamp(24px, 5vw, 64px); background: #fff; border-bottom: 1px solid var(--color-border); } .showroom-jump__link { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 10px 18px; border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: 13px; color: var(--color-text); background: #fff; } .showroom-jump__link:hover { border-color: var(--color-accent); color: var(--color-accent); } .showroom-page { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px) clamp(64px, 10vw, 96px); } .showroom-block { padding-bottom: clamp(48px, 8vw, 80px); margin-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--color-border); } .showroom-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .showroom-block__title, .showroom-block__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 0 0 24px; padding-bottom: 12px; border-bottom: 2px solid var(--color-accent); } .showroom-block__sub { margin-top: 40px; border-bottom-color: var(--color-border-strong); border-bottom-width: 1px; } .showroom-block__title-jp { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--color-accent); letter-spacing: 0.04em; } .showroom-block__sub .showroom-block__title-jp { font-size: clamp(18px, 2vw, 22px); } .showroom-block__title-en { font-size: 13px; font-weight: 500; color: var(--color-text-faint); letter-spacing: 0.06em; } .showroom-block p, .showroom-block li { font-size: 14px; line-height: 1.9; color: var(--color-text-muted); } .showroom-block ul { margin: 0 0 16px; padding-left: 1.2em; list-style: disc; } .showroom-block h4 { margin: 16px 0 8px; font-size: 15px; font-weight: 700; color: var(--color-text); } .showroom-block__lead-row { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; margin-bottom: 16px; } .showroom-block__photo img, .showroom-block__full img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); } .showroom-block__photo--round img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; max-width: 360px; margin: 0 auto; } .showroom-block__full { margin: 20px 0 28px; } .showroom-block__full--shadow img { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .showroom-block__concept-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--color-accent); } .showroom-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; } .showroom-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } .showroom-access { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 8px; } .showroom-access__map { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: #e8e8e8; } .showroom-access__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .showroom-access__info figure { margin-top: 16px; } .showroom-access__info img { max-width: 280px; width: 100%; height: auto; border-radius: var(--radius-sm); } .showroom-cal__note { margin-bottom: 12px; } .showroom-cal__notice { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #e0a8a8; background: #fff8f8; color: #6a3a3a; font-size: 13px; line-height: 1.8; border-radius: var(--radius-sm); } .showroom-cal__embed { position: relative; width: 100%; overflow: hidden; border: 1px solid #ccc; border-radius: var(--radius-sm); background: #fff; } .showroom-cal__embed iframe { display: block; width: 100%; min-height: 520px; height: 600px; border: 0; } .showroom-cta__notice { margin: 28px 0 0; padding: 14px 16px; border: 1px solid #e0a8a8; background: #fff8f8; color: #6a3a3a; font-size: 14px; line-height: 1.8; border-radius: var(--radius-sm); } .showroom-cta { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; } .showroom-cta__tel, .showroom-cta__mail { display: flex; align-items: center; justify-content: center; padding: 16px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; text-align: center; } .showroom-cta__tel { border: 2px solid var(--color-accent); color: var(--color-accent); background: #fff; } .showroom-cta__tel:hover { background: var(--color-accent); color: #fff; } .showroom-cta__mail { background: #6ba3c9; color: #fff; } .showroom-cta__mail:hover { background: #5a92b8; color: #fff; } @media (min-width: 768px) { .showroom-block__lead-row { grid-template-columns: 1.2fr 0.8fr; gap: 32px; } .showroom-gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; } .showroom-access { grid-template-columns: 1fr 1fr; gap: 28px; } .showroom-access__map { aspect-ratio: 1 / 1; } .showroom-cta { grid-template-columns: 1fr 1fr; gap: 16px; } } /* ========================================================================== 16. 会社概要ページ ========================================================================== */ .company-page { max-width: 960px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px) clamp(64px, 10vw, 96px); } .company-section { margin-bottom: clamp(40px, 6vw, 64px); padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--color-border); } .company-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .company-section__title { margin: 0 0 24px; padding-bottom: 12px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; color: var(--color-accent); letter-spacing: 0.06em; border-bottom: 2px solid var(--color-accent); } .company-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.8; } .company-table th, .company-table td { padding: 14px 16px; border: 1px solid var(--color-border); vertical-align: top; text-align: left; } .company-table th { width: 28%; min-width: 7em; background: #f3f1ec; font-weight: 500; color: var(--color-text); white-space: nowrap; } .company-table td { background: #fff; color: var(--color-text-muted); } .company-table__map { display: inline-block; margin-left: 10px; padding: 2px 12px; border: 1px solid var(--color-accent); border-radius: 999px; font-size: 12px; color: var(--color-accent); white-space: nowrap; } .company-table__map:hover { background: var(--color-accent); color: #fff; } .company-table--history th { width: 22%; text-align: center; } .company-philosophy { text-align: center; padding: 24px 16px 8px; } .company-philosophy__word { margin: 0 0 20px; font-size: clamp(36px, 6vw, 52px); font-weight: 700; letter-spacing: 0.2em; color: var(--color-accent); line-height: 1.2; } .company-philosophy__word::before { content: "【"; margin-right: 0.15em; font-weight: 500; } .company-philosophy__word::after { content: "】"; margin-left: 0.15em; font-weight: 500; } .company-philosophy__text { margin: 0 auto; max-width: 36em; font-size: 14px; line-height: 2; color: var(--color-text-muted); } .company-message__lead { margin: 0 0 28px; font-size: 14px; line-height: 2; color: var(--color-text-muted); } .company-message { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .company-message__portrait { margin: 0; text-align: center; } .company-message__portrait img, .company-message__photo { display: block; width: 180px; height: auto; margin: 0 auto 12px; border-radius: 2px; opacity: 1; position: static; } .company-message__role { display: block; font-size: 12px; color: var(--color-text-soft); margin-bottom: 4px; } .company-message__name { display: block; font-size: 16px; font-weight: 700; color: var(--color-text); letter-spacing: 0.06em; } .company-message__body { font-size: 14px; line-height: 2; color: var(--color-text-muted); } .company-message__body strong { color: var(--color-accent); font-weight: 700; } @media (min-width: 768px) { .company-message { grid-template-columns: 200px 1fr; gap: 36px; } .company-message__portrait { text-align: left; } .company-message__portrait img { margin: 0 0 12px; } } @media (max-width: 600px) { .company-table, .company-table tbody, .company-table tr, .company-table th, .company-table td { display: block; width: 100%; } .company-table tr { margin-bottom: 8px; border: 1px solid var(--color-border); } .company-table th, .company-table td { border: 0; } .company-table th { width: 100%; border-bottom: 1px solid var(--color-border); } } /* ========================================================================== 17. プライバシーポリシー ========================================================================== */ .privacy-page { max-width: 960px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px) clamp(64px, 10vw, 96px); } .privacy-page__lead { margin: 0 0 36px; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); } .privacy-block { margin-bottom: 28px; } .privacy-block__title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; background: #f3f1ec; font-size: 15px; font-weight: 700; color: var(--color-text); letter-spacing: 0.04em; line-height: 1.5; } .privacy-block__num { flex-shrink: 0; font-family: var(--font-latin); font-weight: 600; color: var(--color-accent); } .privacy-block__num::after { content: "｜"; margin-left: 10px; color: var(--color-text-faint); font-weight: 400; } .privacy-block p { margin: 0; padding: 0 4px; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); } .privacy-page__sign { margin: 48px 0 0; text-align: right; font-size: 14px; line-height: 1.9; color: var(--color-text); } /* ========================================================================== 18. アクセスページ ========================================================================== */ .access-page { max-width: 1080px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px) clamp(64px, 10vw, 96px); } .access-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } .access-map { width: 100%; } .access-map iframe { display: block; width: 100%; height: 360px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #e8e8e8; } .access-map__links { margin: 12px 0 0; font-size: 13px; } .access-info__name { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--color-text); letter-spacing: 0.04em; } .access-info p { margin: 0 0 20px; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); } .access-info__heading { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--color-accent); letter-spacing: 0.04em; } @media (min-width: 768px) { .access-layout { grid-template-columns: 1.2fr 0.8fr; gap: 40px; } .access-map iframe { height: 420px; } } /* ========================================================================== 19. お知らせ詳細 ========================================================================== */ .news-detail { max-width: 800px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 48px) clamp(64px, 10vw, 96px); } .news-detail__header { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--color-border); } .news-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; } .news-detail__date { font-size: 13px; color: var(--color-text-faint); letter-spacing: 0.04em; } .news-detail__cat { font-size: 12px; color: var(--color-accent); letter-spacing: 0.04em; } .news-detail__title { margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1.5; letter-spacing: 0.04em; color: var(--color-text); } .news-detail__body { font-size: 14px; line-height: 2; color: var(--color-text-muted); } .news-detail__body p { margin: 0 0 1.5em; } .news-detail__period { padding: 20px 24px; background: var(--color-bg-warm); border-left: 3px solid var(--color-accent); color: var(--color-text); } .news-detail__period strong { display: inline-block; margin-bottom: 4px; font-size: 13px; color: var(--color-accent); letter-spacing: 0.06em; } .news-detail__footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--color-border); } .news__item--link { color: inherit; transition: background 0.2s ease; } .news__item--link:hover { background: var(--color-bg-warm); } .news__item--link .news__text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease; } .news__item--link:hover .news__text { text-decoration-color: currentColor; } /* ========================================================================== 20. お問い合わせ完了 ========================================================================== */ .thanks-page { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 48px) clamp(72px, 12vw, 120px); } .thanks-page__inner { text-align: center; } .thanks-page__en { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); } .thanks-page__title { margin: 0 0 20px; font-family: var(--font-serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600; letter-spacing: 0.04em; line-height: 1.6; color: var(--color-text); } .thanks-page__text { margin: 0 0 36px; font-size: 14px; line-height: 2; color: var(--color-text-muted); } /* タブレット未満でもバナー左右固定は旧実装を維持 （見た目変更禁止のため、ここでの縦積みは行わない） */ /* ---- お問い合わせフォーム詳細（CF7 本文を正とする） ---- */ .contact-form-page { background: var(--color-contact-beige, #f3efe6); padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px) clamp(64px, 10vw, 100px); box-sizing: border-box; } .contact-form-page__inner { max-width: 760px; margin: 0 auto; } .contact-form-page__panel { background: #fff; border: 1px solid #e4dfd4; padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px) clamp(32px, 5vw, 48px); box-shadow: 0 2px 14px rgba(40, 48, 60, 0.04); } .contact-form-page__panel > *:first-child { margin-top: 0; } .contact-form-page__back { margin: 28px 0 0; text-align: center; } .contact-form-page__back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-contact-navy, var(--color-accent)); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .contact-form-page__back-link:hover { border-bottom-color: currentColor; } /* ---- CF7 共通 ---- */ .contact-form-page .wpcf7 { margin: 0; } .contact-form-page .wpcf7-form { margin: 0; } .contact-form-page .wpcf7-form p { margin: 0 0 1em; font-size: 14px; line-height: 1.85; color: var(--color-text); } .contact-form-page .wpcf7-form .wpcf7-form-control-wrap { display: inline-block; max-width: 100%; vertical-align: middle; } .contact-form-page .wpcf7-form td .wpcf7-form-control-wrap { display: block; max-width: 100%; } .contact-form-page .wpcf7-form input[type="text"], .contact-form-page .wpcf7-form input[type="email"], .contact-form-page .wpcf7-form input[type="tel"], .contact-form-page .wpcf7-form input[type="url"], .contact-form-page .wpcf7-form input[type="number"], .contact-form-page .wpcf7-form input[type="date"], .contact-form-page .wpcf7-form input[type="password"], .contact-form-page .wpcf7-form textarea, .contact-form-page .wpcf7-form select, .contact-form-page .wpcf7-form .text1, .contact-form-page .wpcf7-form .text2, .contact-form-page .wpcf7-form .text3 { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px; font: inherit; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--color-text); background: #faf9f7; border: 1px solid #d8d2c6; border-radius: 2px; appearance: none; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .contact-form-page .wpcf7-form .text3, .contact-form-page .wpcf7-form input[name="zip1"], .contact-form-page .wpcf7-form input[name="zip2"] { width: auto; min-width: 4.5em; max-width: 7em; display: inline-block; } .contact-form-page .wpcf7-form textarea { min-height: 120px; resize: vertical; } .contact-form-page .wpcf7-form select { background-image: linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%), linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px; } .contact-form-page .wpcf7-form input:focus, .contact-form-page .wpcf7-form textarea:focus, .contact-form-page .wpcf7-form select:focus { outline: none; border-color: var(--color-accent); background: #fff; box-shadow: 0 0 0 3px rgba(62, 86, 86, 0.12); } .contact-form-page .wpcf7-form input.wpcf7-not-valid, .contact-form-page .wpcf7-form textarea.wpcf7-not-valid, .contact-form-page .wpcf7-form select.wpcf7-not-valid { border-color: #c62828; } .contact-form-page .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12px; color: #c62828; } .contact-form-page .wpcf7-form .wpcf7-radio, .contact-form-page .wpcf7-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 10px 18px; } .contact-form-page .wpcf7-form .wpcf7-list-item { margin: 0; display: inline-flex; align-items: flex-start; gap: 8px; } .contact-form-page .wpcf7-form input[type="checkbox"], .contact-form-page .wpcf7-form input[type="radio"] { width: 1.1em; height: 1.1em; margin: 0.15em 0 0; flex-shrink: 0; accent-color: var(--color-accent); } /* 必須バッジ（白字＋赤背景／th の赤文字ルールより優先） */ .contact-form-page .fujii-req, .contact-form-page #contact_table th .fujii-req, .contact-form-page #contact_table th span.fujii-req, .contact-form-page .showroom_contact_wrap th .fujii-req, .contact-form-page .txt_contact .fujii-req, .contact-form-page .new_box .fujii-req { display: inline-block; margin-left: 6px; padding: 2px 8px 3px; vertical-align: middle; font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: 0.06em; color: #ffffff !important; background: #c62828 !important; border: 0; border-radius: 2px; -webkit-text-fill-color: #ffffff; } .contact-form-page .txt_contact .fujii-req, .contact-form-page .new_box .fujii-req { margin-left: 0; margin-right: 4px; } /* 送信ボタン（画像なし） */ .contact-form-page .fujii-submit, .contact-form-page #btn_send .fujii-submit, .contact-form-page #btn_send input[type="submit"], .contact-form-page .wpcf7-form input[type="submit"], .contact-form-page .wpcf7-form input[type="submit"].fujii-submit { display: inline-flex; align-items: center; justify-content: center; min-width: min(100%, 280px); margin: 0 auto; padding: 16px 40px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.12em; color: #fff !important; background: var(--color-contact-navy, #1a3a6e) !important; border: 0; border-radius: 2px; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; appearance: none; -webkit-appearance: none; } .contact-form-page .fujii-submit:hover, .contact-form-page #btn_send input[type="submit"]:hover, .contact-form-page .wpcf7-form input[type="submit"]:hover { background: #132c54 !important; } .contact-form-page #btn_send { margin-top: 32px; text-align: center; } /* 画像送信は非表示（置換漏れ対策） */ .contact-form-page #btn_send input[type="image"], .contact-form-page .wpcf7-form input[type="image"] { display: none !important; } /* カラー見本 */ .contact-form-page .fujii-color-sample { margin: 10px 0 16px; padding: 12px; background: #faf9f7; border: 1px solid #e4dfd4; box-sizing: border-box; } .contact-form-page .fujii-color-sample__img { display: block; width: 100%; max-width: 100%; height: auto; border: 0; } .contact-form-page .showroom-required-asterisk { color: #c62828; font-weight: 700; } /* 必須バッジ（画像なし）直前の旧 #btn 互換は下の既存ルールと統合 */ .contact-form-page .wpcf7-response-output { margin: 20px 0 !important; padding: 14px 16px !important; border-radius: 2px; font-size: 13px; line-height: 1.7; } .contact-form-page .wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-accent) !important; background: rgba(62, 86, 86, 0.06); } .contact-form-page .wpcf7 form.invalid .wpcf7-response-output, .contact-form-page .wpcf7 form.failed .wpcf7-response-output, .contact-form-page .wpcf7 form.aborted .wpcf7-response-output { border-color: #c62828 !important; background: rgba(198, 40, 40, 0.06); } .contact-form-page .cf-turnstile { margin: 20px 0 8px; } /* ---- ショールーム予約 CF7 マークアップ ---- */ .contact-form-page .showroom_contact_wrap { margin: 0; } .contact-form-page .ttl_contact { margin: 0 0 16px; font-family: var(--font-serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; letter-spacing: 0.04em; color: var(--color-contact-navy, #1a3a6e); line-height: 1.5; } .contact-form-page .txt_contact { margin: 0 0 20px; font-size: 14px; font-weight: 400; line-height: 1.95; color: var(--color-text-muted); letter-spacing: 0.02em; } /* 必須の ※（バッジ以外の span のみ） */ .contact-form-page .showroom-required-asterisk, .contact-form-page #contact_table th span:not(.fujii-req), .contact-form-page .showroom_contact_wrap th span:not(.fujii-req) { color: #c62828; font-weight: 700; } /* 赤枠の注意ブロック（CF7 内 .reservation_notice） */ .contact-form-page .reservation_notice { margin: 0 0 28px; padding: 16px 18px; border: 2px solid #c62828; background: #fff; font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0.02em; color: var(--color-text); box-sizing: border-box; } /* 先頭の ※ のみ赤（first-letter は「予」を拾うため使わない） */ .contact-form-page .reservation_notice .fujii-notice-mark, .contact-form-page .fujii-notice-mark { color: #c62828; font-weight: 700; } /* テーブル型フォーム */ .contact-form-page #contact_table, .contact-form-page .wpcf7-form table { width: 100%; border-collapse: collapse; margin: 0 0 8px; } .contact-form-page #contact_table th, .contact-form-page #contact_table td, .contact-form-page .wpcf7-form th, .contact-form-page .wpcf7-form td { padding: 14px 0; vertical-align: top; text-align: left; font-size: 14px; border: 0; border-bottom: 1px solid #efeae0; } .contact-form-page #contact_table tr:last-child th, .contact-form-page #contact_table tr:last-child td { border-bottom: 0; } .contact-form-page #contact_table th, .contact-form-page .wpcf7-form th { width: 34%; max-width: 12em; font-weight: 500; letter-spacing: 0.04em; color: var(--color-text); padding-right: 16px; } .contact-form-page #contact_table td, .contact-form-page .wpcf7-form td { color: var(--color-text-muted); } .contact-form-page .yubin_a { line-height: 1.8; font-size: 13px; } .contact-form-page .form_note { margin: 0 0 8px; font-size: 12px; color: var(--color-text-soft); line-height: 1.7; } .contact-form-page .showroom-visit-time-label { margin: 12px 0 6px; font-size: 13px; font-weight: 500; color: var(--color-text); letter-spacing: 0.04em; } .contact-form-page .showroom-visit_datetime-cell .wpcf7-form-control-wrap { display: block; max-width: 100%; } @media (max-width: 600px) { .contact-form-page #contact_table th, .contact-form-page #contact_table td, .contact-form-page .wpcf7-form th, .contact-form-page .wpcf7-form td { display: block; width: 100%; max-width: none; padding: 4px 0; border-bottom: 0; } .contact-form-page #contact_table th, .contact-form-page .wpcf7-form th { padding-top: 16px; border-top: 1px solid #efeae0; } .contact-form-page #contact_table tr:first-child th { border-top: 0; padding-top: 0; } .contact-form-page #contact_table td { padding-bottom: 12px; } } /* ---- 資料請求 CF7 マークアップ ---- */ .contact-form-page .pc_on { display: block; } .contact-form-page .sp_on { display: none; } @media (max-width: 767px) { .contact-form-page .pc_on { display: none; } .contact-form-page .sp_on { display: block; } .contact-form-page br.pc_on { display: none; } } .contact-form-page .new_box { margin: 0 0 28px; } .contact-form-page .new_box > p { margin: 0 0 14px; font-size: 14px; line-height: 1.9; color: var(--color-text-muted); } .contact-form-page .f16 { font-size: 15px; color: var(--color-text); } .contact-form-page .dl_bnr { margin: 8px 0 20px; } .contact-form-page .dl_bnr a { display: block; line-height: 0; } .contact-form-page .dl_bnr img { width: 100%; max-width: 720px; height: auto; } .contact-form-page .pink_box { margin: 16px 0 20px; padding: 16px 18px; border: 1px solid #e0a0a0; background: #fff7f7; font-size: 13px; line-height: 1.9; color: var(--color-text); box-sizing: border-box; } .contact-form-page .txt_contact.float01 { margin: 16px 0 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.8; clear: both; } .contact-form-page .txt_contact img, .contact-form-page #contact_table th img { display: inline-block; vertical-align: middle; height: 18px; width: auto; } .contact-form-page .check_area { margin: 8px 0 18px; display: grid; gap: 8px 16px; } .contact-form-page .check_area.check_02 { grid-template-columns: 1fr; } @media (min-width: 768px) { .contact-form-page .check_area.check_02 { grid-template-columns: 1fr 1fr; } } .contact-form-page .check_area .wpcf7-list-item { display: block; margin: 0 0 6px; } .contact-form-page .check_area label { display: inline; font-size: 13px; font-weight: 400; letter-spacing: 0.02em; line-height: 1.6; } .contact-form-page .mb0 { margin: 0 0 8px !important; } .contact-form-page .mt5 { margin-top: 10px !important; } .contact-form-page .mt5 img { max-width: 100%; height: auto; display: block; border: 1px solid #e4dfd4; } .contact-form-page .yubin_a span, .contact-form-page td > p > span { display: inline-block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--color-text-soft); letter-spacing: 0.04em; } /* 旧 class 互換 */ .page-content.contact-form-page { max-width: none; padding: 0; margin: 0; } /* ---- WordPress 追加（汎用ページ・お知らせ一覧） ---- */ .page-content { max-width: 880px; margin: 0 auto; padding: 40px 24px 80px; box-sizing: border-box; } .page-content.entry-content > *:first-child { margin-top: 0; } /* お知らせ一覧ページ */ .news-archive { background: var(--color-bg-warm, #f7f5f1); padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px) clamp(64px, 10vw, 100px); box-sizing: border-box; } .news-archive__inner { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid #e8e4dc; padding: clamp(8px, 2vw, 12px) clamp(20px, 4vw, 36px) clamp(28px, 4vw, 40px); box-shadow: 0 2px 14px rgba(40, 48, 60, 0.04); } .news__list--archive { list-style: none; margin: 0; padding: 0; border-top: 0; } .news-archive .news__item--link { display: flex; gap: 16px 24px; align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: background 0.2s ease; } .news-archive .news__item--link:hover { background: var(--color-bg-warm, #f7f5f1); } .news-archive .news__date { width: 96px; flex-shrink: 0; font-size: 13px; color: var(--color-text-faint); font-family: var(--font-latin); letter-spacing: 0.04em; } .news-archive .news__cat { width: 7.5em; flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--color-accent); letter-spacing: 0.04em; } .news-archive .news__text { flex: 1; min-width: 0; font-size: 14px; font-weight: 400; line-height: 1.65; letter-spacing: 0.02em; color: var(--color-text); } .news-archive .news__item--link:hover .news__text { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .news-archive .news__arrow { flex-shrink: 0; font-size: 13px; color: var(--color-text-faint); transition: color 0.2s ease, transform 0.2s ease; } .news-archive .news__item--link:hover .news__arrow { color: var(--color-accent); transform: translateX(3px); } .news-archive__empty { margin: 32px 8px; font-size: 14px; line-height: 1.8; color: var(--color-text-muted); text-align: center; } .news-archive .navigation.pagination, .news-archive__pagination { margin-top: 28px; padding-top: 8px; } .news-archive .nav-links, .news-archive .page-numbers, .news-archive .navigation.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .news-archive .navigation.pagination li { margin: 0; padding: 0; list-style: none; } .news-archive .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25em; height: 2.25em; padding: 0 8px; font-size: 13px; font-family: var(--font-latin); color: var(--color-text-muted); text-decoration: none; border: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .news-archive a.page-numbers:hover { color: var(--color-accent); border-color: var(--color-border-strong); } .news-archive .page-numbers.current { color: #fff; background: var(--color-contact-navy, #1a3a6e); border-color: var(--color-contact-navy, #1a3a6e); } .news-archive .page-numbers.dots { border: 0; } @media (max-width: 767px) { .news-archive .news__item--link { flex-wrap: wrap; gap: 6px 12px; padding: 16px 4px; } .news-archive .news__date, .news-archive .news__cat { width: auto; } .news-archive .news__text { flex: 1 1 100%; order: 3; } .news-archive .news__arrow { display: none; } } .page-hero__catch { margin: 16px 0 0; max-width: 40em; font-size: 14px; line-height: 1.8; color: var(--color-text-muted, #5a5a55); letter-spacing: 0.04em; } .entry-content > *:first-child { margin-top: 0; } .entry-content > *:last-child { margin-bottom: 0; }