/* テックライフマーケット — 大手家電量販店EC風(赤系・情報密度高め) */ /* フォールドの位置は framing.css の .fv(高さ = var(--fv-h))が持つ。 index.html でヘッダー〜商品エリアを .fv で囲ってあるので、「商品の特徴」は 常にその下に送られる。--page-max は横幅の設計値で、高さの調整には使わないこと (以前は最大幅を広げて高さを間接的に合わせていたが、文言が変わるたびに崩れた) */ :root { --page-max: 1240px; /* ロゴの色。ここにカラーコードを入れ替えるだけでヘッダーのロゴ全体が変わる。 支給SVG は色指定なし(黒)。帯(グローバルナビ)に合わせるなら #f08c1a にする。 撮影中に試すだけなら index.html?logo=ff0000 で一時的に上書きできる (仕組みは index.html の 内スクリプト)。 稲妻マークはバッジの抜きなので、ここを変えるとマークの色も追従する */ --logo-color: #000000; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #222; background: #fff; font-size: 14px; line-height: 1.6; } a { color: #0055aa; } img { max-width: 100%; } /* header */ .site-header { border-bottom: 3px solid #d4780f; } /* ナビと同系色(赤黄色の濃いトーン) */ .header-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: var(--page-max); margin: 0 auto; padding: 12px 16px; } /* 量販店ロゴらしい太さを出すため和文の最太ウェイトを明示指定(未搭載環境は font-weight: 900 で代替)。 字間はロゴタイプらしく詰める */ .logo { font-family: "Hiragino Sans W9", "Hiragino Sans W8", "Hiragino Kaku Gothic StdN W8", -apple-system, "Hiragino Sans", Meiryo, sans-serif; font-size: 25px; font-weight: 900; color: #d92b2b; letter-spacing: -0.01em; } /* 支給ロゴ。色を CSS から差し替えるため index.html にインライン展開してある ( で読むと外側の CSS が SVG の内側に届かない)。高さは従来の文字ロゴ 25px と同等 */ .logo-svg { height: 30px; width: auto; display: block; fill: var(--logo-color); } .search-box { display: flex; flex: 1; min-width: 220px; } .search-box input { flex: 1; border: 2px solid #f08c1a; border-right: none; padding: 7px 10px; /* 帯(グローバルナビ)と同色 */ font-size: 13px; border-radius: 3px 0 0 3px; } .search-box button { background: #f08c1a; color: #fff; border: none; padding: 0 18px; /* 帯(グローバルナビ)と同色 */ font-weight: bold; cursor: pointer; border-radius: 0 3px 3px 0; } .header-links { display: flex; gap: 14px; list-style: none; font-size: 12px; } .global-nav { background: #f08c1a; } /* 赤 → 赤黄色(オレンジ) */ .global-nav ul { display: flex; list-style: none; max-width: var(--page-max); margin: 0 auto; overflow-x: auto; white-space: nowrap; } .global-nav a { display: block; color: #fff; text-decoration: none; padding: 9px 16px; font-size: 13px; } .global-nav .current a, .global-nav a:hover { background: #d4780f; } /* breadcrumb */ .breadcrumb { max-width: var(--page-max); margin: 10px auto; padding: 0 16px; font-size: 12px; color: #666; } /* product layout */ .product-layout { max-width: var(--page-max); margin: 0 auto; padding: 8px 16px 32px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; /* 商品画像を主役に。右の購入カラムは狭め */ } .main-image { width: 100%; border: 1px solid #ddd; border-radius: 4px; background: #fff; } .thumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .thumbs img { width: 72px; height: 72px; object-fit: cover; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; } .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .photo-grid figure { margin: 0; } .photo-grid img { width: 100%; border: 1px solid #ddd; border-radius: 4px; display: block; } .photo-grid figcaption { font-size: 12px; color: #666; padding: 4px 2px; } .thumbs img:hover { border-color: #d92b2b; } .maker { font-size: 12px; color: #666; } .product-info h1 { font-size: 18px; margin: 4px 0 8px; line-height: 1.4; } /* 右カラムを狭めたぶん1段小さく */ .rating { font-size: 13px; margin-bottom: 12px; } .stars { color: #f5a623; letter-spacing: 1px; } .model-no { color: #888; font-size: 12px; margin-left: 10px; } .price-box { padding: 8px 0 12px; margin-bottom: 14px; } /* 赤枠なし */ .price { font-size: 30px; font-weight: 900; color: #111; } /* 金額は黒 */ .price .tax { font-size: 14px; font-weight: normal; color: #333; } .point { font-size: 13px; margin-top: 4px; } .point strong { color: #d92b2b; } .stock { font-size: 13px; margin-top: 6px; } .in-stock { background: #1a7f37; color: #fff; padding: 1px 8px; border-radius: 3px; font-size: 12px; margin-right: 6px; } .buy-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .buy-buttons button { padding: 12px; font-size: 15px; font-weight: bold; border-radius: 4px; cursor: pointer; } .btn-cart { background: #f5a623; border: 1px solid #d18c0e; color: #222; } .btn-buy { background: #d92b2b; border: 1px solid #a81d1d; color: #fff; } .btn-fav { background: #fff; border: 1px solid #aaa; color: #333; font-weight: normal; } .quick-spec { width: 100%; border-collapse: collapse; font-size: 13px; } .quick-spec th, .quick-spec td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; } .quick-spec th { background: #f5f5f5; width: 34%; font-weight: normal; color: #555; } /* detail */ .detail-section { max-width: var(--page-max); margin: 0 auto; padding: 0 16px 32px; } .detail-section h2 { font-size: 17px; border-left: 5px solid #d92b2b; padding-left: 10px; margin: 28px 0 14px; background: #fafafa; padding-top: 6px; padding-bottom: 6px; } .detail-section > p { margin-bottom: 12px; text-align: justify; } .features { list-style: none; } .features li { padding: 8px 0 8px 24px; position: relative; border-bottom: 1px dotted #ddd; } .features li::before { content: "✔"; color: #d92b2b; position: absolute; left: 4px; } .recommend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .recommend { border-radius: 4px; padding: 14px 16px; } .recommend h3 { font-size: 14px; margin-bottom: 8px; } .recommend ul { padding-left: 18px; } .recommend.good { background: #eef7ee; border: 1px solid #b7dcb7; } .recommend.good h3 { color: #1a7f37; } .recommend.bad { background: #fff4f4; border: 1px solid #eec2c2; } .recommend.bad h3 { color: #b31f1f; } .full-spec { width: 100%; border-collapse: collapse; font-size: 13px; } .full-spec th, .full-spec td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; } .full-spec th { background: #f5f5f5; width: 30%; font-weight: normal; color: #555; } .review { border: 1px solid #ddd; border-radius: 4px; padding: 12px 16px; margin-bottom: 12px; } .review-head { font-size: 14px; } .review-meta { font-size: 12px; color: #888; margin: 2px 0 6px; } .review p { font-size: 13px; } /* footer */ .site-footer { background: #333; color: #ccc; text-align: center; font-size: 12px; padding: 20px 16px; margin-top: 20px; } @media (max-width: 800px) { .product-layout { grid-template-columns: 1fr; gap: 18px; } .recommend-grid { grid-template-columns: 1fr; } .header-links { display: none; } .header-top { gap: 10px; } .search-box { flex-basis: 100%; order: 3; } .product-info h1 { font-size: 18px; } .price { font-size: 26px; } } @media (max-width: 480px) { body { font-size: 13px; } .logo { font-size: 20px; } .global-nav a { padding: 8px 12px; font-size: 12px; } .breadcrumb { white-space: nowrap; overflow-x: auto; } .product-info h1 { font-size: 16px; } .price { font-size: 24px; } .thumbs img { width: 64px; height: 64px; } .buy-buttons button { padding: 11px; font-size: 14px; } .full-spec th, .full-spec td, .quick-spec th, .quick-spec td { padding: 6px 8px; font-size: 12px; } .full-spec th { width: 38%; } .detail-section h2 { font-size: 15px; } .review { padding: 10px 12px; } }