/* Theme Name: DECN Theme URI: https://decn.jp/ Description: Digital Entertainment City Namba オフィシャルサイトのテーマ。朝昼／夕夜のカラートークンを内蔵したクラシックテーマ。 Author: XIZO株式会社 Version: 1.1.0 Requires at least: 6.5 Requires PHP: 8.0 Text Domain: decn Tags: custom-menu, featured-images, translation-ready */ /* =========================================== DECN - Digital Entertainment City Namba Shared Stylesheet =========================================== */ /* ========================================== COLOR TOKENS ─ 昼（朝・昼）／夜（夕方・夜） ------------------------------------------ ・値は「RGBチャンネル値」で持つ（例: 255 255 255）。 Tailwind の透明度指定 bg-surface/80 を効かせるため。 ・--color-* は旧来の名前をそのまま残した別名。 既存の var(--color-*) 記述はすべてこの層を通って切り替わる。 ・夜側は data-theme="night" を に付けるだけで全ページ反転する。 ========================================== */ :root { /* 面（surface）── 数字が大きいほど奥 */ --c-surface-rgb: 255 255 255; /* 面0 カード・最前面 */ --c-surface1-rgb: 248 249 251; /* 面1 うっすら沈んだ面 */ --c-base-rgb: 238 240 244; /* 面2 ページの地 */ --c-line-rgb: 221 224 230; /* 罫線 */ /* 文字（ink） */ --c-sub-rgb: 139 144 160; /* 補助・キャプション */ --c-body-rgb: 74 78 90; /* 本文 */ --c-ink-rgb: 26 29 40; /* 見出し・強い文字 */ /* 反転面（ボタン・濃色帯）とその上の文字 */ --c-invert-rgb: 26 29 40; --c-on-invert-rgb: 255 255 255; /* フッターの地とその上の文字 */ --c-void-rgb: 12 14 20; --c-on-void-rgb: 238 240 244; /* フッターの本文 */ --c-on-void-st-rgb: 255 255 255; /* フッターの見出し・ロゴ */ /* 写真・動画の上に置く文字（時間帯に関わらず常に白） */ --c-on-media-rgb: 255 255 255; --c-on-media-mu-rgb:238 240 244; /* 写真の上の本文（少し落とした白） */ /* アクセント面（hoverでskyになるボタン等）の上の文字 */ --c-on-accent-rgb: 255 255 255; /* 写真の上の暗幕 */ --c-scrim-rgb: 0 0 0; /* 写真を敷いた濃色ブロック（昼夜とも濃いまま。反転しない） */ --c-media-rgb: 26 29 40; /* アクセント */ --c-sky-rgb: 107 184 217; --c-sakura-rgb: 217 114 142; --c-matcha-rgb: 107 191 138; --c-sky-lt-rgb: 235 245 250; --c-sakura-lt-rgb: 250 238 241; --c-matcha-lt-rgb: 236 247 240; /* 影 */ --c-shadow: 0 10px 20px rgba(26, 29, 40, 0.15); --c-shadow-sm: 0 0 0 4px rgba(26, 29, 40, 0.05); /* ── 旧名の別名（既存の var(--color-*) はここを経由する） ── */ --color-white: rgb(var(--c-surface-rgb)); --color-snow: rgb(var(--c-surface1-rgb)); --color-mist: rgb(var(--c-base-rgb)); --color-border: rgb(var(--c-line-rgb)); --color-sub: rgb(var(--c-sub-rgb)); --color-body: rgb(var(--c-body-rgb)); --color-dark: rgb(var(--c-ink-rgb)); --color-void: rgb(var(--c-void-rgb)); --color-invert: rgb(var(--c-invert-rgb)); --color-on-invert: rgb(var(--c-on-invert-rgb)); --color-on-media: rgb(var(--c-on-media-rgb)); --color-on-media-mu: rgb(var(--c-on-media-mu-rgb)); --color-media: rgb(var(--c-media-rgb)); --color-on-accent: rgb(var(--c-on-accent-rgb)); --color-on-void: rgb(var(--c-on-void-rgb)); --color-on-void-st: rgb(var(--c-on-void-st-rgb)); --color-ink: rgb(var(--c-ink-rgb)); --color-sky: rgb(var(--c-sky-rgb)); --color-sky-light: rgb(var(--c-sky-lt-rgb)); --color-sakura: rgb(var(--c-sakura-rgb)); --color-sakura-light:rgb(var(--c-sakura-lt-rgb)); --color-matcha: rgb(var(--c-matcha-rgb)); --color-matcha-light:rgb(var(--c-matcha-lt-rgb)); } /* ── 夜（夕方・夜） ── */ :root[data-theme="night"] { --c-surface-rgb: 28 32 48; --c-surface1-rgb: 23 26 39; --c-base-rgb: 16 18 27; --c-line-rgb: 46 51 70; --c-sub-rgb: 157 164 184; --c-body-rgb: 198 203 217; --c-ink-rgb: 242 244 249; --c-invert-rgb: 242 244 249; --c-on-invert-rgb: 16 18 27; --c-void-rgb: 7 9 17; --c-on-void-rgb: 214 219 230; --c-on-void-st-rgb: 255 255 255; --c-on-accent-rgb: 16 18 27; --c-sky-rgb: 140 205 232; --c-sakura-rgb: 240 155 178; --c-matcha-rgb: 143 217 169; --c-sky-lt-rgb: 27 44 54; --c-sakura-lt-rgb: 51 34 42; --c-matcha-lt-rgb: 28 49 38; --c-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); --c-shadow-sm: 0 0 0 4px rgba(140, 205, 232, 0.12); } /* ── 反転面は「夜のなかの明るい島」────────────────────────── 夜は .bg-invert が明るい面になる。その内側で使われている色変数は 夜の値（明るい側）のままだと、明るい面に明るい文字が乗ってしまう。 そこで内側だけ昼の配色に戻す。 例外は --color-mist で、反転面の中では面ではなく「文字色」として 使われている（13箇所）。ここだけは夜の値（暗い側）のままにする。 アクセントは明るい面の上でAA（4.5:1）を満たす暗い側の値を使う。 */ :root[data-theme="night"] .bg-invert, :root[data-theme="night"] .bg-ink { --color-white: #FFFFFF; --color-snow: #F8F9FB; --color-border: #DDE0E6; --color-sub: #5D6171; --color-body: #4A4E5A; --color-dark: #1A1D28; --color-sky: #236986; --color-sakura: #B13053; --color-matcha: #2F6D46; } /* 時間帯の切り替わりを一瞬でなく馴染ませる（初回描画は除外） */ :root.theme-ready body, :root.theme-ready body * { transition: background-color .45s ease, border-color .45s ease, color .45s ease; } @media (prefers-reduced-motion: reduce) { :root.theme-ready body, :root.theme-ready body * { transition: none; } } body { font-family: 'Noto Sans JP', sans-serif; color: var(--color-body); background-color: var(--color-mist); } .font-en { font-family: 'Montserrat', sans-serif; } .ease-custom { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } html { scroll-behavior: smooth; } /* FadeUp Animation Utilities */ .fade-up { opacity: 0; transform: translateY(32px); transition-property: opacity, transform; transition-duration: 1000ms; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* Custom Keyframes */ @keyframes slowZoom { from { transform: scale(1.02); } to { transform: scale(1.1); } } .animate-slowZoom { animation: slowZoom 20s ease-out infinite alternate; } /* Mobile Menu Styles */ #mobile-menu { transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } #mobile-menu.open { transform: translateY(0); } .hamburger-line { transition: all 0.3s ease; } .menu-open .hamburger-line-1 { transform: translateY(8px) rotate(45deg); } .menu-open .hamburger-line-2 { opacity: 0; } .menu-open .hamburger-line-3 { transform: translateY(-8px) rotate(-45deg); } /* Responsive padding classes */ .section-py { padding-top: 80px; padding-bottom: 40px; } @media (min-width: 1024px) { .section-py { padding-top: 140px; padding-bottom: 60px; } } /* ========================================== PAGE-SPECIFIC STYLES ========================================== */ /* === Page: contact === */ /* Form Custom Styles */ .form-input { width: 100%; background-color: var(--color-snow); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px 20px; font-size: 15px; color: var(--color-dark); transition: all 0.3s ease; outline: none; } .form-input:focus { background-color: var(--color-white); border-color: var(--color-dark); box-shadow: var(--c-shadow-sm); } .form-input::placeholder { color: var(--color-sub); opacity: 0.7; } /* Custom Radio Button for Category */ .category-label { cursor: pointer; display: block; } .category-label input { display: none; } .category-box { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; border: 1px solid var(--color-border); background-color: var(--color-white); border-radius: 20px; font-weight: 700; color: var(--color-body); transition: all 0.3s ease; height: 100%; } .category-label input:checked + .category-box { background-color: var(--color-invert); border-color: var(--color-invert); color: var(--color-on-invert); box-shadow: var(--c-shadow); } .category-label:hover input:not(:checked) + .category-box { border-color: var(--color-dark); background-color: var(--color-snow); } /* === Page: mp === */ /* Timeline Custom Styles */ .timeline-line { position: absolute; top: 0; bottom: 0; left: 24px; width: 2px; background: linear-gradient(to bottom, var(--color-sky) 0%, var(--color-sky) 50%, var(--color-border) 50%, var(--color-border) 100%); background-size: 100% 200%; background-position: bottom; transition: background-position 1.5s ease; z-index: 1; } .timeline-wrapper.is-visible .timeline-line { background-position: top; } @media (min-width: 1024px) { .timeline-line { left: 50%; transform: translateX(-50%); } } /* === Page: sitemap === */ /* Sitemap Specific Styles */ .sitemap-list { list-style: none; padding-left: 0; margin: 0; } .sitemap-list > li { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border); } .sitemap-list > li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .sitemap-link { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--color-dark); transition: color 0.3s ease; } .sitemap-link:hover { color: var(--color-sky); } .sitemap-link svg { transition: transform 0.3s ease; color: var(--color-border); } .sitemap-link:hover svg { transform: translateX(4px); color: var(--color-sky); } .sitemap-link.cursor-default:hover { color: var(--color-dark); } .sitemap-sublist { list-style: none; padding-left: 0; margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .sitemap-sublist { grid-template-columns: repeat(2, 1fr); padding-left: 32px; } } .sitemap-sublink { display: inline-flex; align-items: center; font-size: 15px; color: var(--color-body); transition: color 0.3s ease; position: relative; padding-left: 20px; } .sitemap-sublink::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--color-border); border-radius: 50%; transition: background-color 0.3s ease, width 0.3s ease; } .sitemap-sublink:hover { color: var(--color-sky); } .sitemap-sublink:hover::before { background-color: var(--color-sky); width: 10px; border-radius: 4px; } /* === Page: topics === */ /* Filter Tab Styles */ .filter-btn { transition: all 0.3s ease; } .filter-btn.active { background-color: var(--color-invert); color: var(--color-on-invert); border-color: var(--color-invert); box-shadow: var(--c-shadow); } /* News List Animation */ .news-item { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .news-item.hidden-item { opacity: 0; transform: translateY(20px) scale(0.98); pointer-events: none; position: absolute; visibility: hidden; } /* === Page: article === */ /* Article Typography Styles */ .article-content h2 { font-size: 24px; font-weight: 700; color: var(--color-dark); margin-top: 48px; margin-bottom: 24px; padding-left: 16px; border-left: 4px solid var(--color-sky); line-height: 1.4; } @media (min-width: 1024px) { .article-content h2 { font-size: 28px; } } .article-content h3 { font-size: 20px; font-weight: 700; color: var(--color-dark); margin-top: 40px; margin-bottom: 20px; padding: 12px 20px; background-color: var(--color-snow); border-radius: 16px; line-height: 1.5; } @media (min-width: 1024px) { .article-content h3 { font-size: 22px; } } .article-content p { font-size: 15px; line-height: 2.2; color: var(--color-body); margin-bottom: 32px; } @media (min-width: 1024px) { .article-content p { font-size: 16px; } } .article-content img { width: 100%; border-radius: 24px; margin-bottom: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); } .article-content ul { list-style: none; margin-bottom: 32px; padding-left: 0; } .article-content li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 15px; line-height: 1.8; color: var(--color-body); } @media (min-width: 1024px) { .article-content li { font-size: 16px; } } .article-content li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background-color: var(--color-sky); border-radius: 50%; } /* === Page: pp (Legal Content) === */ .legal-content h2 { font-size: 24px; font-weight: 700; color: var(--color-dark); margin-top: 64px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--color-border); line-height: 1.4; } @media (min-width: 1024px) { .legal-content h2 { font-size: 28px; } } .legal-content h3 { font-size: 18px; font-weight: 700; color: var(--color-dark); margin-top: 40px; margin-bottom: 16px; padding-left: 16px; border-left: 4px solid var(--color-sky); line-height: 1.5; } @media (min-width: 1024px) { .legal-content h3 { font-size: 20px; } } .legal-content p { font-size: 14px; line-height: 2.2; color: var(--color-body); margin-bottom: 24px; } @media (min-width: 1024px) { .legal-content p { font-size: 15px; } } .legal-content ul { list-style: none; margin-bottom: 32px; padding-left: 0; } .legal-content li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 14px; line-height: 1.8; color: var(--color-body); } @media (min-width: 1024px) { .legal-content li { font-size: 15px; } } .legal-content li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background-color: var(--color-sky); border-radius: 50%; } /* ========================================== トップのヒーロースライダー ------------------------------------------ 参考サイト fds.or.jp の実測（切り替え500ms）に合わせる。 重ねたスライドをフェードで入れ替える。JavaScript が動かない 環境でも1枚目だけは見えるよう、既定を「見える」側にしている。 ========================================== */ .decn-hero-slider.is-slider .decn-hero-track { /* 重ねる前に、1枚目の高さで箱を確保する（読み込み中に跳ねないように） */ aspect-ratio: 16 / 9; } .decn-hero-slider.is-slider .decn-hero-slide { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; } .decn-hero-slider.is-slider .decn-hero-slide.is-active { opacity: 1; visibility: visible; } .decn-hero-dot.is-active { width: 20px; background-color: var(--color-dark); } @media (prefers-reduced-motion: reduce) { .decn-hero-slider.is-slider .decn-hero-slide { transition: none; } }