/* ========================================================================== 各ページのに以下のページクラスを付与トップページ : 製品・フレーバー一覧 : ニュース : ご利用ガイド : お問い合わせ : ├ 入力ページ : contact.html ├ 確認ページ : contact-confirm.html （page-contact を共用） └ 完了ページ : contact-complete.html（page-contact を共用）会社案内 / ABOUT : ========================================================================== */ /* -------------------------------------------------------------------------- 1. ベース（全ページ共通・完全一致） -------------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: #071b3f; background: #f4f9ff; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; display: block; } /* -------------------------------------------------------------------------- 2. ヘッダー / ナビ（全ページ共通） -------------------------------------------------------------------------- */ .header { height: 84px; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; background: #061935; color: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.12); } .logo { display: inline-flex; align-items: center; } .site-logo-img { width: 178px; max-height: 52px; object-fit: contain; } .logo-text { display: none; font-family: Georgia, serif; font-size: 34px; font-weight: 800; letter-spacing: 2px; white-space: nowrap; } .logo-text small { display: block; margin-top: 2px; font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: 4px; font-weight: 700; } .nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 900; letter-spacing: .04em; } /* 製品ページのみナビが広め・大きめ（元CSSどおり） */ .page-products .nav { gap: 46px; font-size: 15px; } .nav a { position: relative; padding: 8px 0; } .nav a.active::after, .nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #49c7ff; } .header-actions { display: flex; align-items: center; gap: 10px; } .lang { display: inline-flex; border: 1px solid rgba(255,255,255,.4); border-radius: 5px; overflow: hidden; font-size: 13px; font-weight: 900; } .lang span { padding: 10px 14px; } .lang .current { background: #1686ff; } .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; background: transparent; color: #fff; font-size: 28px; cursor: pointer; } /* -------------------------------------------------------------------------- 3. ヒーロー -------------------------------------------------------------------------- */ /* トップページ：画像ヒーロー */ .hero { width: 100%; background: #061935; overflow: hidden; } .hero img { width: 100%; height: auto; display: block; } /* 下層ページ共通ヒーロー */ .page-hero { position: relative; overflow: hidden; color: #fff; padding: 110px 5% 105px; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,9,26,.05), rgba(2,9,26,.62)); pointer-events: none; } .page-hero-inner { position: relative; z-index: 1; max-width: 1500px; margin: 0 auto; } .page-hero h1 { margin: 0 0 10px; font-size: clamp(58px, 9vw, 120px); line-height: .9; letter-spacing: .04em; font-weight: 1000; } .page-hero .tagline { margin: 0 0 22px; font-size: clamp(28px, 4vw, 58px); line-height: 1; color: #19a9ff; font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 900; font-style: italic; } .page-hero p { margin: 0; max-width: 720px; font-size: 18px; line-height: 1.9; font-weight: 800; } /* --- ページ別ヒーロー背景・サイズ調整 --- */ /* 製品・フレーバー一覧 */ .page-products .page-hero { background: linear-gradient(90deg, rgba(4,13,32,.96), rgba(7,29,66,.6)), url("/img/www/topbanner.jpg") center/cover no-repeat; padding: 96px 5% 88px; } .page-products .page-hero::after { content: none; } .page-products .page-hero h1 { margin: 0 0 14px; font-size: clamp(52px, 8vw, 112px); } /* ニュース */ .page-news .page-hero { background: radial-gradient(circle at 72% 38%, rgba(73,199,255,.48), transparent 28%), linear-gradient(90deg, rgba(2,9,26,.98), rgba(4,24,61,.76)), url("/img/www/news-banner.jpg") center/cover no-repeat; } /* ご利用ガイド */ .page-guide .page-hero { background: radial-gradient(circle at 72% 38%, rgba(73,199,255,.48), transparent 28%), linear-gradient(90deg, rgba(2,9,26,.98), rgba(4,24,61,.76)), url("/img/www/guide-banner.jpg") center/cover no-repeat; } .page-guide .page-hero h1 { font-size: clamp(54px, 9vw, 112px); } .page-guide .page-hero p { max-width: 760px; } /* お問い合わせ（入力・確認・完了共通の背景） */ .page-contact .page-hero { background: radial-gradient(circle at 72% 38%, rgba(73,199,255,.48), transparent 28%), linear-gradient(90deg, rgba(2,9,26,.98), rgba(4,24,61,.76)), url("/img/www/contact-banner.jpg") center/cover no-repeat; } .page-contact .page-hero p { max-width: 760px; } /* 確認・完了ページ用：少し低めのヒーロー */ .page-hero--compact { padding: 90px 5% 85px; } .page-hero--compact h1 { font-size: clamp(48px, 8vw, 100px); } .page-hero--compact .tagline { font-size: clamp(24px, 3.5vw, 50px); } /* 会社案内 / ABOUT */ .page-about .page-hero { background: radial-gradient(circle at 72% 38%, rgba(73,199,255,.48), transparent 28%), linear-gradient(90deg, rgba(2,9,26,.98), rgba(4,24,61,.76)), url("/img/www/about-banner.jpg") center/cover no-repeat; padding: 112px 5% 108px; } .page-about .page-hero::after { background: linear-gradient(180deg, rgba(2,9,26,.05), rgba(2,9,26,.65)); } .page-about .page-hero h1 { font-size: clamp(56px, 9vw, 118px); } .page-about .page-hero .tagline { margin: 0 0 24px; font-size: clamp(26px, 4vw, 56px); } .page-about .page-hero p { max-width: 760px; } /* -------------------------------------------------------------------------- 4. セクション / セクションタイトル -------------------------------------------------------------------------- */ .section { max-width: 1500px; margin: 0 auto; padding: 48px 5%; } .page-home .section { padding: 44px 5%; } .page-guide .section, .page-contact .section, .page-about .section { padding: 52px 5%; } /* 確認・完了ページ用：本文幅を絞る */ .section--narrow { max-width: 1100px; } .section-title { text-align: center; margin-bottom: 34px; } .page-news .section-title { margin-bottom: 30px; } .page-home .section-title { margin-bottom: 28px; } .section-title::before { content: ""; display: block; width: 36px; height: 3px; margin: 0 auto 10px; background: #18a8ff; border-radius: 2px; } .section-title h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); letter-spacing: .04em; color: #071b3f; font-weight: 1000; } .page-home .section-title h2 { font-size: clamp(32px, 4vw, 48px); } .section-title p { margin: 8px 0 0; color: #071b3f; font-weight: 800; line-height: 1.8; } .page-home .section-title p { letter-spacing: .04em; } .page-guide .section-title p, .page-contact .section-title p { margin: 8px auto 0; max-width: 820px; } .page-about .section-title p { margin: 8px auto 0; max-width: 780px; } /* 製品ページのみ：左寄せ・下線バーなし */ .page-products .section-title { text-align: left; margin-bottom: 24px; } .page-products .section-title::before { content: none; } .page-products .section-title h2 { font-size: clamp(30px, 4vw, 48px); } .page-products .section-title p { margin: 10px 0 0; } /* -------------------------------------------------------------------------- 5. トップページ専用パーツ -------------------------------------------------------------------------- */ .primary-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 38px; } .action-card { min-height: 210px; background: #fff; border: 1px solid #d9e7f5; border-radius: 12px; padding: 28px; box-shadow: 0 10px 28px rgba(9,41,90,.08); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .action-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; background: radial-gradient(circle, rgba(24,168,255,.18), transparent 62%); } .action-card strong { display: block; margin-bottom: 8px; color: #071b3f; font-size: 28px; font-weight: 1000; letter-spacing: .04em; position: relative; z-index: 1; } .action-card span { display: block; color: #071b3f; font-weight: 900; line-height: 1.8; position: relative; z-index: 1; } .action-card .btn-line { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; color: #0b5ca8; font-weight: 1000; position: relative; z-index: 1; } .action-card .btn-line::after { content: "›"; font-size: 24px; } .action-card.support { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(225,246,255,.92)), url("/img/www/card-ice-bg.jpg") center/cover no-repeat; border: 2px solid rgba(24,168,255,.4); } .action-card.business { background: #061e49; color: #fff; } .action-card.business strong, .action-card.business span, .action-card.business .btn-line { color: #fff; } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .product-card { position: relative; min-height: 340px; border-radius: 10px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 24px; box-shadow: 0 8px 22px rgba(9,41,90,.08); } .product-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.06)); } .product-content { position: relative; z-index: 2; } .product-card h3 { margin: 0 0 14px; font-size: 26px; color: #fff; font-weight: 1000; } .product-card p { margin: 0 0 20px; line-height: 1.7; color: #fff; font-weight: 800; font-size: 14px; } .features { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); background: #061e49; color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 28px rgba(3,26,66,.18); } .feature { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 30px 28px; border-right: 1px solid rgba(255,255,255,.16); } .feature:last-child { border-right: none; } .feature-icon { width: 58px; height: 58px; border: 2px solid #7fd5ff; display: grid; place-items: center; border-radius: 12px; overflow: hidden; } .feature-icon img { width: 34px; height: 34px; object-fit: contain; } .feature strong { display: block; margin-bottom: 5px; font-size: 18px; letter-spacing: .04em; } .feature span { display: block; line-height: 1.6; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88); } /* トップページ：ニュース一覧（リスト型） */ .news { background: #fff; border-radius: 12px; border: 1px solid #d9e7f5; box-shadow: 0 10px 28px rgba(9,41,90,.08); overflow: hidden; } .page-home .news-list { margin: 0; padding: 0; list-style: none; } .page-home .news-list li { display: grid; grid-template-columns: 140px 130px 1fr; gap: 18px; padding: 18px 24px; border-bottom: 1px solid #e5eef8; align-items: center; font-weight: 800; } .page-home .news-list li:last-child { border-bottom: none; } .page-home .news-date { color: #385277; font-size: 14px; } .page-home .news-label { display: inline-flex; justify-content: center; padding: 6px 10px; border-radius: 999px; background: #e9f5ff; color: #0a4f87; font-size: 12px; font-weight: 1000; } .news-title { color: #071b3f; } .about { margin-top: 28px; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 56%, rgba(255,255,255,.18) 100%), url("/img/www/about-bg.jpg") center/cover no-repeat; border: 1px solid rgba(12,51,97,.12); border-radius: 10px; overflow: hidden; min-height: 330px; } .about-copy { max-width: 820px; padding: 44px; } .about-copy h2 { margin: 0 0 20px; font-size: clamp(30px, 4vw, 44px); color: #071b3f; font-weight: 1000; letter-spacing: .03em; } .about-copy h2::after { content: ""; display: block; width: 44px; height: 3px; background: #18a8ff; margin-top: 12px; } .about-copy p { margin: 0 0 12px; color: #071b3f; line-height: 1.9; font-weight: 800; } .sub-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .sub-link { background: #fff; border: 1px solid #d9e7f5; border-radius: 12px; padding: 24px; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .sub-link strong { display: block; font-size: 22px; font-weight: 1000; margin-bottom: 8px; } .sub-link span { display: block; font-weight: 800; line-height: 1.7; color: #385277; } /* -------------------------------------------------------------------------- 6. 製品・フレーバーページ専用パーツ -------------------------------------------------------------------------- */ .category-nav { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 32px; } .category-nav a { padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid #d9e7f5; font-weight: 900; box-shadow: 0 6px 16px rgba(9,41,90,.06); } .category-block { margin-top: 32px; background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .category-head { display: block; padding: 34px; background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(230,246,255,.9)); } .category-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto 24px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(9,41,90,.12); } .category-copy h2 { margin: 0 0 10px; font-size: clamp(32px, 4vw, 52px); color: #071b3f; font-weight: 1000; letter-spacing: .04em; } /* 製品ページ・ガイドページ共通のタイプバッジ（両ページで定義が同一） */ .type { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: #061e49; color: #fff; font-size: 13px; font-weight: 900; margin-bottom: 16px; } .category-copy p { margin: 0; font-size: 16px; line-height: 1.9; font-weight: 800; max-width: 680px; } .flavor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px; background: #f7fbff; } .flavor-card { background: #fff; border: 1px solid #dfeaf5; border-radius: 10px; padding: 20px; box-shadow: 0 6px 16px rgba(9,41,90,.06); } .flavor-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; margin-bottom: 12px; background: #f4f9ff; } .flavor-card h3 { margin: 0 0 10px; font-size: 22px; color: #071b3f; font-weight: 1000; } .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; background: #e9f5ff; color: #0a4f87; } .badge.nicotine { background: #061e49; color: #fff; } .badge.non { background: #e6fbf2; color: #0b6a45; } .flavor-card p { margin: 0; color: #385277; font-weight: 800; line-height: 1.7; font-size: 14px; } .product-card__image { display: block; width: 100%; height: auto; } /* -------------------------------------------------------------------------- 7. ニュースページ専用パーツ -------------------------------------------------------------------------- */ .filter-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; } .filter-tabs a { min-width: 110px; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid #d9e7f5; color: #071b3f; font-weight: 1000; text-align: center; box-shadow: 0 6px 16px rgba(9,41,90,.06); } .filter-tabs a.active { background: #061e49; color: #fff; border-color: #061e49; } .news-layout { display: grid; grid-template-columns: 1fr 330px; gap: 28px; align-items: start; } /* ニュースページ：カード型リスト（トップページのリスト型と別定義） */ .page-news .news-list { display: grid; gap: 18px; } .news-card { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; padding: 26px; box-shadow: 0 10px 28px rgba(9,41,90,.08); display: grid; grid-template-columns: 150px 1fr; gap: 24px; position: relative; overflow: hidden; } .news-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -70px; background: radial-gradient(circle, rgba(24,168,255,.14), transparent 62%); } .news-meta { position: relative; z-index: 1; } .page-news .news-date { display: block; margin-bottom: 12px; color: #385277; font-weight: 900; font-size: 14px; } .page-news .news-label { display: inline-flex; justify-content: center; padding: 6px 12px; border-radius: 999px; background: #e9f5ff; color: #0a4f87; font-size: 12px; font-weight: 1000; } .page-news .news-label.product { background: #061e49; color: #fff; } .page-news .news-label.business { background: #e6fbf2; color: #0b6a45; } .page-news .news-label.guide { background: #fff3d8; color: #8a5a00; } .news-body { position: relative; z-index: 1; } .news-body h3 { margin: 0 0 10px; font-size: 24px; font-weight: 1000; color: #071b3f; line-height: 1.45; } .news-body p { margin: 0 0 18px; font-size: 14px; font-weight: 800; line-height: 1.8; color: #385277; } .pagination { display: flex; justify-content: center; gap: 10px; margin-top: 34px; } .pagination a { width: 42px; height: 42px; border-radius: 8px; background: #fff; border: 1px solid #d9e7f5; display: grid; place-items: center; font-weight: 1000; color: #071b3f; } .pagination a.active { background: #061e49; color: #fff; } /* -------------------------------------------------------------------------- 8. サイドボックス（ニュース／お問い合わせで内容が異なる） -------------------------------------------------------------------------- */ .side-box { background: #061e49; color: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(3,26,66,.18); } .page-news .side-box { padding: 26px; position: sticky; top: 110px; } .page-contact .side-box { padding: 28px; } .side-box h3 { margin: 0 0 16px; font-weight: 1000; } .page-news .side-box h3 { font-size: 22px; } .page-contact .side-box h3 { font-size: 24px; } .side-box p { margin: 0 0 18px; line-height: 1.8; font-weight: 800; } .page-news .side-box p { color: rgba(255,255,255,.86); } .page-contact .side-box p { color: rgba(255,255,255,.88); } /* ニュースページ用リンク行 */ .side-link { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.16); font-weight: 900; } .side-link::after { content: "›"; color: #49c7ff; font-size: 22px; } /* お問い合わせページ用情報行 */ .side-item { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.16); } .side-item strong { display: block; margin-bottom: 6px; font-size: 15px; } .side-item span { display: block; line-height: 1.7; font-size: 14px; color: rgba(255,255,255,.86); font-weight: 700; overflow-wrap: break-word; /* メールアドレス等の長い連続文字列を折り返す */ } /* -------------------------------------------------------------------------- 9. ご利用ガイドページ専用パーツ -------------------------------------------------------------------------- */ .guide-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; } .guide-nav a { background: #fff; border: 1px solid #d9e7f5; border-radius: 12px; padding: 18px; box-shadow: 0 10px 28px rgba(9,41,90,.08); font-weight: 1000; display: flex; justify-content: space-between; align-items: center; } .guide-nav a::after { content: "›"; color: #19a9ff; font-size: 24px; } .guide-block { background: #fff; border: 1px solid #d9e7f5; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 36px rgba(9,41,90,.08); margin-top: 30px; } .guide-head { display: grid; grid-template-columns: 360px 1fr; gap: 30px; align-items: center; padding: 34px; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(230,246,255,.9)); } .guide-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(9,41,90,.12); } .guide-copy h2 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 52px); font-weight: 1000; letter-spacing: .04em; } .guide-copy p { margin: 0; line-height: 1.9; font-weight: 800; color: #385277; } /* ガイドページ：手順カード（お問い合わせフローの .flow-steps とは別物） */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 26px; background: #f7fbff; } .step { background: #fff; border: 1px solid #dfeaf5; border-radius: 12px; padding: 22px; box-shadow: 0 6px 16px rgba(9,41,90,.06); } .step-num { width: 42px; height: 42px; border-radius: 50%; background: #061e49; color: #fff; display: grid; place-items: center; font-weight: 1000; margin-bottom: 14px; } .step h3 { margin: 0 0 10px; font-size: 22px; font-weight: 1000; } .step p { margin: 0; line-height: 1.75; font-weight: 800; color: #385277; font-size: 14px; } .notice { background: #061e49; color: #fff; border-radius: 14px; padding: 30px; margin-top: 36px; box-shadow: 0 10px 28px rgba(3,26,66,.18); } .notice h2 { margin: 0 0 16px; font-size: 30px; } .notice ul { margin: 0; padding-left: 20px; line-height: 2; font-weight: 800; color: rgba(255,255,255,.9); } .faq { display: grid; gap: 14px; } .faq-item { background: #fff; border: 1px solid #d9e7f5; border-radius: 12px; padding: 22px; box-shadow: 0 8px 22px rgba(9,41,90,.06); } .faq-item h3 { margin: 0 0 10px; font-size: 20px; font-weight: 1000; } .faq-item p { margin: 0; line-height: 1.8; color: #385277; font-weight: 800; } /* -------------------------------------------------------------------------- 10. お問い合わせページ専用パーツ -------------------------------------------------------------------------- */ .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 34px; } .contact-card { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; padding: 30px; box-shadow: 0 10px 28px rgba(9,41,90,.08); position: relative; overflow: hidden; } .contact-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -70px; background: radial-gradient(circle, rgba(24,168,255,.16), transparent 62%); } .contact-card.business { background: #061e49; color: #fff; } .contact-card h3 { margin: 0 0 12px; font-size: 30px; font-weight: 1000; position: relative; z-index: 1; } .contact-card p { margin: 0 0 16px; line-height: 1.8; font-weight: 800; color: #385277; position: relative; z-index: 1; } .contact-card.business p { color: rgba(255,255,255,.88); } .contact-card ul { margin: 0; padding-left: 20px; line-height: 2; font-weight: 800; position: relative; z-index: 1; } .contact-card.business ul { color: rgba(255,255,255,.92); } .form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; /* minmax(0,~)で中身より縮めるようにし、横スクロールを防止 */ gap: 28px; align-items: start; } .form-wrap > * { min-width: 0; } /* グリッド子要素の min-width:auto を解除 */ .form-box { background: #fff; border: 1px solid #d9e7f5; padding: 40px; border-radius: 14px; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .form-group { display: flex; flex-direction: column; } .form-group.full { grid-column: 1 / -1; } /* フォーム要素は他ページへの影響を避けるためお問い合わせページに限定 */ .page-contact label { margin-bottom: 8px; font-weight: 900; color: #071b3f; } .required { color: #1686ff; font-size: 12px; margin-left: 6px; } .page-contact input, .page-contact select, .page-contact textarea { width: 100%; min-width: 0; /* select は選択肢の文字幅より縮まないため明示的に解除 */ padding: 14px; border: 1px solid #cfdceb; border-radius: 8px; font-size: 16px; background: #fff; color: #071b3f; } .page-contact textarea { min-height: 180px; resize: vertical; } .form-note { margin: 18px 0 0; color: #385277; font-size: 13px; line-height: 1.8; font-weight: 800; } .submit-btn { margin-top: 22px; background: #061e49; color: #fff; border: none; padding: 16px 40px; border-radius: 8px; font-size: 16px; font-weight: 1000; cursor: pointer; } .company { margin-top: 42px; background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .company-row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid #e5eef8; } .company-row:last-child { border-bottom: none; } .company-label { padding: 20px 24px; background: #f0f7ff; font-weight: 1000; } .company-value { padding: 20px 24px; font-weight: 800; color: #385277; line-height: 1.8; } /* -------------------------------------------------------------------------- 10-2. お問い合わせ：入力 → 確認 → 完了フロー（.steps / .step / .btn はガイドページ等で使用済みのため衝突を避けて flow- プレフィックスで命名） -------------------------------------------------------------------------- */ /* --- ステップインジケーター（3ページ共通） --- */ .flow-steps { display: flex; justify-content: center; align-items: center; margin: 0 auto 38px; max-width: 560px; } .flow-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; } .flow-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 1000; font-size: 17px; background: #fff; border: 2px solid #cfdceb; color: #8aa3c2; } .flow-label { font-size: 13px; font-weight: 900; letter-spacing: .06em; color: #8aa3c2; } .flow-step.current .flow-num { background: #061e49; border-color: #061e49; color: #fff; box-shadow: 0 6px 16px rgba(6,30,73,.25); } .flow-step.current .flow-label { color: #071b3f; } .flow-step.done .flow-num { background: #18a8ff; border-color: #18a8ff; color: #fff; } .flow-step.done .flow-label { color: #18a8ff; } .flow-line { flex: 1; height: 2px; background: #cfdceb; margin: 0 6px; transform: translateY(-13px); } .flow-line.done { background: #18a8ff; } /* --- フロー用ボタン（共通 .btn とはデザインが異なるため別定義） --- */ .flow-actions { display: flex; justify-content: center; gap: 16px; margin-top: 26px; } /* 確認ページ：ボタンごとに form で囲む構成でもレイアウトが崩れないように */ .flow-actions form { display: contents; } .flow-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 44px; border-radius: 8px; font-size: 16px; font-weight: 1000; cursor: pointer; border: none; font-family: inherit; } .flow-btn--primary { background: #061e49; color: #fff; } .flow-btn--primary:hover { background: #0a2d6b; } .flow-btn--ghost { background: #fff; color: #061e49; border: 2px solid #061e49; } .flow-btn--ghost:hover { background: #eef5ff; } .flow-btn:disabled { opacity: .6; cursor: default; } /* --- 入力ページ：エラーメッセージ表示（フォーム上部のサマリーのみ） --- */ .form-alert { /* display: none; */ margin: 0 0 24px; padding: 16px 20px; border-radius: 10px; background: #fdf0f2; border: 1px solid #f2c6cd; color: #c0273e; font-weight: 900; font-size: 14px; line-height: 1.8; } /* 複数エラーをリストで出す場合 */ .form-alert ul { margin: 6px 0 0; padding-left: 20px; } /* --- 確認ページ：入力内容テーブル（.company と同系のデザイン） --- */ .confirm-box { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .confirm-row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid #e5eef8; } .confirm-row:last-child { border-bottom: none; } .confirm-label { padding: 22px 24px; background: #f0f7ff; font-weight: 1000; display: flex; align-items: flex-start; } .confirm-label .required { margin-top: 3px; } .confirm-value { padding: 22px 24px; font-weight: 800; color: #385277; line-height: 1.9; word-break: break-word; white-space: pre-wrap; /* お問い合わせ内容の改行を保持 */ } .confirm-value.empty { color: #9db3cd; font-weight: 700; } .confirm-note { margin: 22px 0 0; color: #385277; font-size: 13px; line-height: 1.9; font-weight: 800; text-align: center; } /* 直接アクセス時（入力データなし） */ .no-data { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; padding: 48px 32px; text-align: center; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .no-data p { margin: 0 0 22px; font-weight: 800; color: #385277; line-height: 1.9; } /* --- 完了ページ --- */ .complete-box { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; padding: 56px 40px; text-align: center; box-shadow: 0 10px 28px rgba(9,41,90,.08); position: relative; overflow: hidden; } .complete-box::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; background: radial-gradient(circle, rgba(24,168,255,.14), transparent 62%); } .complete-icon { width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 50%; background: #061e49; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(6,30,73,.28); position: relative; z-index: 1; } .complete-icon svg { width: 44px; height: 44px; } .complete-box h2 { margin: 0 0 6px; font-size: clamp(28px, 4vw, 42px); font-weight: 1000; letter-spacing: .04em; position: relative; z-index: 1; } .complete-box .en { margin: 0 0 26px; color: #19a9ff; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; font-style: italic; position: relative; z-index: 1; } .complete-box > p { margin: 0 auto; max-width: 640px; line-height: 2; font-weight: 800; color: #385277; position: relative; z-index: 1; } .complete-info { margin: 34px auto 0; max-width: 640px; text-align: left; background: #f0f7ff; border: 1px solid #d9e7f5; border-radius: 10px; padding: 22px 26px; position: relative; z-index: 1; } .complete-info h3 { margin: 0 0 10px; font-size: 16px; font-weight: 1000; color: #071b3f; } .complete-info ul { margin: 0; padding-left: 20px; line-height: 2; font-weight: 800; color: #385277; font-size: 14px; } .complete-box .flow-actions { margin-top: 34px; position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 11. 会社案内 / ABOUT ページ専用パーツ -------------------------------------------------------------------------- */ .story-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; background: #fff; border: 1px solid #d9e7f5; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 36px rgba(9,41,90,.08); } .story-copy { padding: 44px; } .story-copy h2 { margin: 0 0 20px; font-size: clamp(32px, 4vw, 50px); font-weight: 1000; letter-spacing: .03em; color: #071b3f; } .story-copy h2::after { content: ""; display: block; width: 46px; height: 3px; background: #18a8ff; margin-top: 12px; } .story-copy p { margin: 0 0 16px; line-height: 2; font-weight: 800; color: #071b3f; } .story-visual { min-height: 420px; background: linear-gradient(180deg, rgba(6,30,73,.08), rgba(6,30,73,.42)), url("/img/www/topbanner.jpg") center/contain no-repeat; background-color: #061935; } .statement { margin-top: 34px; background: linear-gradient(90deg, rgba(6,30,73,.96), rgba(6,65,124,.88)), url("/img/www/contact-ice-bg.jpg") center/cover no-repeat; border-radius: 14px; color: #fff; padding: 40px; text-align: center; box-shadow: 0 12px 32px rgba(3,26,66,.18); } .statement strong { display: block; font-size: clamp(28px, 4vw, 46px); line-height: 1.35; font-weight: 1000; letter-spacing: .03em; } .statement span { display: block; margin-top: 14px; font-size: 16px; line-height: 1.8; font-weight: 800; color: rgba(255,255,255,.88); } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .value-card { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; padding: 30px; box-shadow: 0 10px 28px rgba(9,41,90,.08); position: relative; overflow: hidden; } .value-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -70px; background: radial-gradient(circle, rgba(24,168,255,.16), transparent 62%); } .value-icon { width: 64px; height: 64px; border-radius: 14px; border: 2px solid #7fd5ff; display: grid; place-items: center; margin-bottom: 18px; position: relative; z-index: 1; background: #f4f9ff; } .value-icon img { width: 38px; height: 38px; object-fit: contain; } .value-card h3 { margin: 0 0 12px; font-size: 26px; font-weight: 1000; color: #071b3f; position: relative; z-index: 1; } .value-card p { margin: 0; line-height: 1.8; color: #385277; font-weight: 800; position: relative; z-index: 1; } .market-block { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .market-card { border-radius: 14px; overflow: hidden; border: 1px solid #d9e7f5; background: #fff; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .market-image { height: 260px; background-size: cover; background-position: center; } .market-copy { padding: 30px; } .market-copy h3 { margin: 0 0 12px; font-size: 28px; font-weight: 1000; color: #071b3f; } .market-copy p { margin: 0; color: #385277; line-height: 1.8; font-weight: 800; } .info-table { background: #fff; border: 1px solid #d9e7f5; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(9,41,90,.08); } .info-row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid #e5eef8; } .info-row:last-child { border-bottom: none; } .info-label { padding: 20px 24px; background: #f0f7ff; font-weight: 1000; color: #071b3f; } .info-value { padding: 20px 24px; font-weight: 800; color: #385277; line-height: 1.8; } .lineup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lineup-card { position: relative; min-height: 320px; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 24px; box-shadow: 0 8px 22px rgba(9,41,90,.08); } .lineup-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.08)); } .lineup-card div { position: relative; z-index: 1; } .lineup-card h3 { margin: 0 0 10px; color: #fff; font-size: 26px; font-weight: 1000; } .lineup-card p { margin: 0; color: #fff; font-weight: 800; line-height: 1.7; font-size: 14px; } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cta-card { background: linear-gradient(90deg, rgba(6,30,73,.96), rgba(6,65,124,.88)), url("/img/www/contact-ice-bg.jpg") center/cover no-repeat; color: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 10px 28px rgba(3,26,66,.18); } .cta-card h3 { margin: 0 0 10px; font-size: 28px; font-weight: 1000; } .cta-card p { margin: 0 0 22px; line-height: 1.8; font-weight: 800; color: rgba(255,255,255,.88); } /* -------------------------------------------------------------------------- 12. 共通：テキストリンク（ページごとに配色が異なる） -------------------------------------------------------------------------- */ .page-home .text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; color: #fff; } .page-home .text-link::after { content: "›"; font-size: 22px; color: #49c7ff; } .page-news .text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 1000; color: #0b5ca8; } .page-news .text-link::after { content: "›"; font-size: 22px; color: #19a9ff; } .page-guide .text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 1000; color: #0b5ca8; } .page-guide .text-link::after { content: "›"; font-size: 22px; color: #19a9ff; } /* -------------------------------------------------------------------------- 13. 共通：コンタクトバンド / ボタン -------------------------------------------------------------------------- */ .contact-band { margin-top: 36px; background: linear-gradient(90deg, rgba(6,30,73,.96), rgba(6,65,124,.88)), url("/img/www/contact-ice-bg.jpg") center/cover no-repeat; color: #fff; border-radius: 10px; padding: 26px 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 10px 28px rgba(3,26,66,.18); } .page-products .contact-band { margin-top: 34px; } .page-home .contact-band { margin-top: 28px; border-radius: 8px; padding: 22px 36px; } .contact-band-title { font-weight: 1000; font-size: 24px; } /* トップ・ニュースはアイコン付きレイアウト */ .page-home .contact-band-title, .page-news .contact-band-title { display: flex; align-items: center; gap: 20px; font-size: 25px; } .mail-icon { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #061e49; display: grid; place-items: center; font-size: 29px; } .contact-band small { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; opacity: .9; } .page-home .contact-band small, .page-news .contact-band small { margin-top: 4px; opacity: .88; } .btn { min-width: 260px; min-height: 58px; padding: 14px 22px; border-radius: 6px; background: #fff; color: #071b3f; border: 1px solid rgba(255,255,255,.5); display: inline-flex; align-items: center; justify-content: center; gap: 18px; font-weight: 1000; } .btn::after { content: "›"; font-size: 24px; color: #0b6ec6; } .page-products .btn, .page-guide .btn { min-width: 250px; min-height: 56px; border: 0; } .page-about .btn { min-width: 240px; min-height: 56px; } /* -------------------------------------------------------------------------- 14. フッター（全ページ共通） -------------------------------------------------------------------------- */ .footer { background: #061935; color: #fff; padding: 38px 5% 0; } /* ガイド・お問い合わせページはフッター上に余白あり */ .page-guide .footer, .page-contact .footer { margin-top: 58px; } .footer-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.18); } .footer-logo-img { width: 178px; max-height: 52px; object-fit: contain; margin-bottom: 14px; } .footer-logo-fallback { display: none; font-family: Georgia, serif; font-size: 34px; font-weight: 800; letter-spacing: 2px; margin-bottom: 14px; } .footer p { line-height: 1.75; color: rgba(255,255,255,.86); font-weight: 700; margin: 0; } .footer h3 { margin: 0 0 12px; font-size: 17px; letter-spacing: .04em; } .copyright { max-width: 1500px; margin: 0 auto; padding: 18px 0; text-align: center; color: rgba(255,255,255,.82); font-size: 13px; } /* ========================================================================== 15. メディアクエリ（3ブレークポイントに統合） ========================================================================== */ /* ---------- ~1100px ---------- */ @media (max-width: 1100px) { .nav { gap: 22px; } /* 製品ページの元CSSには1100px指定がないため、ここでは元の値を維持（外側の .page-products .nav 指定が詳細度で優先されるため追加指定不要） */ .footer-grid { grid-template-columns: 1fr 1fr; } /* 製品ページの元CSSは980pxまで4カラムを維持 */ .page-products .footer-grid { grid-template-columns: 1.1fr 1fr 1fr 1fr; } /* トップページ */ .products-grid { grid-template-columns: repeat(2, 1fr); } .primary-actions { grid-template-columns: 1fr; } .sub-links { grid-template-columns: 1fr; } /* ニュースページ */ .news-layout { grid-template-columns: 1fr; } .page-news .side-box { position: static; } /* ガイドページ */ .guide-nav { grid-template-columns: repeat(2, 1fr); } .guide-head { grid-template-columns: 1fr; } .guide-img { max-width: 360px; margin: 0 auto; } .steps { grid-template-columns: 1fr; } /* お問い合わせページ */ .form-wrap { grid-template-columns: 1fr; } /* ABOUTページ */ .story-card, .market-block, .cta-grid { grid-template-columns: 1fr; } .lineup-grid { grid-template-columns: repeat(2, 1fr); } } /* ---------- ~980px ---------- */ @media (max-width: 980px) { .header { height: 72px; padding: 0 4.5%; } .site-logo-img { width: 148px; } .logo-text { font-size: 26px; } .logo-text small { font-size: 9px; letter-spacing: 3px; } .nav { display: none; position: absolute; top: 72px; left: 0; width: 100%; background: #061935; flex-direction: column; align-items: stretch; gap: 0; } /* 製品ページのデスクトップ用 gap:46px をモバイルでは解除 */ .page-products .nav { gap: 0; } .nav.active { display: flex; } .nav a { padding: 17px 5%; border-bottom: 1px solid rgba(255,255,255,.12); } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; } .lang { display: inline-flex; } .lang span { padding: 9px 11px; } .page-hero { padding: 72px 5% 68px; } .page-products .page-hero { padding: 58px 5% 52px; } .page-news .page-hero { padding: 70px 5% 64px; } .page-hero--compact { padding: 64px 5% 58px; } /* 製品ページ */ .category-head { display: block; } .category-image { max-width: 100%; margin: 0 auto 20px; } .flavor-grid { grid-template-columns: 1fr; } .page-products .footer-grid { grid-template-columns: 1fr; } /* トップページ */ .features { grid-template-columns: 1fr; } .feature { border-right: none; border-bottom: 1px solid rgba(255,255,255,.16); } .about-copy { padding: 28px; } .page-home .news-list li { grid-template-columns: 1fr; gap: 8px; } /* ニュースページ */ .news-card { grid-template-columns: 1fr; } /* お問い合わせページ */ .contact-cards { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .company-row { grid-template-columns: 1fr; } /* お問い合わせ：確認・完了フロー */ .confirm-row { grid-template-columns: 1fr; } .confirm-label { padding: 16px 24px 8px; } .confirm-value { padding: 0 24px 18px; } /* ABOUTページ */ .value-grid { grid-template-columns: 1fr; } .info-row { grid-template-columns: 1fr; } /* 共通 */ .contact-band { flex-direction: column; align-items: stretch; } .page-home .btn, .page-products .btn, .page-news .btn, .page-guide .btn { min-width: 100%; } } /* ---------- ~520px ---------- */ @media (max-width: 520px) { .site-logo-img { width: 126px; } .logo-text { font-size: 22px; } .header-actions { gap: 6px; } .menu-toggle { width: 38px; height: 38px; font-size: 24px; } .lang { font-size: 11px; } .lang span { padding: 8px 9px; } .section { padding: 34px 5%; } .page-guide .section, .page-contact .section, .page-about .section { padding: 36px 5%; } /* 製品ページ */ .category-head { padding: 22px; } .flavor-grid { padding: 18px; } /* トップページ */ .products-grid { grid-template-columns: 1fr; } .product-card { min-height: 260px; text-align: center; align-items: center; justify-content: center; } /* ニュースページ */ .filter-tabs a { min-width: auto; flex: 1 1 calc(50% - 8px); } /* ガイドページ */ .guide-nav { grid-template-columns: 1fr; } .guide-head, .steps { padding: 22px; } /* お問い合わせページ */ .form-box, .contact-card { padding: 24px; } .page-contact .side-box { padding: 24px; } .submit-btn { width: 100%; } /* お問い合わせ：確認・完了フロー */ .flow-step { min-width: 78px; } .flow-actions { flex-direction: column-reverse; } .flow-btn { width: 100%; } .complete-box { padding: 40px 24px; } .complete-info { padding: 18px 20px; } /* ABOUTページ */ .story-copy, .market-copy, .cta-card { padding: 24px; } .story-visual { min-height: 260px; } .lineup-grid { grid-template-columns: 1fr; } .lineup-card { min-height: 260px; } .page-about .btn { width: 100%; } /* 共通 */ .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== DISPO2 使用方法・FAQ ページ（メイン内容をマージ）・全セレクタを body.page-dispo2-guide 配下にスコープ（他ページに影響しない）・共有クラス .hero/.btn/.feature/.section-title は .dg-* に改名し iceberg と非衝突・ヘッダー/フッターは共通レイアウト側で管理するためマージ対象外 ========================================================================== */ body.page-dispo2-guide{ --navy:#071f49; --navy-2:#0d315f; --blue:#31a9ff; --ice:#eef8ff; --ice-2:#f7fbff; --line:#cfe3f4; --text:#10284b; --muted:#4f6682; --white:#fff; --danger:#b22626; --shadow:0 10px 30px rgba(7,31,73,.08); --radius:18px; --max:1180px; } html:has(body.page-dispo2-guide){scroll-behavior:smooth} body.page-dispo2-guide{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:var(--text); background:#f4f9fd; line-height:1.75; } .page-dispo2-guide button{font:inherit} .page-dispo2-guide .container{width:min(calc(100% - 32px),var(--max));margin:auto} .page-dispo2-guide .dg-hero{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(circle at 76% 38%,rgba(55,174,255,.34),transparent 30%), linear-gradient(120deg,#04152f 0%,#0b2b50 56%,#2e587a 100%); padding:78px 0; } .page-dispo2-guide .dg-hero::after{ content:""; position:absolute; inset:auto -10% -55% 35%; height:420px; background:radial-gradient(ellipse,rgba(98,193,255,.22),transparent 62%); transform:rotate(-10deg); } .page-dispo2-guide .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; } .page-dispo2-guide .eyebrow{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:7px 14px; font-size:.82rem; font-weight:800; background:rgba(255,255,255,.08); } .page-dispo2-guide .dg-hero h1{ margin:20px 0 4px; font-size:clamp(3.4rem,8vw,6.8rem); line-height:.92; letter-spacing:.01em; } .page-dispo2-guide .hero-sub{ margin:0 0 20px; color:var(--blue); font-size:clamp(1.7rem,3.5vw,3rem); font-weight:900; font-style:italic; } .page-dispo2-guide .hero-copy{max-width:720px;font-weight:700} .page-dispo2-guide .hero-visual{ min-height:350px; border:1px solid rgba(255,255,255,.18); border-radius:28px; display:grid; place-items:center; padding:24px; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)); box-shadow:0 30px 90px rgba(0,0,0,.22); } .page-dispo2-guide .image-placeholder{ width:100%; min-height:280px; border:2px dashed rgba(255,255,255,.42); border-radius:20px; display:grid; place-items:center; text-align:center; padding:24px; color:rgba(255,255,255,.82); font-weight:800; } .page-dispo2-guide .jump-nav{ background:#fff; border-bottom:1px solid var(--line); box-shadow:0 7px 18px rgba(7,31,73,.05); } .page-dispo2-guide .jump-inner{ display:flex; gap:10px; overflow:auto; padding:14px 0; } .page-dispo2-guide .jump-inner a{ white-space:nowrap; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.85rem; font-weight:800; background:var(--ice-2); } .page-dispo2-guide section{padding:74px 0} .page-dispo2-guide .dg-section-title{text-align:center;margin-bottom:36px} .page-dispo2-guide .dg-section-title .bar{width:42px;height:4px;background:var(--blue);margin:0 auto 13px;border-radius:10px} .page-dispo2-guide .dg-section-title h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.2;margin:0} .page-dispo2-guide .dg-section-title p{margin:10px auto 0;color:var(--muted);max-width:740px;font-weight:600} .page-dispo2-guide .panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } /* .page-dispo2-guide .intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; } */ .page-dispo2-guide .intro-copy{padding:36px} .page-dispo2-guide .intro-copy h3{font-size:2rem;margin:0 0 10px} .page-dispo2-guide .intro-copy p{color:var(--muted);font-weight:600} .page-dispo2-guide .feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; } .page-dispo2-guide .dg-feature{ text-align:center; border:1px solid var(--line); border-radius:16px; padding:20px 12px; background:var(--ice-2); font-weight:900; } .page-dispo2-guide .dg-feature span{display:block;font-size:1.85rem;margin-bottom:8px} .page-dispo2-guide .parts{padding:36px} .page-dispo2-guide .parts h3{margin-top:0;font-size:1.7rem} .page-dispo2-guide .parts-image{ min-height:330px; border:2px dashed #9dc8e8; border-radius:16px; display:grid; place-items:center; text-align:center; padding:24px; color:var(--muted); background:var(--ice); font-weight:800; } .page-dispo2-guide .steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .page-dispo2-guide .step-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow); } .page-dispo2-guide .step-no{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-weight:900; margin-bottom:16px; } .page-dispo2-guide .step-card h3{font-size:1.3rem;margin:0 0 10px} .page-dispo2-guide .step-card p{color:var(--muted);font-weight:600;margin:0 0 18px} .page-dispo2-guide .step-image{ min-height:210px; display:grid; place-items:center; border-radius:14px; border:2px dashed #b6d7ee; background:var(--ice-2); color:#6682a0; text-align:center; padding:16px; font-weight:800; } .page-dispo2-guide .how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .page-dispo2-guide .how-card{padding:32px} .page-dispo2-guide .how-card h3{font-size:1.7rem;margin:0 0 8px} .page-dispo2-guide .how-card p{color:var(--muted);font-weight:600} .page-dispo2-guide .info-list{padding-left:1.2rem;margin-bottom:0} .page-dispo2-guide .info-list li{margin:8px 0;font-weight:600} .page-dispo2-guide .status-box{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; } .page-dispo2-guide .status{ background:var(--ice); border:1px solid var(--line); border-radius:14px; padding:16px; font-weight:800; } .page-dispo2-guide .replacement-steps{ counter-reset:item; display:grid; gap:12px; margin-top:18px; } .page-dispo2-guide .replacement-step{ position:relative; padding:14px 14px 14px 54px; border:1px solid var(--line); border-radius:14px; background:var(--ice-2); font-weight:700; } .page-dispo2-guide .replacement-step::before{ counter-increment:item; content:counter(item); position:absolute; left:14px; top:13px; width:28px;height:28px;border-radius:50%; display:grid;place-items:center; background:var(--navy);color:#fff;font-weight:900; } .page-dispo2-guide .table-wrap{overflow-x:auto} .page-dispo2-guide table{ width:100%; border-collapse:collapse; min-width:760px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); } .page-dispo2-guide th, .page-dispo2-guide td{padding:17px 18px;border:1px solid var(--line);text-align:left;vertical-align:top} .page-dispo2-guide th{background:var(--navy);color:#fff} .page-dispo2-guide td{font-weight:600} .page-dispo2-guide .note{margin-top:12px;color:var(--muted);font-size:.9rem} .page-dispo2-guide .faq-list{display:grid;gap:14px} .page-dispo2-guide details{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 18px rgba(7,31,73,.05); overflow:hidden; } .page-dispo2-guide summary{ cursor:pointer; list-style:none; padding:20px 54px 20px 22px; font-weight:900; position:relative; } .page-dispo2-guide summary::-webkit-details-marker{display:none} .page-dispo2-guide summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--blue); } .page-dispo2-guide details[open] summary::after{content:"−"} .page-dispo2-guide .faq-answer{ padding:0 22px 20px; color:var(--muted); font-weight:600; } .page-dispo2-guide .safety-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .page-dispo2-guide .safety-card{padding:30px} .page-dispo2-guide .safety-card h3{font-size:1.55rem;margin-top:0} .page-dispo2-guide .warning{ border-left:5px solid var(--danger); background:#fff7f7; } .page-dispo2-guide .contact-box{ text-align:center; padding:44px 24px; background:linear-gradient(135deg,#fff,#edf8ff); } .page-dispo2-guide .contact-box h2{margin:0 0 10px;font-size:2rem} .page-dispo2-guide .contact-box p{color:var(--muted);font-weight:600} .page-dispo2-guide .dg-btn{ display:inline-flex; justify-content:center; align-items:center; min-width:280px; margin-top:18px; padding:15px 22px; border-radius:999px; background:var(--navy); color:#fff; font-weight:900; box-shadow:0 12px 26px rgba(7,31,73,.18); } @media(max-width:980px){.page-dispo2-guide .hero-grid, .page-dispo2-guide .intro-grid, .page-dispo2-guide .how-grid, .page-dispo2-guide .safety-grid{grid-template-columns:1fr} .page-dispo2-guide .feature-grid, .page-dispo2-guide .steps-grid{grid-template-columns:repeat(2,1fr)} .page-dispo2-guide .dg-hero{padding:58px 0} .page-dispo2-guide .hero-visual{min-height:280px}} @media(max-width:640px){.page-dispo2-guide .container{width:min(calc(100% - 20px),var(--max))} .page-dispo2-guide section{padding:54px 0} .page-dispo2-guide .dg-hero h1{font-size:3.25rem} .page-dispo2-guide .hero-sub{font-size:1.7rem} .page-dispo2-guide .feature-grid, .page-dispo2-guide .steps-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .page-dispo2-guide .dg-feature{ min-height:126px; padding:14px 8px; display:flex; flex-direction:column; justify-content:center; align-items:center; } .page-dispo2-guide .dg-feature span{ font-size:1.55rem; margin-bottom:6px; } .page-dispo2-guide .step-card{padding:14px} .page-dispo2-guide .step-card h3{ font-size:1rem; line-height:1.45; } .page-dispo2-guide .step-card p{ font-size:.84rem; line-height:1.6; } .page-dispo2-guide .step-no{ width:34px; height:34px; font-size:.86rem; margin-bottom:12px; } .page-dispo2-guide .step-image{ min-height:120px; padding:10px; font-size:.82rem; } .page-dispo2-guide .status-box{grid-template-columns:1fr} .page-dispo2-guide .intro-copy, .page-dispo2-guide .parts, .page-dispo2-guide .how-card, .page-dispo2-guide .safety-card{padding:24px} .page-dispo2-guide .dg-btn{min-width:100%}} /* -------------------------------------------------------------------------- DISPO2ガイド：CMS/テンプレートが自動挿入する空要素対策グリッド直下に紛れ込んだ空の

や
がセルを1つ占有し、カラムが1つずつ右へずれる（1枚目が右・2枚目が次行左に落ちる）症状を防ぐ -------------------------------------------------------------------------- */ .page-dispo2-guide :is(.hero-grid, .intro-grid, .feature-grid, .steps-grid, .how-grid, .status-box, .replacement-steps, .safety-grid, .faq-list, .jump-inner) > br, .page-dispo2-guide :is(.hero-grid, .intro-grid, .feature-grid, .steps-grid, .how-grid, .status-box, .replacement-steps, .safety-grid, .faq-list, .jump-inner) > p:empty{ display:none !important; } /* 実画像表示用：プレースホルダーの点線枠・余白・背景を削除 */ .page-dispo2-guide .image-placeholder, .page-dispo2-guide .step-image{ min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; overflow:hidden; } .page-dispo2-guide .image-placeholder{ width:100%; border-radius:20px; } .page-dispo2-guide .image-placeholder img{ display:block; width:100%; height:auto; max-height:430px; object-fit:contain; border-radius:20px; } .page-dispo2-guide .step-card{ display:flex; flex-direction:column; } .page-dispo2-guide .step-image{ width:100%; margin-top:auto; border-radius:14px; } .page-dispo2-guide .step-image img{ display:block; width:100%; height:220px; object-fit:cover; object-position:center; border-radius:14px; } /* STEP4の2分割画像は全体を見せる */ .page-dispo2-guide .steps-grid .step-card:nth-child(4) .step-image img{ object-fit:contain; background:#fff; } /* 充電画像は横長比率を活かす */ .page-dispo2-guide #charge .step-image img{ height:auto; aspect-ratio:16/9; object-fit:cover; } .page-dispo2-guide .hero-visual{ padding:16px; } @media(max-width:640px){ .page-dispo2-guide .step-image img{ height:132px; } .page-dispo2-guide .image-placeholder img{ max-height:300px; } .page-dispo2-guide .hero-visual{ padding:10px; } }