/* Theme Name: スイーツギャラリー (SWELL Child) Theme URI: https://sweetsgallery.com/ Author: スイーツギャラリー編集部 Author URI: https://sweetsgallery.com/ Description: SWELLテーマ用の子テーマ。スイーツギャラリーのオリジナルデザインをSWELLに適用します。 Template: swell Version: 1.0.4 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: sweetsgallery-child */ /* ============================================================ ★ SWELLのスタイルはすべて親テーマから読み込まれます ★ ここにはスイーツギャラリー独自のスタイルのみ記述します ============================================================ */ /* ============================ CSS Variables & フォント ============================ */ :root { --sg-pink-deep: #E8547A; --sg-pink-mid: #F0789A; --sg-pink-light: #FAD0DC; --sg-pink-pale: #FFF0F4; --sg-cream: #FFF8EE; --sg-caramel: #D4956A; --sg-brown: #7A4E3A; --sg-text-dark: #3A2820; --sg-text-mid: #6A4C3E; --sg-text-light: #A08070; --sg-gold: #C9963A; --sg-gold-light: #F0D68A; --sg-shadow: rgba(232,84,122,0.15); --sg-radius: 16px; --sg-radius-sm: 8px; /* ============================================================ ★ レイアウト調整変数（ここを変えるだけで幅が変わります）ランキング＋地図の横並び比率。合計が 100% になるように設定。例: 50% / 50% → --sg-ranking-col: 50%; --sg-map-col: 50%; 55% / 45% → --sg-ranking-col: 55%; --sg-map-col: 45%; 60% / 40% → --sg-ranking-col: 60%; --sg-map-col: 40%; ============================================================ */ --sg-ranking-col: 55%; /* ランキング列の幅 */ --sg-map-col: 45%; /* 都道府県マップ列の幅 */ } /* SWELLの本文フォントを日本語対応に上書き */ body { font-family: 'Noto Sans JP', 'Noto Sans', sans-serif !important; background: var(--sg-cream) !important; color: var(--sg-text-dark) !important; } /* ============================================================ ★ SWELL レイアウト競合修正 — フロントページ SWELLはではなく #body_wrap に WordPress クラスを付与する。 .home セレクターは "#body_wrap.home" として指定する必要がある。 ============================================================ */ /* #content を縦並び（block）に変更してフルワイドレイアウトを実現 */ #body_wrap.home #content, #body_wrap.page.home #content { display: block !important; } /* SWELLの l-content パディング・最大幅を解除 */ #body_wrap.home #content.l-content, #body_wrap.page.home #content.l-content { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* SWELLのメインビジュアル(#main_visual)と投稿スライダーを非表示 sg-hero セクションが独自ヒーローを担うため重複を防ぐ */ #body_wrap.home #main_visual, #body_wrap.home #post_slider { display: none !important; } /* sg-section を常に全幅に */ #body_wrap.home .sg-hero, #body_wrap.home .sg-ticker, #body_wrap.home .sg-section, #body_wrap.home .sg-ranking-map-row, #body_wrap.home .sg-newsletter-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* ============================ SWELL ヘッダー上書き ============================ */ /* SWELLのヘッダーにスイーツギャラリーのピンクボーダーを適用 */ #site-header, .l-header { border-bottom: 2px solid var(--sg-pink-light) !important; background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(10px) !important; } /* ロゴフォント */ .site-name-text, .p-logo__text { font-family: 'Noto Serif JP', serif !important; color: var(--sg-brown) !important; } /* SWELLのナビゲーションリンク */ .p-header-nav__item a, .c-gnav__item a { color: var(--sg-text-mid) !important; font-size: 0.88rem !important; font-weight: 500 !important; border-radius: 8px !important; padding: 8px 14px !important; transition: background 0.2s, color 0.2s !important; } .p-header-nav__item a:hover, .c-gnav__item a:hover { background: var(--sg-pink-pale) !important; color: var(--sg-pink-deep) !important; text-decoration: none !important; } /* ============================ SWELL ボディ全体の背景 ============================ */ .l-body, #wrapper { background: var(--sg-cream) !important; } /* ============================ スイーツギャラリーユーティリティ ============================ */ /* * sg-container — セクション内コンテンツの最大幅 * ★ 横並び列の中では max-width: 100% で列幅いっぱいに広げる */ .sg-container { max-width: 1160px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } /* 横並び列内では container を列幅いっぱいに使う */ .sg-ranking-map-row .sg-container { max-width: 100%; padding: 0 28px; } .sg-section { padding: 64px 0; } .sg-section-title { font-family: 'Noto Serif JP', serif; font-size: 2rem; font-weight: 700; color: var(--sg-brown); text-align: center; margin-bottom: 8px; } .sg-section-title span { color: var(--sg-pink-deep); } .sg-section-subtitle { text-align: center; color: var(--sg-text-light); font-size: 0.92rem; margin-bottom: 48px; } .sg-btn { display: inline-block; padding: 12px 28px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; transition: all 0.25s; cursor: pointer; border: none; text-decoration: none !important; } .sg-btn-primary { background: linear-gradient(135deg, var(--sg-pink-deep), var(--sg-pink-mid)); color: white !important; box-shadow: 0 4px 14px var(--sg-shadow); } .sg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--sg-shadow); } .sg-btn-outline { background: transparent; border: 2px solid var(--sg-pink-deep); color: var(--sg-pink-deep) !important; } .sg-btn-outline:hover { background: var(--sg-pink-pale); } /* ============================ HERO セクション ============================ */ .sg-hero { background: linear-gradient(135deg, #FFF0F4 0%, #FFF8EE 50%, #FFF4E8 100%); padding: 72px 0 56px; overflow: hidden; position: relative; } .sg-hero::before { content: ''; position: absolute; top: -60px; right: -60px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(240,120,154,0.12), transparent 70%); border-radius: 50%; pointer-events: none; } .sg-hero-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; } .sg-hero-badge { margin-bottom: 16px; } .sg-badge { display: inline-block; padding: 3px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; } .sg-badge-pink { background: var(--sg-pink-light); color: var(--sg-pink-deep); } .sg-badge-gold { background: var(--sg-gold-light); color: #7A5A1A; } .sg-hero-title { font-family: 'Noto Serif JP', serif; font-size: 2.8rem; font-weight: 900; line-height: 1.3; color: var(--sg-brown); margin-bottom: 20px; } .sg-hero-title .accent { color: var(--sg-pink-deep); } .sg-hero-desc { font-size: 1rem; color: var(--sg-text-mid); margin-bottom: 32px; line-height: 1.8; } .sg-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .sg-hero-stats { display: flex; gap: 24px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--sg-pink-light); flex-wrap: wrap; } .sg-stat-item { text-align: center; } .sg-stat-num { font-size: 1.8rem; font-weight: 900; color: var(--sg-pink-deep); font-family: 'Noto Serif JP', serif; } .sg-stat-label { font-size: 0.78rem; color: var(--sg-text-light); } .sg-hero-visual { position: relative; } .sg-hero-insta-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 48px rgba(232,84,122,0.2); } .sg-hero-insta-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #f0e6ee; } .sg-hero-insta-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; overflow: hidden; } .sg-hero-insta-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .sg-hero-insta-name { font-weight: 700; font-size: .9rem; color: var(--sg-brown); } .sg-hero-insta-sub { font-size: .75rem; color: var(--sg-text-light); } .sg-hero-insta-follow { margin-left: auto; background: var(--sg-pink-deep); color: white; border-radius: 8px; padding: 6px 14px; font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .sg-hero-insta-feed { padding: 0; overflow: hidden; } .sg-hero-insta-feed .sbi_load_btn_wrapper, .sg-hero-insta-feed #sbi_load, .sg-hero-insta-feed .sbi-follow-btn { display: none !important; } .sg-hero-insta-placeholder { padding: 40px; text-align: center; color: var(--sg-text-light); font-size: .9rem; } /* Hero feed: 6枚・3列に制限 */ .sg-hero-insta-feed #sbi_images .sbi_item:nth-child(n+7) { display: none !important; } .sg-hero-insta-feed #sbi_images { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; width: 100% !important; } .sg-hero-insta-feed #sbi_images .sbi_item { width: auto !important; float: none !important; } .sg-hero-insta-feed #sb_instagram { padding: 0 !important; width: 100% !important; } .sg-hero-float-1 { position: absolute; bottom: -20px; left: -20px; background: white; border-radius: 16px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); font-size: 0.85rem; font-weight: 700; color: var(--sg-brown); } .sg-hero-float-2 { position: absolute; top: -16px; right: 0; background: var(--sg-pink-deep); border-radius: 16px; padding: 10px 16px; color: white; font-size: 0.83rem; font-weight: 700; } /* ============================ お知らせティッカー ============================ */ .sg-ticker { background: linear-gradient(90deg, var(--sg-pink-deep), #C0306A); color: white; padding: 12px 0; overflow: hidden; } .sg-ticker-inner { display: flex; align-items: center; gap: 16px; max-width: 1160px; margin: 0 auto; padding: 0 24px; } .sg-ticker-label { background: white; color: var(--sg-pink-deep); font-weight: 700; font-size: 0.78rem; padding: 3px 12px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; } .sg-ticker-text { font-size: 0.88rem; white-space: nowrap; animation: sg-marquee 25s linear infinite; } @keyframes sg-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* ============================ ランキング＋地図横並びエリア ============================ */ .sg-ranking-map-row { display: flex; align-items: stretch; gap: 0; width: 100%; } /* ランキング列幅 → :root の --sg-ranking-col で一括調整 */ .sg-ranking-map-row .sg-ranking-section { flex: 0 0 var(--sg-ranking-col); width: var(--sg-ranking-col); min-width: 0; } /* 地図列幅 → :root の --sg-map-col で一括調整 */ .sg-ranking-map-row .sg-map-section { flex: 0 0 var(--sg-map-col); width: var(--sg-map-col); min-width: 0; } /* 地図列: 縦flex → ランキング列と等高に揃える */ .sg-ranking-map-row .sg-map-section { display: flex; flex-direction: column; } .sg-ranking-map-row .sg-map-section .sg-container { flex: 1; display: flex; flex-direction: column; } .sg-ranking-map-row .sg-map-section .sg-japan-map-container { flex: 1; } /* ============================ 今週のオススメランキング１位カード ============================ */ .sg-top1-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(232,84,122,0.18); margin-bottom: 28px; border: 2px solid var(--sg-pink-light); } .sg-top1-header { background: linear-gradient(135deg, var(--sg-pink-deep) 0%, #C0306A 100%); padding: 13px 20px; display: flex; align-items: center; gap: 12px; } .sg-top1-badge { background: rgba(255,255,255,0.22); color: white; font-weight: 700; font-size: 0.82rem; padding: 4px 12px; border-radius: 50px; white-space: nowrap; } .sg-top1-rank { color: white; font-weight: 900; font-size: 1rem; font-family: 'Noto Serif JP', serif; } .sg-top1-body { display: flex; } .sg-top1-img { position: relative; width: 160px; min-width: 160px; background: var(--sg-pink-bg); overflow: hidden; } .sg-top1-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sg-top1-emoji { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; } .sg-top1-pref { position: absolute; top: 8px; left: 8px; background: var(--sg-pink-deep); color: white; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; } .sg-top1-info { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sg-top1-title { font-weight: 700; font-size: 1rem; color: var(--sg-brown); line-height: 1.45; } .sg-top1-desc { font-size: 0.83rem; color: var(--sg-text-mid); line-height: 1.72; flex: 1; } .sg-top1-meta { display: flex; flex-direction: column; gap: 3px; } .sg-top1-price { font-size: 1.05rem; font-weight: 700; color: var(--sg-pink-deep); } .sg-top1-stars { font-size: 0.78rem; color: var(--sg-text-light); } .sg-top1-info .sg-rakuten-btn { align-self: flex-start; margin-top: 4px; font-size: 0.85rem; padding: 9px 18px; } /* 横並び内の上下パディングを揃える */ .sg-ranking-map-row .sg-ranking-section, .sg-ranking-map-row .sg-map-section { padding-top: 56px; padding-bottom: 56px; } /* タブレット以下は縦積み */ @media (max-width: 1024px) { .sg-ranking-map-row { flex-direction: column; } .sg-ranking-map-row .sg-ranking-section, .sg-ranking-map-row .sg-map-section { flex: none; width: 100%; } } /* ============================ ランキングカード ============================ */ .sg-ranking-section { background: white; } .sg-pref-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; } .sg-pref-tab { padding: 8px 18px; border-radius: 50px; border: 2px solid var(--sg-pink-light); background: white; color: var(--sg-text-mid); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; } .sg-pref-tab:hover, .sg-pref-tab.active { background: var(--sg-pink-deep); border-color: var(--sg-pink-deep); color: white; } .sg-ranking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .sg-ranking-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.07); transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; } .sg-ranking-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(232,84,122,0.15); } .sg-ranking-card-img { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; position: relative; } .sg-rank-badge { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1rem; color: white; } .sg-rank-1 { background: linear-gradient(135deg,#FFD700,#FFA500); box-shadow: 0 4px 12px rgba(255,165,0,0.5); } .sg-rank-2 { background: linear-gradient(135deg,#C0C0C0,#A0A0A0); } .sg-rank-3 { background: linear-gradient(135deg,#CD7F32,#A0622A); } .sg-rank-n { background: var(--sg-pink-deep); } .sg-pref-tag { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.9); color: var(--sg-brown); font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; } .sg-ranking-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .sg-ranking-card-title { font-weight: 700; font-size: 1.05rem; color: var(--sg-brown); margin-bottom: 6px; } .sg-ranking-card-desc { font-size: 0.85rem; color: var(--sg-text-mid); flex: 1; margin-bottom: 12px; } .sg-ranking-card-footer { display: flex; align-items: center; justify-content: space-between; } .sg-price-tag { font-weight: 700; color: var(--sg-pink-deep); font-size: 0.95rem; } .sg-price-tag small { font-size: 0.75rem; color: var(--sg-text-light); } .sg-rakuten-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,#BF0000,#E30000); color: white !important; padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; transition: opacity 0.2s; text-decoration: none !important; } .sg-rakuten-btn:hover { opacity: 0.85; } /* ============================ 日本地図タイル ============================ */ .sg-map-section { background: var(--sg-pink-pale); } .sg-japan-map-container { background: white; border-radius: 16px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .sg-pref-quick-grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 1fr; gap: 3px; } .sg-pref-quick-item { border-radius: 5px; padding: 5px 2px; font-size: 0.62rem; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.18s; color: white; text-decoration: none !important; display: flex; align-items: center; justify-content: center; line-height: 1.2; min-height: 32px; } .sg-pref-quick-item:hover { filter: brightness(1.15); transform: scale(1.05); } .sg-tile-hokkaido { background: #3A7ABF; } .sg-tile-tohoku { background: #30A8C8; } .sg-tile-kanto, .sg-tile-chubu-east { background: #4A9A40; } .sg-tile-kinki, .sg-tile-chubu-west { background: #88B830; } .sg-tile-chugoku, .sg-tile-shikoku { background: #C8A020; } .sg-tile-kyushu, .sg-tile-okinawa { background: #D85030; } .sg-pref-all-btn { display: block; margin-top: 14px; padding: 10px; text-align: center; background: linear-gradient(135deg, var(--sg-pink-deep), #F0789A); color: white !important; border-radius: 8px; font-size: 0.85rem; font-weight: 700; text-decoration: none !important; transition: opacity 0.2s; } .sg-pref-all-btn:hover { opacity: 0.85; } /* ============================ 歴史・コラムカード ============================ */ .sg-history-section { background: white; } .sg-history-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; } .sg-history-tab { padding: 10px 22px; border-radius: 50px; border: 2px solid var(--sg-pink-light); background: white; color: var(--sg-text-mid); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: all 0.2s; } .sg-history-tab:hover, .sg-history-tab.active { background: linear-gradient(135deg, var(--sg-pink-deep), var(--sg-caramel)); border-color: transparent; color: white; } .sg-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; } .sg-history-card { background: white; border-radius: 16px; overflow: hidden; border: 1px solid var(--sg-pink-light); transition: all 0.25s; } .sg-history-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(232,84,122,0.12); border-color: var(--sg-pink-mid); } .sg-history-card-img { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; } .sg-era-badge { position: absolute; bottom: 10px; left: 12px; background: rgba(42,20,10,0.75); color: white; font-size: 0.72rem; padding: 3px 10px; border-radius: 50px; } .sg-history-card-body { padding: 18px; } .sg-history-card-cat { font-size: 0.75rem; color: var(--sg-pink-deep); font-weight: 700; margin-bottom: 4px; } .sg-history-card-title { font-weight: 700; font-size: 1rem; color: var(--sg-brown); margin-bottom: 8px; } .sg-history-card-desc { font-size: 0.85rem; color: var(--sg-text-mid); line-height: 1.65; margin-bottom: 14px; } .sg-history-card-link { font-size: 0.85rem; color: var(--sg-pink-deep); font-weight: 600; text-decoration: none !important; } .sg-history-card-link:hover { text-decoration: underline !important; } /* ============================ 楽天アフィリエイト ============================ */ .sg-rakuten-section { background: linear-gradient(135deg,#FFF4E8,#FFF0F4); } .sg-rakuten-header { background: linear-gradient(135deg,#BF0000,#E30000); border-radius: 16px; padding: 32px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; color: white; } .sg-rakuten-header-text h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 6px; } .sg-rakuten-header-text p { font-size: 0.9rem; opacity: 0.85; } .sg-affiliate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .sg-affiliate-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.07); transition: all 0.25s; } .sg-affiliate-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); } .sg-affiliate-card-img { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3rem; } .sg-affiliate-card-body { padding: 14px; } .sg-affiliate-card-shop { font-size: 0.72rem; color: var(--sg-text-light); margin-bottom: 4px; } .sg-affiliate-card-name { font-weight: 700; font-size: 0.9rem; color: var(--sg-text-dark); margin-bottom: 8px; line-height: 1.4; } .sg-affiliate-card-price { color: #BF0000; font-weight: 700; font-size: 1rem; margin-bottom: 10px; } .sg-affiliate-card-btn { display: block; background: linear-gradient(135deg,#BF0000,#E30000); color: white !important; text-align: center; padding: 9px; border-radius: 8px; font-size: 0.82rem; font-weight: 700; text-decoration: none !important; transition: opacity 0.2s; } .sg-affiliate-card-btn:hover { opacity: 0.85; } .sg-affiliate-disclaimer { text-align: center; font-size: 0.78rem; color: var(--sg-text-light); margin-top: 24px; } /* ============================ スイーツニュース ============================ */ .sg-news-section { background: white; } .sg-news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .sg-news-card { border: 1px solid var(--sg-pink-light); border-radius: 16px; overflow: hidden; background: white; transition: box-shadow 0.2s, transform 0.2s; position: relative; display: flex; flex-direction: column; } .sg-news-card:hover { box-shadow: 0 8px 24px var(--sg-shadow); transform: translateY(-3px); } .sg-news-cat-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; color: white; z-index: 1; } .sg-news-cat-new { background: var(--sg-pink-deep); } .sg-news-cat-collab { background: #8A5AB0; } .sg-news-cat-limited { background: #D48030; } .sg-news-cat-trend { background: #4A9A5E; } .sg-news-cat-award { background: var(--sg-gold); } .sg-news-thumb { background: linear-gradient(135deg,var(--sg-pink-pale),#FFF0E0); text-align: center; font-size: 2.8rem; padding: 28px 0 20px; line-height: 1; } .sg-news-body { padding: 16px; flex: 1; display: flex; flex-direction: column; } .sg-news-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .sg-news-date { font-size: 0.72rem; color: var(--sg-text-light); } .sg-news-brand { font-size: 0.7rem; background: var(--sg-pink-pale); color: var(--sg-pink-deep); padding: 2px 8px; border-radius: 4px; font-weight: 600; } .sg-news-title { font-size: 0.88rem; font-weight: 700; color: var(--sg-text-dark); line-height: 1.5; margin-bottom: 8px; } .sg-news-title a { color: inherit !important; text-decoration: none !important; } .sg-news-title a:hover { color: var(--sg-pink-deep) !important; } .sg-news-desc { font-size: 0.78rem; color: var(--sg-text-mid); line-height: 1.65; flex: 1; margin-bottom: 12px; } .sg-news-link { font-size: 0.78rem; font-weight: 700; color: var(--sg-pink-deep); text-decoration: none !important; align-self: flex-start; } .sg-news-link:hover { text-decoration: underline !important; } /* ============================ Instagram セクション ============================ */ .sg-instagram-section { background: linear-gradient(135deg,#fdf0f8,#fff5f0); } .sg-instagram-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } .sg-ig-profile-card { background: white; border-radius: 16px; padding: 28px 20px; box-shadow: 0 4px 16px rgba(232,84,122,0.1); text-align: center; border: 1px solid var(--sg-pink-light); position: sticky; top: 80px; } .sg-ig-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 12px; box-shadow: 0 0 0 3px white, 0 0 0 5px #e6683c; } .sg-ig-name { font-weight: 700; font-size: 1rem; color: var(--sg-text-dark); margin-bottom: 2px; } .sg-ig-handle { font-size: 0.78rem; color: var(--sg-text-light); margin-bottom: 14px; } .sg-ig-stats { display: flex; justify-content: space-around; margin-bottom: 18px; padding: 12px 0; border-top: 1px solid var(--sg-pink-light); border-bottom: 1px solid var(--sg-pink-light); } .sg-ig-stat-num { font-weight: 700; font-size: 1.05rem; color: var(--sg-text-dark); } .sg-ig-stat-label { font-size: 0.68rem; color: var(--sg-text-light); } .sg-ig-bio { font-size: 0.78rem; color: var(--sg-text-mid); line-height: 1.6; margin-bottom: 16px; } .sg-ig-follow-btn { display: block; width: 100%; padding: 10px; border-radius: 8px; background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: white !important; font-weight: 700; font-size: 0.85rem; text-decoration: none !important; transition: opacity 0.2s; } .sg-ig-follow-btn:hover { opacity: 0.85; } .sg-ig-hashtag { margin-top: 14px; padding: 10px; background: var(--sg-pink-pale); border-radius: 8px; font-size: 0.75rem; color: var(--sg-pink-deep); font-weight: 600; } .sg-ig-feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .sg-ig-feed-title { font-size: 0.95rem; font-weight: 700; color: var(--sg-text-dark); } .sg-ig-feed-tabs { display: flex; gap: 6px; } .sg-ig-tab { padding: 5px 14px; border-radius: 50px; border: 1.5px solid var(--sg-pink-light); background: white; font-size: 0.75rem; font-weight: 600; color: var(--sg-text-mid); cursor: pointer; transition: all 0.18s; } .sg-ig-tab.active, .sg-ig-tab:hover { background: var(--sg-pink-deep); color: white; border-color: var(--sg-pink-deep); } .sg-ig-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; } .sg-ig-post { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg,var(--sg-pink-pale),#FFF0E0); display: flex; align-items: center; justify-content: center; font-size: 2rem; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s; } .sg-ig-post:hover { transform: scale(1.03); } .sg-ig-post-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; border-radius: 8px; } .sg-ig-post:hover .sg-ig-post-overlay { opacity: 1; } .sg-ig-post-likes { color: white; font-size: 0.75rem; font-weight: 700; } /* ============================ X (Twitter) セクション ============================ */ .sg-twitter-section { background: white; } .sg-twitter-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; } .sg-twitter-feed-placeholder { background: #F8F9FA; border-radius: 16px; border: 1px solid #E2E8F0; overflow: hidden; } .sg-twitter-feed-header { background: #000; color: white; padding: 16px 20px; display: flex; align-items: center; gap: 10px; font-weight: 700; } .sg-tweet-list { padding: 0; } .sg-tweet-item { padding: 16px 20px; border-bottom: 1px solid #E2E8F0; } .sg-tweet-item:last-child { border-bottom: none; } .sg-tweet-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .sg-tweet-avatar { width: 36px; height: 36px; background: linear-gradient(135deg,var(--sg-pink-deep),var(--sg-caramel)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white; } .sg-tweet-name { font-weight: 700; font-size: 0.88rem; color: #0F1419; } .sg-tweet-handle { font-size: 0.78rem; color: #657786; } .sg-tweet-text { font-size: 0.88rem; color: #0F1419; line-height: 1.5; margin-bottom: 8px; } .sg-tweet-meta { font-size: 0.75rem; color: #657786; } .sg-tweet-actions { display: flex; gap: 20px; margin-top: 8px; } .sg-tweet-action { font-size: 0.8rem; color: #657786; cursor: pointer; } .sg-tweet-action:hover { color: var(--sg-pink-deep); } .sg-twitter-side { display: flex; flex-direction: column; gap: 24px; } .sg-twitter-profile-card { background: linear-gradient(135deg,var(--sg-pink-pale),#FFF8EE); border-radius: 16px; padding: 24px; border: 1px solid var(--sg-pink-light); text-align: center; } .sg-twitter-profile-icon { width: 72px; height: 72px; background: linear-gradient(135deg,var(--sg-pink-deep),var(--sg-caramel)); border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; } .sg-twitter-profile-name { font-weight: 700; font-size: 1.05rem; color: var(--sg-brown); } .sg-twitter-profile-handle { color: var(--sg-text-light); font-size: 0.85rem; margin-bottom: 12px; } .sg-twitter-profile-desc { font-size: 0.85rem; color: var(--sg-text-mid); margin-bottom: 16px; } .sg-twitter-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; } .sg-twitter-stat { text-align: center; } .sg-twitter-stat-num { font-weight: 700; font-size: 1.1rem; color: var(--sg-brown); } .sg-twitter-stat-label { font-size: 0.72rem; color: var(--sg-text-light); } .sg-twitter-follow-btn { display: block; background: #000; color: white !important; padding: 10px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; text-align: center; transition: background 0.2s; text-decoration: none !important; } .sg-twitter-follow-btn:hover { background: #333; } /* ============================ コラム・サイドバー ============================ */ .sg-column-section { background: var(--sg-pink-pale); } .sg-column-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; } .sg-column-main-title { font-family: 'Noto Serif JP',serif; font-size: 1.3rem; font-weight: 700; color: var(--sg-brown); margin-bottom: 20px; } .sg-article-list { display: flex; flex-direction: column; gap: 16px; } .sg-article-item { background: white; border-radius: 8px; padding: 16px; display: flex; gap: 16px; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.2s; } .sg-article-item:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(232,84,122,0.1); } .sg-article-thumb { width: 80px; height: 80px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .sg-article-content { flex: 1; } .sg-article-cat { font-size: 0.72rem; color: var(--sg-pink-deep); font-weight: 700; margin-bottom: 3px; } .sg-article-title { font-weight: 700; font-size: 0.95rem; color: var(--sg-text-dark); margin-bottom: 4px; } .sg-article-title a { color: inherit !important; text-decoration: none !important; } .sg-article-meta { font-size: 0.75rem; color: var(--sg-text-light); } .sg-sidebar { display: flex; flex-direction: column; gap: 24px; } .sg-sidebar-widget { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .sg-widget-title { font-weight: 700; font-size: 0.95rem; color: var(--sg-brown); border-left: 4px solid var(--sg-pink-deep); padding-left: 10px; margin-bottom: 16px; } .sg-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .sg-tag-item { padding: 5px 12px; background: var(--sg-pink-pale); color: var(--sg-text-mid); border-radius: 50px; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; border: 1px solid var(--sg-pink-light); text-decoration: none !important; } .sg-tag-item:hover { background: var(--sg-pink-deep); color: white; } .sg-popular-list { list-style: none; padding: 0; } .sg-popular-item { padding: 10px 0; border-bottom: 1px dashed var(--sg-pink-light); font-size: 0.85rem; color: var(--sg-text-mid); transition: color 0.2s; display: flex; align-items: center; gap: 8px; } .sg-popular-item:last-child { border-bottom: none; } .sg-popular-item:hover { color: var(--sg-pink-deep); } .sg-popular-num { font-weight: 700; color: var(--sg-pink-deep); font-size: 0.75rem; width: 20px; } /* ============================ ニュースレター ============================ */ .sg-newsletter-section { background: linear-gradient(135deg,var(--sg-pink-deep),#C0306A); color: white; padding: 64px 0; } .sg-newsletter-inner { text-align: center; max-width: 560px; margin: 0 auto; } .sg-newsletter-icon { font-size: 3rem; margin-bottom: 16px; } .sg-newsletter-title { font-family: 'Noto Serif JP',serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; } .sg-newsletter-desc { opacity: 0.9; font-size: 0.95rem; margin-bottom: 28px; } .sg-newsletter-form { display: flex; gap: 10px; justify-content: center; } .sg-newsletter-input { border: none; border-radius: 50px; padding: 12px 20px; font-size: 0.9rem; outline: none; width: 280px; font-family: 'Noto Sans JP', sans-serif; } .sg-newsletter-btn { background: var(--sg-gold); color: white; border: none; border-radius: 50px; padding: 12px 24px; font-weight: 700; cursor: pointer; font-size: 0.9rem; white-space: nowrap; transition: background 0.2s; } .sg-newsletter-btn:hover { background: var(--sg-caramel); } /* ============================ スクロールトップ ============================ */ .sg-scroll-top { position: fixed; bottom: 28px; right: 28px; width: 48px; height: 48px; background: var(--sg-pink-deep); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 14px var(--sg-shadow); transition: all 0.25s; z-index: 9999; opacity: 0; text-decoration: none !important; } .sg-scroll-top:hover { transform: translateY(-3px); color: white !important; } .sg-scroll-top.visible { opacity: 1; } /* ============================ カード色背景 ============================ */ .sg-bg-wagashi { background: linear-gradient(135deg,#FFE4E6,#FFDDE0); } .sg-bg-western { background: linear-gradient(135deg,#FFF0DC,#FFE4C4); } .sg-bg-pink { background: linear-gradient(135deg,#FFD6E0,#FFBCC8); } .sg-bg-caramel { background: linear-gradient(135deg,#FFE8C4,#FFD4A0); } .sg-bg-matcha { background: linear-gradient(135deg,#D4EDDA,#B8E0C0); } .sg-bg-purple { background: linear-gradient(135deg,#E8D4F4,#D4B8EE); } .sg-bg-blue { background: linear-gradient(135deg,#D4E8F8,#B8D4F0); } /* ============================ SWELL 記事ページ上書き ============================ */ /* 記事ページのh2見出しにピンクボーダー */ .l-article .swell-block-heading2, .l-article h2 { border-left: 4px solid var(--sg-pink-deep) !important; padding-left: 14px !important; color: var(--sg-brown) !important; font-family: 'Noto Serif JP', serif !important; } /* SWELLのボタンカラー上書き */ .swell-btn, .c-btn { background: linear-gradient(135deg, var(--sg-pink-deep), var(--sg-pink-mid)) !important; border-color: var(--sg-pink-deep) !important; } /* ============================ レスポンシブ ============================ */ @media (max-width: 900px) { .sg-hero-inner { grid-template-columns: 1fr; } .sg-hero-visual { display: none; } .sg-hero-title { font-size: 2rem; } .sg-twitter-layout { grid-template-columns: 1fr; } .sg-twitter-side { display: none; } .sg-column-grid { grid-template-columns: 1fr; } .sg-instagram-layout { grid-template-columns: 1fr; } .sg-news-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 640px) { .sg-hero-title { font-size: 1.7rem; } .sg-section-title { font-size: 1.5rem; } .sg-pref-quick-grid { grid-template-columns: repeat(6,1fr); } .sg-newsletter-form { flex-direction: column; align-items: stretch; } .sg-newsletter-input { width: 100%; } .sg-news-grid { grid-template-columns: 1fr; } .sg-ig-grid { grid-template-columns: repeat(3,1fr); } .sg-rakuten-header { flex-direction: column; gap: 12px; text-align: center; } } /* ============================================================ 都道府県ページ（/pref/[slug]/）スタイル ============================================================ */ .sg-pref-page { max-width: 860px; margin: 0 auto; padding: 0 16px 40px; } /* ヒーローエリア */ .sg-pref-hero { background: linear-gradient(135deg, #ffe0e9 0%, #fff3f6 100%); border-radius: 16px; padding: 32px 28px; margin-bottom: 32px; text-align: center; border-left: 6px solid var(--sg-accent, #e05c8a); } .sg-pref-sweet-title { font-size: 2rem; font-weight: 800; color: #c0315e; margin: 0 0 8px; } .sg-pref-maker { font-size: 0.9rem; color: #888; margin: 0; } /* 本文エリア */ .sg-pref-body { display: flex; flex-direction: column; gap: 32px; } /* 楽天商品カード */ .sg-rakuten-product { text-align: center; background: #fff; border: 1px solid #f0d0da; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(224,92,138,.08); } .sg-rakuten-product img { max-width: 300px; width: 100%; height: auto; border-radius: 8px; transition: transform .2s; } .sg-rakuten-product img:hover { transform: scale(1.03); } .sg-product-caption { font-size: 0.85rem; color: #999; margin: 12px 0 0; } /* 説明テキスト */ .sg-pref-description { background: #fafafa; border-radius: 12px; padding: 24px 28px; } .sg-pref-description h3 { font-size: 1.2rem; color: #c0315e; margin: 0 0 12px; } .sg-pref-description p { line-height: 1.85; color: #444; margin: 0; } /* CTAボタン */ .sg-rakuten-cta { text-align: center; } .sg-btn-rakuten { display: inline-block; background: linear-gradient(135deg, #bf0000 0%, #e80000 100%); color: #fff !important; font-weight: 700; font-size: 1.05rem; padding: 16px 36px; border-radius: 50px; text-decoration: none !important; box-shadow: 0 4px 16px rgba(191,0,0,.3); transition: transform .15s, box-shadow .15s; } .sg-btn-rakuten:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(191,0,0,.4); } /* アフィリエイト注記 */ .sg-affiliate-note { font-size: 0.78rem; color: #aaa; text-align: center; margin: 0; padding: 0 8px; } /* レスポンシブ */ @media (max-width: 640px) { .sg-pref-hero { padding: 20px 16px; } .sg-pref-sweet-title { font-size: 1.5rem; } .sg-btn-rakuten { padding: 14px 24px; font-size: .95rem; } } /* ============================ レイアウト強制上書き: ランキング列と地図列の等高 ============================ */ .sg-ranking-map-row { align-items: stretch !important; } .sg-ranking-map-row .sg-map-section { display: flex !important; flex-direction: column !important; } .sg-ranking-map-row .sg-map-section .sg-container { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0; } .sg-ranking-map-row .sg-map-section .sg-japan-map-container { flex: 1 1 auto !important; min-height: 0; } /* ============================ 今週の人気記事ランキング ============================ */ .sg-popular-section { background: linear-gradient(135deg, #fff9fb 0%, #fff3f7 100%); border-top: 3px solid var(--sg-pink-light); } .sg-weekly-updated { font-size: 0.78rem; color: var(--sg-text-light); text-align: right; margin: -16px 0 20px; } .sg-weekly-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .sg-weekly-item { display: flex; align-items: center; gap: 16px; background: white; border-radius: 16px; padding: 14px 18px; box-shadow: 0 2px 12px rgba(232,84,122,0.08); transition: transform 0.15s, box-shadow 0.15s; } .sg-weekly-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,84,122,0.15); } .sg-pop-rank { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--sg-pink-light); color: var(--sg-pink-deep); font-weight: 900; font-size: 1.1rem; font-family: 'Noto Serif JP', serif; display: flex; align-items: center; justify-content: center; } .sg-pop-rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: white; box-shadow: 0 3px 10px rgba(255,165,0,0.4); } .sg-pop-rank-2 { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: white; box-shadow: 0 3px 10px rgba(160,160,160,0.4); } .sg-pop-rank-3 { background: linear-gradient(135deg, #CD7F32, #A0522D); color: white; box-shadow: 0 3px 10px rgba(160,82,45,0.35); } .sg-pop-thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--sg-pink-bg); } .sg-pop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sg-pop-thumb-placeholder { display: flex; align-items: center; justify-content: center; font-size: 2rem; } .sg-pop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .sg-pop-type { display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--sg-pink-deep); background: var(--sg-pink-bg); padding: 2px 8px; border-radius: 50px; width: fit-content; } .sg-pop-title { font-weight: 700; font-size: 0.95rem; color: var(--sg-brown); text-decoration: none; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sg-pop-title:hover { color: var(--sg-pink-deep); text-decoration: underline; } .sg-pop-excerpt { font-size: 0.8rem; color: var(--sg-text-light); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .sg-pop-views { flex-shrink: 0; text-align: center; font-weight: 700; font-size: 1rem; color: var(--sg-pink-deep); min-width: 60px; } .sg-pop-views small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--sg-text-light); } .sg-weekly-placeholder { text-align: center; padding: 48px 20px; color: var(--sg-text-light); font-size: 0.95rem; line-height: 1.8; background: white; border-radius: 16px; border: 2px dashed var(--sg-pink-light); } @media (max-width: 640px) { .sg-pop-thumb { width: 56px; height: 56px; } .sg-pop-excerpt { display: none; } .sg-pop-views { min-width: 48px; font-size: 0.9rem; } }