/*
Theme Name: START-DJ
Theme URI: https://example.com/start-dj-theme/
Author: (あなたの名前 or ブランド名)
Author URI: https://example.com/
Description: 管理画面から様々な設定が可能な高機能オリジナルテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-logo, custom-menu, featured-images, theme-options
Text Domain: start-dj
*/
/* =============================================== * 基本スタイルとカラー変数の適用 * =============================================== */
body { font-family: sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); margin: 0; }
main { padding: 2rem; }
a { color: var(--main-color); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }
.button, button, input[type="submit"] { display: inline-block; padding: 0.8em 1.5em; background-color: var(--accent-color); color: #fff; border: none; border-radius: 4px; cursor: pointer; text-align: center; text-decoration: none; transition: opacity 0.3s; }
.button:hover, button:hover, input[type="submit"]:hover { opacity: 0.8; color: #fff; text-decoration: none; }
/* =============================================== * ヘッダー * =============================================== */
header { padding: 1rem 2rem; background-color: var(--header-bg-color); color: var(--header-text-color); border-bottom: 1px solid #eee; }
.site-logo h1 a { color: inherit; text-decoration: none; }
.site-logo h1 a:hover { text-decoration: underline; }
/* =============================================== * ヒーローエリア * =============================================== */
.hero { width: 100%; height: 500px; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; }
.hero-inner { background-color: rgba(0, 0, 0, 0.5); padding: 2rem; border-radius: 5px; }
.hero-title { font-size: 3rem; margin: 0; }
.hero-subtitle { font-size: 1.2rem; margin-top: 1rem; }
/* =============================================== * フッター * =============================================== */
.site-footer { padding: 0; font-size: 0.9rem; }
.footer-level-1 { background-color: var(--footer-bg-color-1); color: var(--footer-text-color-1); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 2.5rem 2rem; }
.footer-level-1 a { color: #fff; }
.footer-level-2 { background-color: var(--footer-bg-color-2); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 2.5rem 2rem; }
.sns-icon-list { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 20px; }
.sns-icon-item a { display: block; color: #fff; transition: opacity 0.3s, transform 0.3s; }
.sns-icon-item a:hover { transform: translateY(-3px); opacity: 0.8; }
.sns-icon-item svg { width: 24px; height: 24px; fill: currentColor; }
.footer-level-3 { background-color: var(--footer-bg-color-3); color: var(--footer-text-color-3); padding: 2.5rem 2rem; }
.copyright { margin: 0; padding: 0; text-align: center; }
/* =============================================== * フロントエンド ページビルダー * =============================================== */
.front-page-main { padding: 0; }
.pb-row-front { /* marginはインラインで設定 */ }
.pb-row-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; }
.pb-row-columns { width: 100%; display: grid; gap: 2rem; padding: 0 2rem; }
.pb-row-columns.columns-1 { grid-template-columns: 1fr; }
.pb-row-columns.columns-2 { grid-template-columns: repeat(2, 1fr); }
.pb-row-columns.columns-3 { grid-template-columns: repeat(3, 1fr); }
.pb-row-columns.columns-4 { grid-template-columns: repeat(4, 1fr); }
.pb-item-front { }
.pb-content-free-space p { margin-top: 0; line-height: 1.8; }
.pb-content-free-space p:last-child { margin-bottom: 0; }
.pb-content-free-space a { text-decoration: underline; }
.pb-content-headline-wrapper { }
.pb-content-headline { margin: 0 0 0.5em 0; font-weight: 700; line-height: 1.4; }
.pb-content-sub-headline { margin: 0; line-height: 1.6; }
.pb-content-image-text { display: flex; flex-direction: column; gap: 1.5rem; }
.pb-content-image-text.layout-left { flex-direction: row; }
.pb-content-image-text.layout-right { flex-direction: row-reverse; }
.pb-content-image-text.layout-left .it-image, .pb-content-image-text.layout-right .it-image { flex-basis: 40%; flex-shrink: 0; }
.pb-content-image-text.layout-left .it-content, .pb-content-image-text.layout-right .it-content { flex-basis: 60%; flex-shrink: 0; display: flex; flex-direction: column; }
.it-image img { width: 100%; height: auto; display: block; border-radius: 4px; }
.it-title { font-weight: 700; margin-top: 0; margin-bottom: 0.8em; }
.it-desc { margin-top: 0; margin-bottom: 1.5rem; line-height: 1.8; }
.it-button-wrapper { margin-top: auto; }
.it-button-wrapper.align-left { text-align: left; }
.it-button-wrapper.align-center { text-align: center; }
.it-button-wrapper.align-right { text-align: right; }
.it-button-wrapper .button.size-small { font-size: 0.8rem; padding: 0.5em 1em; }
.it-button-wrapper .button.size-medium { font-size: 1rem; padding: 0.8em 1.5em; }
.it-button-wrapper .button.size-large { font-size: 1.2rem; padding: 1em 2em; }
@media (max-width: 768px) { .pb-row-columns { grid-template-columns: 1fr !important; } .pb-content-image-text.layout-left, .pb-content-image-text.layout-right { flex-direction: column; } }