/* ==========================================================================
   KAISHINGEKI カスタムスタイル v1.0.2
   ========================================================================== */

/* --------------------------------------------------------------------------
   カラー変数
   -------------------------------------------------------------------------- */
:root {
    --color-primary:   #1a1a2e;
    --color-accent:    #e94560;
    --color-secondary: #16213e;
    --color-text:      #333333;
    --color-light:     #f8f9fa;
    --color-white:     #ffffff;
    --font-base:       'Noto Sans JP', sans-serif;
    --font-en:         'Montserrat', sans-serif;
}

/* --------------------------------------------------------------------------
   全体
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-base);
    color: var(--color-text);
    line-height: 1.8;
}

a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
#header {
    background: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.site-name-text,
.site-name-text a {
    color: var(--color-white);
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   ヒーローセクション
   -------------------------------------------------------------------------- */
.vk_post_imgOuter_padding,
.hero-area {
    position: relative;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */
.section-title {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--color-accent);
    margin: 0.75rem auto 0;
}

/* --------------------------------------------------------------------------
   サービスカード
   -------------------------------------------------------------------------- */
.service-card {
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
.btn-primary,
.wp-block-button__link {
    background: var(--color-accent);
    color: var(--color-white);
    border-radius: 4px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: none;
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover,
.wp-block-button__link:hover {
    background: #c73652;
    color: var(--color-white);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
#footer {
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.8);
}

#footer a {
    color: rgba(255, 255, 255, 0.7);
}

#footer a:hover {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem;
    }
}