@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap"); /* ============================================================================= * 国東物産株式会社 — グローバルスタイル (global.css) * ----------------------------------------------------------------------------- * 全ページで共通して使うスタイルをここに記述します。 * デザイントークン・ヘッダー・フッター・モバイルメニュー・ * セクションタイトル・ニュースリストなど。 * ============================================================================= */ /* ============================================================================= * 0. デザイントークン * 色・フォントをここで一元管理しています。 * 変更したい場合はこの :root の値を書き換えてください。 * ============================================================================= */ :root { /* ブランドカラー */ --color-brand: #c9171e; --color-brand-hover: #e31a22; /* 背景・サーフェス */ --color-bg-page: #ffffff; --color-bg-muted: #f8fafc; /* テキスト */ --color-text: #0f172a; --color-text-muted: #64748b; /* ボーダー */ --color-border: #f1f5f9; /* slate-100 */ --color-border-mid: #e2e8f0; /* slate-200 */ /* フォント */ --font-sans: system-ui, sans-serif; --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "MS Mincho", serif; --pico-font-family: var(--font-serif); --pico-font-family-base: var(--font-serif); --pico-font-family-sans-serif: var(--font-serif); /* スペース */ --space-section: 6rem; /* コンテナ最大幅 */ --container-max: 1280px; } /* ============================================================================= * 1. ページ全体 () * に適用。 * 以前の class="bg-white antialiased overflow-x-hidden" をここに集約しました。 * ============================================================================= */ .site-body { margin: 0; overflow-x: hidden; font-family: var(--font-serif); color: var(--color-text); background-color: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================= * 2. Pico との共存 * Pico のデフォルトスタイルが干渉する箇所をここで上書きします。 * ============================================================================= */ /* Pico はフォーム要素にカラーを適用するため、ブランドカラーを上書きしておきます */ :root { --pico-primary: var(--color-brand); } body>main { padding-top: 0; } /* Pico がに下線を付ける場合の無効化（必要に応じてコメントアウト） */ a { text-decoration: none; } /* ============================================================================= * 3. サブページ共通ヘッダー * FAQ・お知らせ一覧・詳細ページなどで使用。 * index.html の 2 状態ヘッダーは別途対応予定です。 * ============================================================================= */ /* ── ヘッダー本体 ──────────────────────────────────────────────────────────── */ .page-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; background-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; transition: all 500ms; } /* ── 共通ナビ右エリア（トップ・内部ページ共通） ─────────────────────────── */ .home-header__right { display: flex; align-items: center; justify-content: flex-end; height: 100%; flex: 1; } .home-header__links { display: none; list-style: none; padding: 0; margin: 0; align-items: center; justify-content: center; gap: clamp(20px, 3.8vw, 97px); font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.05em; margin-right: 1.5rem; height: 100%; flex: 1; } .home-header__link { display: block; color: #303e48; text-decoration: none; padding: 10px 0; white-space: nowrap; font-size: 14px; transition: color 300ms; } .home-header__link:hover, .home-header__link.is-active { color: var(--color-brand); } @media (min-width: 1024px) { .home-header__links { display: flex; } } /* ── ナビバー（ロゴ・メニュー・CTAが並ぶ行） ──────────────────────────────── */ .page-header__nav { width: 100%; margin: 0 auto; padding: 0 1.5rem; /* px-6 */ display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 90px; box-sizing: border-box; } /* ── ロゴ ──────────────────────────────────────────────────────────────────── */ .page-header__logo { display: flex; align-items: center; flex-shrink: 0; width: 200px; /* Balance the center */ } .page-header__logo img { width: auto; height: 3rem; /* h-12 (モバイル) */ object-fit: contain; } /* ── ナビゲーション（header.css / header1.css と連携） ─────────────────────── */ /* デフォルトは非表示、lg 以上で表示（後述のメディアクエリで上書き） */ .header-nav { display: none; flex: 1; } /* ── CTA ボタン（「新規お取引」）──────────────────────────────────────────── */ .page-header__cta { flex-shrink: 0; display: none; /* デフォルト非表示（lg 以上で表示） */ justify-content: flex-end; width: 200px; } /* ── ハンバーガーボタン（モバイルのみ） ─────────────────────────────────────── */ .page-header__hamburger-wrap { display: flex; align-items: center; flex-shrink: 0; } .page-header__hamburger { background: none; border: none; padding: 0; margin: 0; color: #1e293b; cursor: pointer; outline: none; display: flex; align-items: center; transition: color 300ms; } .page-header__hamburger:hover { color: #dc2626; } .page-header__hamburger svg { width: 2rem; height: 2rem; } /* ── パンくずリスト ──────────────────────────────────────────────────────── */ .page-header__breadcrumb-bar { border-top: none; background-color: #fff; /* Luôn chiếm toàn bộ viewport, bất kể parent padding */ width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-top: 1rem; box-sizing: border-box; } .page-header__breadcrumb-inner { margin: 0 auto; padding: 1.25rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); /* py-5 px-6 */ } .breadcrumb { display: flex; flex-wrap: wrap; justify-content: flex-start !important; align-items: center; font-size: 14px; font-family: var(--font-serif); color: #0f172a; gap: 0.75rem 1.25rem; } .breadcrumb__link { text-decoration: underline; text-underline-offset: 4px; color: inherit; transition: color 300ms; } .breadcrumb__link:hover { color: var(--color-brand); } .breadcrumb__sep { color: inherit; } .breadcrumb__current { color: inherit; } /* ── main コンテンツのオフセット（固定ヘッダー + パンくず分） ────────────── */ .page-main { padding-top: 130px; /* 固定ヘッダーの実際の高さに合わせる */ padding-bottom: 6rem; /* pb-24 */ } /* ── レスポンシブ ────────────────────────────────────────────────────────── */ @media (max-width: 767px) { body>header { padding-block: 0; } .page-header__nav { height: 85px; } .page-main { padding-top: 85px; } .page-header__breadcrumb-inner { padding: 1rem 1rem; } .breadcrumb { font-size: 14px; gap: 0.4rem 0.75rem; } } @media (min-width: 768px) { .page-header__logo img { height: 3.5rem; } /* md:h-14 */ } @media (min-width: 1024px) { .page-header__nav { padding: 0 2.5rem; } /* lg:px-10 */ .page-header__logo img { height: 4rem; } .home-header:not(.is-scrolled) .page-header__logo img { height: clamp(4rem, 6vw, 7rem); } /* lg:h-16 */ .page-header__cta { display: flex; } .header-nav { display: flex; } .page-header__hamburger-wrap { display: none; } .page-header__breadcrumb-inner { padding: 1.25rem 15.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); } } /* ============================================================================= * 4. フッター * ============================================================================= */ .site-footer { background-color: #fff; padding-bottom: 0; } /* ── 画像バナーエリア（3枚横並び） ─────────────────────────────────────────── */ .footer-banners { display: flex; flex-direction: column; width: 100%; } .footer-banner { flex: 1; /* Equal width in desktop row layout */ position: relative; height: 16rem; /* h-64 */ min-height: 160px; overflow: hidden; display: block; } .footer-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms; } .footer-banner:hover .footer-banner__img { transform: scale(1.05); } .footer-banner__overlay { position: absolute; inset: 0; background-color: rgba(15, 23, 42, 0.4); transition: background-color 300ms; } .footer-banner:hover .footer-banner__overlay { background-color: rgba(15, 23, 42, 0.3); } .footer-banner__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 2.5rem; /* px-10 */ color: #fff; } .footer-banner__tag { font-family: var(--font-serif); font-size: 1rem; /* text-sm */ letter-spacing: 0.1em; /* tracking-widest */ text-transform: uppercase; margin-bottom: 0.75rem; /* mb-3 */ } .footer-banner__title { font-family: var(--font-serif); font-size: 27px; font-weight: 700; } /* ── フッター下部コンテンツ ──────────────────────────────────────────────── */ .footer-bottom { width: 100%; margin: 0 auto; padding: 1.5rem 1.5rem .5rem; /* py-20 pb-12 px-6 */ } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; /* gap-16 */ } /* カラム共通 */ .footer-col { display: flex; flex-direction: column; } /* ロゴ */ .footer-logo { display: block; margin-bottom: 2rem; } .footer-logo img { height: 72px; width: auto; } /* キャッチコピー */ .footer-tagline { color: #64748b; font-family: var(--font-serif); line-height: 1.625; font-size: 14px; margin-bottom: 2rem; } /* SNS */ .footer-socials { display: flex; align-items: center; gap: 1.5rem; } .footer-social { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .footer-social img { width: 3rem; height: 3rem; border-radius: 0.75rem; object-fit: contain; transition: transform 300ms; } .footer-social:hover img { transform: translateY(-4px); } .footer-social__label { font-size: 11px; color: #64748b; font-family: var(--font-serif); } /* 会社情報 */ .footer-info { display: flex; flex-direction: column; color: #2e353f; font-family: var(--font-serif); font-size: 14px; line-height: 2; } .footer-info p { margin-bottom: 1rem; } .footer-info p:last-child { margin-bottom: 0; } /* サイトマップ */ .footer-sitemap { display: flex; flex-direction: column; color: #2e353f; font-family: var(--font-serif); } .footer-sitemap__title { font-weight: 700; font-size: 18px; font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 0.1em; color: #364153; } .footer-sitemap__links { display: flex; flex-direction: column; font-size: 14px; line-height: 2.2; } .footer-sitemap__links p { margin: 0; } .footer-sitemap__links a { color: #000000; transition: color 300ms; font-family: var(--font-serif); font-weight: 400; font-size: 14px; } .footer-sitemap__links a:hover { color: var(--color-brand); } /* サブ項目（販売チャネル配下など、index.html のみで使用） */ .footer-sitemap__sub { padding-left: 1rem; color: #64748b; font-size: 14px; } /* コピーライト */ .footer-copyright { padding-top: 1rem; text-align: center; font-size: 14px; color: #64748b; font-family: var(--font-serif); } /* ── レスポンシブ ────────────────────────────────────────────────────────── */ /* モバイル（〜767px） */ @media (max-width: 767px) { /* バナー：縦並び full-width */ .footer-banners { flex-direction: column; } .footer-banner { flex: none; /* Prevent collapse in column layout */ height: 13rem; min-height: 200px; } .footer-banner__body { padding: 0 0.5rem; justify-content: center; padding-bottom: 1.5rem; } .footer-banner__tag { font-size: 0.7rem; margin-bottom: 0.375rem; } .footer-banner__title { font-size: 1.5rem; } /* フッター下部 */ .footer-bottom { padding: 1.5rem 1.25rem 0.5rem; } /* グリッド：上段：ロゴ+SNS ｜会社情報 (2列) */ .footer-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.5rem 1rem; } /* ロゴ列：左 */ .footer-col { grid-column: 1; grid-row: 1; } .footer-logo { margin-bottom: 0.875rem; } .footer-logo img { height: 52px; } .footer-tagline { font-size: 14px; line-height: 1.7; margin-bottom: 1rem; } .footer-socials { gap: 1rem; } .footer-social img { width: 2.5rem; height: 2.5rem; } /* 会社情報列：右 */ .footer-info { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 1.75; } .footer-info p { margin-bottom: 0.75rem; } /* サイトマップ：下段全幅 2列 */ .footer-sitemap { grid-column: 1 / -1; grid-row: 2; } .footer-sitemap__title { text-align: center; font-size: 14px; margin-bottom: 1.25rem; font-family: var(--font-serif); } .footer-sitemap__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; font-size: 14px; line-height: 2; } /* サブ項目（BtoC/BtoBなど）は左列内に収める */ .footer-sitemap__sub { padding-left: 0.5rem; font-size: 11px; } .footer-copyright { padding-top: 1.25rem; font-size: 11px; } } /* タブレット（768px〜） */ @media (min-width: 768px) { .footer-banners { flex-direction: row; } .footer-banner { flex: 1; /* Restore equal-width stretch in row layout */ height: 320px; min-height: 320px; } /* md:h-[320px] */ .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } @media (min-width: 1024px) { .footer-banner__body { padding: 0 1.5rem; } /* lg:px-16 */ .footer-banner__title { font-size: clamp(21px, 2.2vw, 33px); white-space: nowrap; } /* lg:text-[32px] */ .footer-bottom { padding-left: 2.5rem; padding-right: 2.5rem; } } /* ============================================================================= * 5. モバイルメニュー（全ページ共通） * JavaScript（header.js）で .is-open を付与・除去することで * スライドイン / スライドアウトします。 * ============================================================================= */ .mobile-menu { position: fixed; inset: 0; z-index: 100; background-color: #fff; transform: translateX(100%); /* デフォルト: 右に隠す */ transition: transform 300ms ease-in-out; display: flex; flex-direction: column; pointer-events: none; } /* 開いた状態 */ .mobile-menu.is-open { transform: translateX(0); pointer-events: auto; } /* PC では不要 */ @media (min-width: 1024px) { .mobile-menu { display: none; } } /* ── ヘッダー行（ロゴ + 閉じるボタン） ────────────────────────────────────── */ .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem; flex-shrink: 0; } .mobile-menu__logo { display: flex; align-items: center; } .mobile-menu__logo img { width: auto; height: 3rem; object-fit: contain; } .mobile-menu__close { background: none; border: none; padding: 0.5rem; color: #0f172a; cursor: pointer; outline: none; display: flex; align-items: center; justify-content: center; } .mobile-menu__close svg { width: 2rem; height: 2rem; } /* ── ナビリスト ──────────────────────────────────────────────────────────── */ .mobile-menu__nav { flex: 1; overflow-y: auto; margin-top: 0.5rem; } .mobile-menu__list { display: flex; flex-direction: column; color: #1e293b; font-family: var(--font-serif); font-size: 18px; list-style: none; margin: 0; padding: 0; align-items: normal; } .mobile-menu__item { border-top: 1px solid var(--color-border-mid); } .mobile-menu__item--last { border-bottom: 1px solid var(--color-border-mid); } .mobile-menu__link { display: flex; align-items: center; justify-content: space-between; padding: 22px 1.5rem; color: inherit; transition: background-color 300ms; color: #101828; font-weight: 500; } .mobile-menu__link:hover, .mobile-menu__link.is-active { color: var(--color-brand); background-color: #fce7f3; } /* 矢印アイコン（index.html のみ） */ .mobile-menu__link-icon { width: 1.25rem; height: 1.25rem; color: #94a3b8; flex-shrink: 0; } /* ── CTA ボタンエリア ──────────────────────────────────────────────────────── */ .mobile-menu__cta { padding: 1.5rem 1.5rem 3rem; background-color: #fff; border-top: none; flex-shrink: 0; } .mobile-menu__cta-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 18px 1rem; border-radius: 14px; border: 2px solid var(--color-brand); color: var(--color-brand); font-weight: 700; font-size: 21px; font-family: var(--font-serif); transition: background-color 300ms; text-align: center; } .mobile-menu__cta-btn:hover { background-color: #fff1f2; } /* ============================================================================= * 6a. ユーティリティ・セクション共通タイトル・ニュースリスト（共通） * ============================================================================= */ /* ── ページ内の隠しクラス ──────────────────────────────────────────────────── */ .hidden { display: none !important; } /* ── セクション共通タイトル（お知らせ・FAQで使い回し） ───────────────────── */ .section-title { margin-bottom: 3.5rem; text-align: center; } .section-title__eyebrow { color: var(--color-brand); font-weight: 700; font-size: 1.2rem; display: block; margin-bottom: 0.75rem; font-family: var(--font-serif); } .section-title__heading { font-size: 1.8rem; font-weight: 700; color: #0f172a; margin-bottom: 1.5rem; font-family: var(--font-serif); } .section-title__divider { width: 22rem; max-width: 80%; height: 2px; background-color: var(--color-brand); margin: 0 auto; } @media (min-width: 1024px) { .section-title__heading { font-size: 42px; } .section-title__divider { width: 12rem; margin-bottom: 2.5rem; } } /* ── ニュースリスト ───────────────────────────────────────────────────────── */ .news-list { padding: 0 20px 0; margin: 0; } .news-list>.news-item { list-style: none; } .news-list>.news-item+.news-item { border-top: 1px solid #f1f5f9; } .news-item__link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date arrow" "body arrow"; align-items: center; padding: 1rem; margin: 0 -1rem; border-radius: 0.75rem; transition: background-color 300ms; } .news-item__date { grid-area: date; color: #666666; font-family: var(--font-serif); font-variant-numeric: tabular-nums; letter-spacing: 0.025em; margin-bottom: 0.75rem; font-size: 16px; } .news-item__body { grid-area: body; } .news-item__title { color: #000000; font-family: var(--font-serif); font-size: 18px; line-height: 1.625; margin: 0; font-weight: 100; } .news-item__link:hover .news-item__title, .news-item__link:hover .news-item__date { color: var(--color-brand); transition: color 300ms; } .news-item__arrow { grid-area: arrow; display: flex; margin-left: 1rem; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid var(--color-brand); align-items: center; justify-content: center; color: var(--color-brand); transition: background-color 300ms, color 300ms; } .news-item__arrow svg { width: 20px; height: 20px; margin-left: 2px; } .news-item__link:hover .news-item__arrow { background-color: var(--color-brand); color: #fff; } @media (min-width: 768px) { .news-item__link { grid-template-columns: 8rem 1fr auto; grid-template-areas: "date body arrow"; align-items: center; } .news-item__date { width: 8rem; margin-bottom: 0; } .news-item__body { padding-right: 1.5rem; } .news-item__title { font-size: 18px; } .news-item__arrow { display: flex; } } /* ============================================================================= * FAQ アコーディオン（共通 — トップページ・FAQ ページ両方で使用） * ============================================================================= */ /* ── FAQ アコーディオン ───────────────────────────────────────────────────── */ /* コンテンツグループ */ .faq-list { display: flex; flex-direction: column; gap: 1rem; } /* 各

カード */ .faq-item { background-color: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); transition: box-shadow 300ms; } .faq-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); } /*

（クリック可能な質問行） */ .faq-item__summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; padding: 1.5rem; outline: none; } .faq-item__summary::-webkit-details-marker { display: none; } /* Pico CSS が summary::after に追記するデフォルトアイコンを無効化 */ .faq-item__summary::after { display: none !important; } .faq-item__q-row { display: flex; align-items: center; gap: 1.25rem; } /* Q バッジ */ .faq-item__q-badge { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 9999px; background-color: #fff; border: 1px solid var(--color-brand); color: var(--color-brand); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 14px; font-weight: 700; } .faq-item__question { color: #1e293b; font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.025em; } /* ± トグルアイコン */ .faq-item__toggle { color: var(--color-brand); margin-left: 1rem; flex-shrink: 0; transition: transform 300ms; } .faq-item__toggle svg { width: 1.5rem; height: 1.5rem; } /* open 時に＋ → × に回転 */ details.faq-item[open] .faq-item__toggle { transform: rotate(45deg); } /* 回答エリア */ .faq-item__answer-panel { padding: 0 1.5rem 1.5rem; color: #475569; font-family: var(--font-serif); line-height: 1.75; font-size: 14px; border-top: 1px solid #f1f5f9; padding-top: 1.25rem; margin-top: 0.5rem; } .faq-item__a-row { display: flex; align-items: flex-start; gap: 1.25rem; } /* A バッジ */ .faq-item__a-badge { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 9999px; background-color: var(--color-brand); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 14px; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .faq-item__answer { padding-top: 0.25rem; } @media (min-width: 1024px) { .faq-item__question { font-size: 18px; } .faq-item__answer-panel { font-size: 16px; } } /* ── FAQ ハイライト & クリッカブルリンク ─────────────────────────────────── */ .faq-mark { text-decoration: underline; color: var(--color-brand); } /* リンクとして機能する mark（contact へ誘導） */ .faq-mark--link { text-decoration: underline; color: var(--color-brand); } /* ============================================================================= * Page Top Button * ============================================================================= */ .page-top-btn { position: fixed; bottom: 2rem; right: 2rem; width: 70px; height: 70px; background-color: var(--color-brand); color: #fff; border: none; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; transform: translateY(20px); } .page-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .page-top-btn:hover { background-color: var(--color-brand-hover); transform: translateY(-3px) scale(1.05); /* Slight grow effect to match request */ } .page-top-btn svg { width: 32px; height: 32px; margin-bottom: 2px; } .page-top-btn span { font-size: 10px; font-weight: 500; font-family: var(--font-sans); letter-spacing: 0.05em; line-height: 1; } @media (max-width: 768px) { .page-top-btn { bottom: 1rem; right: 1rem; width: 60px; height: 60px; } .page-top-btn svg { width: 24px; height: 24px; } .page-top-btn span { font-size: 9px; } }