/**
 * レイアウト・余白カスタマイズ
 * 参照サイト: 明星幼稚園のようなゆとりのあるレイアウト
 */

/* セクション間の余白 */
.section,
section {
    padding: 80px 0 !important;
}

/* コンテナの最大幅 */
.container,
.site-content {
    max-width: 1200px !important;
    padding: 0 20px !important;
    margin: 0 auto !important;
}

/* 見出しの余白 */
h1 {
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

h2 {
    margin-top: 50px !important;
    margin-bottom: 30px !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

h3 {
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    font-size: 28px !important;
    font-weight: 600 !important;
}

h4 {
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    font-size: 24px !important;
}

h5 {
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    font-size: 20px !important;
}

/* 段落の余白 */
p {
    margin-bottom: 20px !important;
    line-height: 1.8 !important;
}

/* リストの余白 */
ul, ol {
    margin-bottom: 25px !important;
    padding-left: 30px !important;
}

li {
    margin-bottom: 10px !important;
    line-height: 1.7 !important;
}

/* カード要素 */
.card,
.post,
article {
    margin-bottom: 40px !important;
    padding: 30px !important;
    border-radius: 15px !important;
}

/* 装飾要素 - セクション区切り */
.section::before {
    content: "" !important;
    display: block !important;
    width: 100px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
    margin: 0 auto 50px !important;
}

/* 見出しに装飾 */
h2::after {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 3px !important;
    background: var(--accent-color) !important;
    margin: 15px auto 0 !important;
}

/* ボタンのマージン */
.btn,
.button {
    margin: 10px 5px !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 画像の余白 */
img {
    margin-bottom: 20px !important;
    border-radius: 10px !important;
}

.wp-post-image,
.featured-image img {
    border-radius: 15px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* グリッドレイアウト */
.row {
    margin-bottom: 40px !important;
}

.col,
.column {
    padding: 15px !important;
}

/* ウィジェットエリア */
.widget-area {
    padding: 30px !important;
}

.widget {
    padding: 25px !important;
    margin-bottom: 30px !important;
}

.widget-title {
    margin-bottom: 20px !important;
    font-size: 20px !important;
}

/* フッター */
.site-footer,
footer {
    padding: 60px 0 30px !important;
    margin-top: 80px !important;
}

.footer-widgets {
    padding: 40px 0 !important;
}

/* ブレッドクラム */
.breadcrumb {
    padding: 15px 0 !important;
    margin-bottom: 30px !important;
}

/* ページネーション */
.pagination {
    margin: 50px 0 !important;
    text-align: center !important;
}

.page-numbers {
    margin: 0 5px !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .section,
    section {
        padding: 40px 0 !important;
    }

    h1 {
        font-size: 32px !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    h2 {
        font-size: 28px !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }

    h3 {
        font-size: 24px !important;
    }

    .card,
    .post,
    article {
        padding: 20px !important;
        margin-bottom: 25px !important;
    }

    .container {
        padding: 0 15px !important;
    }

    .site-footer,
    footer {
        padding: 40px 0 20px !important;
        margin-top: 40px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .section,
    section {
        padding: 60px 0 !important;
    }

    h1 {
        font-size: 36px !important;
    }

    h2 {
        font-size: 32px !important;
    }
}

/* アニメーション効果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.section,
.card,
article {
    animation: fadeIn 0.6s ease-out !important;
}

/* ホバーアニメーション */
.card,
.post,
article,
.widget {
    transition: all 0.3s ease !important;
}

/* スムーススクロール */
html {
    scroll-behavior: smooth !important;
}

/* 選択テキストの色 */
::selection {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

::-moz-selection {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}