/* Reset styles - Updated */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    min-height: 100vh;
    position: relative;
    margin: 0 !important; /* 余分なマージンを削除 */
    padding: 0 !important; /* 余分なパディングを削除 */
}

/* TOPページの背景設定 - カスタマイザーで制御 */
body.home {
    position: relative !important;
    min-height: 100vh !important;
    /* 背景画像はカスタマイザーで設定 */
}

/* オーバーレイ設定 - カスタマイザーで制御 */
body.home::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    display: block;
    /* 透過度はカスタマイザーで制御 */
}

/* セクションの透明化（Aboutセクションのボックスは除外） */
body.home .wp-site-blocks,
body.home .wp-block-group,
body.home .wp-block-group__inner-container,
body.home .entry-content,
body.home .site-content,
body.home .site-main,
body.home .content-area,
body.home main,
body.home .hentry,
body.home article,
body.home .news,
body.home .blog,
body.home .about-visual-section,
body.home section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Aboutセクションのボックスは透明化から除外 */
body.home .about-text-content,
body.home .about-image-content {
    background: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    background-image: none !important;
}

/* おしゃれなAboutセクション（ガラスモーフィズム効果） - 背景色はカスタマイザーで制御 */
body.home .about-text-content,
body.home .about-image-content,
body.home .news {
    /* 初期白背景を強力に設定（カスタマイザーで上書き可能） */
    background: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    border-radius: 25px !important;
    padding: 50px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 
                0 5px 15px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform: translateY(0) !important;
}

/* お知らせセクションのセンタリング */
body.home .news {
    margin: 50px auto 0 auto !important;
    max-width: 1200px !important;
    width: 90% !important;
}

/* ホバー時のアニメーション - 背景色はカスタマイザーで制御 */
body.home .about-text-content:hover,
body.home .about-image-content:hover,
body.home .news:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2), 
                0 10px 25px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    /* background: rgba(255, 255, 255, 0.2) !important; カスタマイザーで制御するため削除 */
}

/* 輝くエフェクト */
body.home .about-text-content::before,
body.home .about-image-content::before,
body.home .news::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    transform: rotate(-45deg) !important;
    animation: shine 3s infinite !important;
    z-index: 1 !important;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(-45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(-45deg); }
}

/* かっこいいニュース・ブログカード */
body.home .news__card {
    /* background: rgba(255, 255, 255, 0.1) !important; カスタマイザーで設定 */
    /* backdrop-filter: blur(20px) !important; ブログカードの透過を無効化 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ブログアイテムの透明度を完全に無効化 */
body.home .blog__item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ブログカルーセルアイテム専用設定 - 透過を完全に無効化 */
body.home .blog__carousel-item {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    border: none !important;
}

/* カードホバーアニメーション */
body.home .news__card:hover,
body.home .blog__item:hover {
    transform: translateY(-8px) rotateY(5deg) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    /* background: rgba(255, 255, 255, 0.15) !important; カスタマイザーで設定 */
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* パルスアニメーション */
body.home .news__card::after,
body.home .blog__item::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: pulse 2s infinite !important;
    z-index: 0 !important;
}

@keyframes pulse {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 300px; height: 300px; opacity: 0; }
}

/* TOPページのセクション透明化設定 */
body.home .news,
body.home .blog,
body.home .about-visual-section,
body.home .news__container,
body.home .blog__container,
body.home .wp-site-blocks,
body.home .wp-block-group,
body.home .wp-block-group__inner-container,
body.home .entry-content,
body.home .site-content,
body.home .site-main,
body.home .content-area,
body.home main,
body.home .hentry,
body.home article,
body.home section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 確実に透明化 - ブログカルーセルアイテムを除外 */
body.home *:not(header):not(.header):not(.header *):not(.about-visual-container):not(.news__card):not(.blog__item):not(.about-text-content):not(.about-image-content):not(.about-section-title):not(.blog__carousel-item):not(.blog__carousel-item *):not(article.blog__carousel-item):not(article.blog__carousel-item *) {
    background-color: transparent !important;
}

/* カード要素はガラス効果を適用 */
body.home .news__card {
    /* background: rgba(255, 255, 255, 0.1) !important; カスタマイザーで設定 */
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ブログアイテムの透明度を完全に無効化 */
body.home .blog__item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ヘッダーの背景を白に保持 */
body.home header,
body.home .header,
body.home .header__inner,
body.home .header__logo,
body.home .header__nav,
body.home .header__nav ul,
body.home .header__nav li,
body.home .header__nav a,
body.home .header__contact,
body.home .header__sns,
body.home .header__right,
body.home .hamburger-menu,
body.home .hamburger-menu__toggle,
body.home .hamburger-menu__nav,
body.home .hamburger-button {
    background: #ffffff !important;
    background-color: #ffffff !important;
    backdrop-filter: none !important;
}

/* アニメーションボックスのみガラス効果を保持 */
body.home .about-visual-container {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 0 auto !important; /* 中央配置を強制 */
    max-width: 1200px !important; /* 最大幅を強制 */
}

/* ファーストビューのタイトル背景も保持 */
body.home .first__title h2,
body.home .first__title h3,
body.home .first__title-mobile h2,
body.home .first__title-mobile h3 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Aboutセクション周辺を確実に透明に */
body.home .about-visual-section,
body.home .about-visual-section *:not(.about-visual-container):not(.about-visual-container *):not(.about-section-title) {
    background: transparent !important;
    background-color: transparent !important;
}

/* About me タイトルを確実に表示 */
body.home .about-section-title {
    color: #333 !important;
    background: transparent !important;
    background-color: transparent !important;
    display: block !important;
    visibility: visible !important;
    margin: 100px 0 100px 0 !important; /* マージンを強制適用 */
    /* opacity: 0 !important; アニメーションで制御されるため削除 */
}

/* Aboutセクションの上マージンを強制的に適用 */
body.home .about-visual-section {
    margin-top: 0 !important; /* メインビジュアルの直下に配置 */
}

/* about-image-contentの上下マージンを強制的に適用 */
body.home .about-image-content {
    margin: 120px 50px 120px 0 !important; /* 上下マージンを調整、右側に50pxマージンを追加 */
}

/* about-text-contentの上下マージンも強制的に適用 */
body.home .about-text-content {
    margin: 120px 0 120px 50px !important; /* 上下マージンを調整、左側に50pxマージンを追加 */
}

/* 投稿画面用のグラデーション背景（削除 - functions.phpで動的生成） */

/* Main content styles */
main {
    padding-top: 0; /* パディングを削除 */
    background: transparent !important; /* 強制的に透明 */
}

body.admin-bar main {
    padding-top: 0; /* パディングを削除 */
}

/* 全てのコンテナを透明に */
.wp-site-blocks,
.wp-block-group,
.wp-block-group__inner-container,
.entry-content,
.site-content,
.site-main,
.content-area,
.wp-block-cover,
.wp-block-cover__inner-container,
.wp-block-columns,
.wp-block-column,
.hentry,
article,
section,
div {
    background: transparent !important;
}

/* First container (Home section) styles */
.first_container {
    position: relative;
    width: 100%;
    height: calc(100vh - 110px); /* ヘッダーの高さ100px + 位置調整10px */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 110px; /* ヘッダーの高さ100px + 位置調整10px */
}

/* Swiper container styles */
.swiper-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* テスト用背景色 */
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1 !important; /* 強制的に表示 */
}

.swiper-slide .mobile-image {
    display: none;
}

/* Title styles */
.first__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.first__title h2, .first__title h3 {
    color: #ffffff;
    letter-spacing: 6px;
    line-height: 1.2;
    margin: 0;
    padding: 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
    width: auto;
    max-width: 100%;
}

.first__title h2 {
    font-size: 62px;
    max-height: 2.4em;
    order: 1;
}

.first__title h3 {
    font-size: 28px;
    max-height: 2.4em;
    order: 2;
}

.first__title-mobile {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    z-index: 2;
    text-align: center;
}

.first__title-mobile h2 {
    color: #ffffff;
    font-size: 36px;
    letter-spacing: 3px;
    line-height: 1.3;
    margin: 0;
    padding: 10px 15px;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
}

.first__title-mobile h3 {
    font-size: calc(3vw + 12px);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px 20px;
    margin: 0;
    display: block;
    border-radius: 10px;
    line-height: 1.4;
    color: #ffffff;
    letter-spacing: 2px;
    max-width: 100%;
    box-sizing: border-box;
    width: auto;
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
}

.scroll {
    position: absolute;
    bottom: 5%;
    right: 5%;
    color: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.scroll img {
    width: 20px;
    margin-top: 10px;
}

/* Responsive styles */
@media (max-width: 1200px) {
    .first__title h2 {
        font-size: calc(3vw + 20px);
    }
}

/* Responsive styles */
@media (max-width: 1200px) {
    .first__title h2 {
        font-size: calc(3vw + 20px);
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    main {
        padding-top: 0; /* パディングを削除 */
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.admin-bar main {
        padding-top: 0; /* パディングを削除 */
    }

    .first_container {
        height: calc(100vh - 110px); /* モバイルヘッダーの高さ100px + 位置調整10px */
        margin-top: 110px; /* モバイルヘッダーの高さ100px + 位置調整10px */
    }

    /* 管理バーがある場合のモバイル対応 */
    body.admin-bar .first_container {
        margin-top: 142px; /* 100px + 32px + 10px */
        height: calc(100vh - 142px);
    }
    
    .swiper-container {
        width: 100%;
    }
    
    .first__title {
        display: none;
    }
    
    .first__title-mobile {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 600px;
        z-index: 2;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .first__title-mobile h2 {
        font-size: calc(4vw + 16px);
        background-color: rgba(0, 0, 0, 0.5);
        padding: 20px 25px;
        margin: 0;
        display: block;
        border-radius: 10px;
        line-height: 1.4;
        color: #ffffff;
        letter-spacing: 3px;
        max-width: 100%;
        box-sizing: border-box;
        width: auto;
    }
    
    .first__title-mobile h3 {
        font-size: calc(3vw + 12px);
        background-color: rgba(0, 0, 0, 0.5);
        padding: 15px 20px;
        margin: 0;
        display: block;
        border-radius: 10px;
        line-height: 1.4;
        color: #ffffff;
        letter-spacing: 2px;
        max-width: 100%;
        box-sizing: border-box;
        width: auto;
        font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
    }
    
    .scroll {
        bottom: 2%;
        right: 2%;
    }

    .swiper-slide .desktop-image {
        display: none;
    }

    .swiper-slide .mobile-image {
        display: block;
    }
}

@media (max-width: 480px) {
    .first__title-mobile h2 {
        font-size: calc(5vw + 12px);
        padding: 15px 20px;
    }
    
    .first__title-mobile h3 {
        font-size: calc(3vw + 10px);
        padding: 12px 16px;
    }
}

/* ブロックエディター対応スタイル */
.block-editor-content {
    padding: 80px 0;
    background: transparent;
}

.block-editor-content .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 30px;
    background: transparent; /* 透明に変更 */
    border-radius: 15px;
    box-shadow: none; /* シャドウを削除 */
    backdrop-filter: none; /* ブラーを削除 */
}

/* ブロックエディターの基本要素スタイル */
.block-editor-content h1,
.block-editor-content h2,
.block-editor-content h3,
.block-editor-content h4,
.block-editor-content h5,
.block-editor-content h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 2rem 0 1.5rem 0;
    line-height: 1.4;
    color: #333;
}

.block-editor-content h1,
.block-editor-content .entry-title { font-size: 1.8rem; }
.block-editor-content h2 { font-size: 1.6rem; }
.block-editor-content h3 { font-size: 1.4rem; }

.block-editor-content p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 1.8rem;
    color: #666;
    text-align: left;
    word-spacing: 0.1em;
    letter-spacing: 0.02em;
}

.block-editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.block-editor-content .wp-block-image {
    margin: 30px 0;
    text-align: center;
}

.block-editor-content .wp-block-gallery {
    margin: 30px 0;
}

.block-editor-content .wp-block-columns {
    margin: 30px 0;
}

.block-editor-content .wp-block-group {
    margin: 30px 0;
}

/* ボタンブロック */
.block-editor-content .wp-block-button .wp-block-button__link {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.block-editor-content .wp-block-button .wp-block-button__link:hover {
    background: linear-gradient(135deg, #A0522D, #CD853F);
    transform: translateY(-2px);
}

/* リストスタイル */
.block-editor-content ul,
.block-editor-content ol {
    margin: 20px 0;
    padding-left: 30px;
}

.block-editor-content li {
    margin-bottom: 12px;
    line-height: 1.8;
    color: #666;
}

/* 引用ブロック */
.block-editor-content .wp-block-quote {
    border-left: 4px solid #8B4513;
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: #555;
}

/* 投稿ページ専用スタイル */
.block-editor-content .entry-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.block-editor-content .entry-meta {
    margin-top: 1rem;
    color: #888;
    font-size: 0.9rem;
}

.block-editor-content .entry-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9rem;
}

.block-editor-content .entry-footer span {
    margin-right: 1rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .block-editor-content {
        padding: 60px 0;
    }
    
    .block-editor-content .container {
        padding: 30px 20px;
        margin: 0 15px;
    }
    
    .block-editor-content h1 { font-size: 1.6rem; }
    .block-editor-content h2 { font-size: 1.4rem; }
    .block-editor-content h3 { font-size: 1.2rem; }
}

/* お知らせセクションのスタイリッシュなカード型デザイン */
.news {
    margin: 0 auto 200px auto; /* 下マージンを適切に調整（1200px → 200px） */
    position: relative;
    padding: 400px 0; /* 内部パディングをさらに大幅に増加して高さを確保（250px → 400px） */
    transform: translateY(0);
    transition: transform 0.6s ease-out;
    border-radius: 25px; /* About meと同じ角丸 */
    background: rgba(255, 255, 255, 0.95) !important; /* About meと同じ背景色 */
    backdrop-filter: blur(25px) !important; /* About meと同じガラス効果 */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 
                0 5px 15px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; /* About meと同じ影 */
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* About meと同じボーダー */
    max-width: 1200px; /* 幅を制限 */
    width: 90%; /* 幅を指定してAboutセクションから独立 */
    z-index: 5; /* Aboutセクションより上に表示 */
    clear: both; /* フロートをクリア */
}

.news__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px; /* パディングを増加 */
    display: flex;
    flex-direction: column;
    align-items: center; /* タイトルを中央配置 */
}

.news__title {
    font-size: 3rem; /* About meと同じサイズ */
    text-align: center;
    margin-top: 200px; /* Aboutセクションからの距離 */
    margin-bottom: 200px; /* .newsセクションとの距離を大幅に増加 */
    color: #333; /* About meと同じ色 */
    position: relative; /* 通常の配置に戻す */
    z-index: 10; /* 背景より上に表示 */
    font-weight: 600; /* About meと同じウェイト */
    text-transform: none; /* 大文字変換を削除 */
    letter-spacing: 2px; /* About meと同じ文字間隔 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* About meと同じ影 */
    background: transparent;
    padding: 20px 0; /* About meと同じパディング */
    border-radius: 0; /* 角丸を削除 */
    display: block; /* inline-blockからblockに変更 */
    box-shadow: none;
    backdrop-filter: none;
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif; /* About meと同じフォント */
}

.news__title::before {
    /* 装飾を削除 */
    display: none;
}

.news__title::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px; /* 「お知らせ」の文字幅に合わせて調整 */
    height: 4px; /* About meと同じ太さ */
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1); /* About meと同じグラデーション */
    border-radius: 2px; /* About meと同じ角丸 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* About meと同じ影 */
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3カラムに変更 */
    gap: 80px 40px; /* 上下のgapをさらに増加（60px → 80px）、左右は40px */
    margin-bottom: 250px; /* 背景の下部との余白をさらに大幅に増加（150px → 250px） */
    margin-top: 250px; /* 背景の上部との余白をさらに大幅に増加（150px → 250px） */
    width: 100%; /* 幅を100%に設定 */
    max-width: 1000px; /* 最大幅を縮小してカードを小さく（1200px → 1000px） */
    margin-left: auto; /* 中央配置 */
    margin-right: auto; /* 中央配置 */
    padding: 0 100px; /* 左右にパディングをさらに増加（80px → 100px） */
}

.news__card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        rgba(255, 255, 255, 0.5) 100%) !important; /* バー形式の透過グラデーション */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    backdrop-filter: blur(20px); /* ガラス効果 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    min-height: 450px; /* カードの高さを増加 */
    max-height: 450px; /* 最大高さも増加 */
    display: flex;
    flex-direction: column;
    margin: 20px 0; /* カードの上下に余白を追加 */
}

.news__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.6) 100%) !important; /* ホバー時の透過度変更 */
}

.news__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(45deg, #667eea, #764ba2);
}

.news__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px 40px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.1) 100%); /* バー形式の透過ヘッダー */
}

.news__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 25px 20px;
    border-radius: 12px;
    min-width: 80px;
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 10;
    margin: 30px 20px 0 30px !important; /* 上と左に余白を追加 */
}

.news__date-day {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.news__date-month {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.news__category-tag {
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #333;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
}

.news__card-content {
    padding: 60px 50px; /* パディングを大幅に増加 */
    flex-grow: 1; /* 内容を拡張 */
}

.news__card-title {
    font-size: 1.4rem !important; /* フォントサイズを少し大きく */
    margin: 20px 0 25px 0 !important; /* 上下の余白を縮小 */
    line-height: 1.6 !important; /* 行間を改善 */
    padding: 15px 30px !important; /* 上下左右に余白を縮小 */
    text-align: center !important; /* 中央に配置 */
    word-break: break-word !important; /* 単語の途中で改行を許可 */
    white-space: normal !important; /* 通常の空白処理 */
}

.news__card-title a {
    color: #ffffff; /* 白い文字 */
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* テキストシャドウ */
}

.news__card-title a:hover {
    color: #667eea;
}

.news__excerpt {
    font-size: 1.1rem !important; /* フォントサイズを少し大きく */
    line-height: 1.8 !important; /* 行間をさらに改善 */
    color: rgba(255, 255, 255, 0.9) !important; /* 白い文字 */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* テキストシャドウ */
    margin: 15px 0 20px 0 !important; /* 上下の余白を縮小 */
    padding: 10px 30px !important; /* 上下左右に余白を縮小 */
}

.news__card-footer {
    padding: 20px 30px 30px; /* パディングを縮小 */
    text-align: right;
}

.news__read-more {
    display: inline-flex;
    align-items: center;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 20px !important; /* 下にマージンを追加 */
    margin-right: 20px !important; /* 右にマージンを追加 */
}

.news__read-more::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.news__read-more:hover {
    color: #764ba2;
}

.news__read-more:hover::after {
    transform: translateX(5px);
}

.news__no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1rem;
}

/* レスポンシブデザイン */
@media (max-width: 1200px) {
    .news__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .news__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .news__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .news {
        padding: 60px 0;
    }
    
    .news__container {
        padding: 0 15px;
    }
    
    .news__title {
        font-size: 2rem;
        margin-bottom: 30px;
        padding: 15px 30px;
    }
    
    .news__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news__card-header {
        padding: 20px 20px 10px;
    }
    
    .news__card-content {
        padding: 15px 20px;
    }
    
    .news__card-footer {
        padding: 10px 20px 20px;
    }
}

/* ブログセクションのスタイリング */
.blog {
    margin-top: 0;
    position: relative;
    padding: 300px 0; /* パディングを調整（500px → 300px） */
    transform: translateY(0);
    transition: transform 0.6s ease-out;
    border-radius: 0;
    min-height: 1000px; /* 最小高さを調整（1500px → 1000px） */
}

.blog__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* タイトルを中央配置 */
}

.blog__title {
    font-size: 3rem; /* About meと同じサイズ */
    text-align: center;
    margin-top: 300px !important; /* 上マージンを調整（200px → 300px） */
    margin-bottom: 50px !important; /* 下マージンを調整（80px → 50px） */
    color: #333; /* About meと同じ色 */
    position: relative;
    font-weight: 600; /* About meと同じウェイト */
    text-transform: none; /* 大文字変換を削除 */
    letter-spacing: 2px; /* About meと同じ文字間隔 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* About meと同じ影 */
    background: transparent; /* 透明に変更 */
    padding: 20px 0; /* About meと同じパディング */
    border-radius: 0; /* 角丸を削除 */
    display: block; /* inline-blockからblockに変更 */
    box-shadow: none; /* シャドウを削除 */
    backdrop-filter: none; /* ブラーを削除 */
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif; /* About meと同じフォント */
}

.blog__title::before {
    /* 星マークを削除 */
    display: none;
}

.blog__title::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* 初期幅を0に設定 */
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1); /* About meやお知らせと同じグラデーション */
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 120px; /* BLOGの文字幅に合わせて調整 */
}

/* タイトルが表示されたときにアンダーラインを展開 */
.blog__title:hover::after,
.blog__title.animate::after {
    width: 120px; /* BLOGの文字幅に合わせて調整 */
}

/* ページ読み込み時にアンダーラインを自動展開 */
@keyframes underlineExpand {
    from {
        width: 0;
    }
    to {
        width: 120px;
    }
}

.blog__title::after {
    animation: underlineExpand 1.5s ease-out 1.2s forwards; /* About meやお知らせと同じタイミング */
}

.blog__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.blog__item {
    background: #ffffff !important; /* 透明度を完全に無効化 */
    background-color: #ffffff !important; /* 透明度を完全に無効化 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(45, 80, 22, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: none !important; /* ガラス効果を無効化 */
    -webkit-backdrop-filter: none !important; /* ガラス効果を無効化 */
    filter: none !important; /* フィルター効果を無効化 */
}

.blog__item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(45, 80, 22, 0.25);
    border-color: rgba(74, 124, 89, 0.3);
}

.blog__thumbnail {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.blog__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog__thumbnail:hover img {
    transform: scale(1.05);
}

.blog__thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.05));
    z-index: 1;
}

.blog__content {
    padding: 15px;
}

.blog__date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8); /* 白い文字 */
    margin-bottom: 10px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* テキストシャドウ */
}

.blog__item-title {
    font-size: 1rem;
    margin-bottom: 10px;
    line-height: 1.3;
}

.blog__item-title a {
    color: #ffffff; /* 白い文字 */
    text-decoration: none;
    transition: color 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* テキストシャドウ */
}

.blog__item-title a:hover {
    color: #4a7c59;
}

.blog__excerpt {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9); /* 白い文字 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* テキストシャドウ */
}

/* デフォルトサムネイル用のスタイル（ゴールドに変更） */
.blog__thumbnail--default {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 「すべてのブログを見る」ボタン */
.blog__more {
    text-align: center;
    margin-top: 80px !important; /* ボタンの上マージンを設定（0px → 80px） */
}

.blog__more-link {
    display: inline-block;
    padding: 20px 35px;
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    color: #2d5016;
    text-decoration: none;
    border-radius: 50px 50px 50px 10px;
    font-weight: 600;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(252, 228, 236, 0.4), 
                0 4px 10px rgba(248, 187, 217, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.blog__more-link::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: rotate(-45deg);
    transition: all 0.4s ease;
    opacity: 0;
}

.blog__more-link:hover {
    background: linear-gradient(135deg, #f8bbd9, #fce4ec);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 30px rgba(252, 228, 236, 0.6), 
                0 6px 15px rgba(248, 187, 217, 0.4);
    border-radius: 50px 50px 50px 5px;
}

.blog__more-link:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translate(20%, 20%);
}

/* ブログ記事がない場合のメッセージ */
.blog__no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1rem;
}

/* レスポンシブデザイン */
@media (max-width: 1200px) {
    .blog__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .blog__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .blog {
        padding: 60px 0;
    }
    
    .blog__container {
        padding: 0 15px;
    }
    
    .blog__title {
        font-size: 2rem;
        margin-bottom: 30px;
        letter-spacing: 2px;
        padding: 15px 30px;
    }
    
    .blog__title::before {
        font-size: 1.5rem;
        top: -25px;
    }
    
    .blog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .blog__thumbnail {
        height: 120px;
    }
    
    .blog__content {
        padding: 12px;
    }
    
    .blog__item-title {
        font-size: 0.9rem;
    }
    
    .blog__excerpt {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }
    
    .blog__more {
        margin-top: 80px; /* モバイルでの余白を調整（150px → 80px） */
    }
    
    .blog__more-link {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .blog__grid {
        grid-template-columns: 1fr;
    }
    
    .blog__thumbnail {
        height: 160px;
    }
    
    .blog__content {
        padding: 15px;
    }
    
    .blog__item-title {
        font-size: 1rem;
    }
    
    .blog__excerpt {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }
}

.news .news__container {
    position: relative;
    z-index: 2;
}

.blog .blog__container {
    position: relative;
    z-index: 99997 !important; /* ブログコンテナを最前面に */
}

/* ブログ6カラムカルーセル */
.blog__carousel {
    overflow: hidden;
    position: relative;
    margin-top: 0px !important; /* カルーセルの上マージンを削除（20px → 0px） */
    margin-bottom: 30px !important; /* カルーセルとボタンの間の余白を調整（60px → 30px） */
    /* mask: linear-gradient(to right, transparent 0%, white 5%, white 95%, transparent 100%); マスク効果を無効化 */
    /* -webkit-mask: linear-gradient(to right, transparent 0%, white 5%, white 95%, transparent 100%); マスク効果を無効化 */
    z-index: 99998 !important; /* カルーセル全体を最前面に */
}

.blog__carousel-track {
    display: flex;
    animation: slideLeft 80s linear infinite;
    gap: 20px;
    will-change: transform;
    z-index: 99998 !important; /* トラックを最前面に */
    position: relative !important;
}



.blog__carousel-item {
    flex: 0 0 250px; /* 200px → 250px（幅を増加） */
    background: #ffffff !important; /* 強制的に白背景 */
    background-color: #ffffff !important; /* 強制的に白背景 */
    background-image: none !important; /* 背景画像を無効化 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    /* backdrop-filter: ガラス効果を削除 */
    /* border: カスタマイザーで制御 */
    min-height: 300px; /* 最小高さを設定 */
    opacity: 1 !important; /* 強制的に不透明 */
    filter: none !important; /* フィルター効果を無効化 */
    backdrop-filter: none !important; /* バックドロップフィルターを無効化 */
    -webkit-backdrop-filter: none !important; /* Webkitバックドロップフィルターを無効化 */
    position: relative !important; /* 位置を固定 */
    z-index: 99999 !important; /* 重なり順を最前面に設定 */
}

.blog__carousel-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    /* opacity: カスタマイザーで制御 */
}

.blog__carousel-item .blog__thumbnail {
    height: 200px; /* 140px → 200px（高さを増加） */
    overflow: hidden;
    background: #ffffff !important; /* 強制的に白背景 */
    background-color: #ffffff !important; /* 強制的に白背景 */
    background-image: none !important; /* 背景画像を無効化 */
    opacity: 1 !important; /* 強制的に不透明 */
    filter: none !important; /* フィルター効果を無効化 */
    backdrop-filter: none !important; /* バックドロップフィルターを無効化 */
    -webkit-backdrop-filter: none !important; /* Webkitバックドロップフィルターを無効化 */
    position: relative !important;
    z-index: 100000 !important; /* サムネイルを最前面に */
}

.blog__carousel-item .blog__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog__carousel-item:hover .blog__thumbnail img {
    transform: scale(1.08);
}

.blog__carousel-item .blog__content {
    padding: 15px;
    background: #ffffff !important; /* 強制的に白背景 */
    background-color: #ffffff !important; /* 強制的に白背景 */
    background-image: none !important; /* 背景画像を無効化 */
    opacity: 1 !important; /* 強制的に不透明 */
    filter: none !important; /* フィルター効果を無効化 */
    backdrop-filter: none !important; /* バックドロップフィルターを無効化 */
    -webkit-backdrop-filter: none !important; /* Webkitバックドロップフィルターを無効化 */
    position: relative !important;
    z-index: 100000 !important; /* コンテンツを最前面に */
}

.blog__carousel-item .blog__date {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 8px;
}

.blog__carousel-item .blog__item-title a {
    font-size: 0.85rem;
    line-height: 1.3;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes slideLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.about-visual-section {
    position: relative;
    padding: 100px 0 100px 0; /* タイトルの上下マージン分を考慮してパディングを調整 */
    background: transparent !important; /* 白い背景を完全に透明に */
    margin: 50px auto 100px auto !important; /* 上下にマージンを追加し、中央配置を強制 */
    z-index: 2;
    border-radius: 30px 30px 0 0;
    backdrop-filter: none !important; /* ブラーエフェクトを削除 */
    box-shadow: none !important; /* ボックスシャドウを削除 */
    transform: translateY(0);
    transition: transform 0.6s ease-out;
    width: 100%;
    max-width: 1200px !important;
}

/* About me セクションタイトル */
.about-section-title {
    font-size: 3rem; /* フォントサイズを大きく（2rem → 3rem） */
    color: #333;
    text-align: center;
    margin: 100px 0 100px 0; /* 上下にマージンを100pxに変更 */
    padding: 20px 0; /* 上下にパディングを追加 */
    font-weight: 600; /* フォントウェイトを太く（400 → 600） */
    letter-spacing: 2px; /* 文字間隔を広く（1px → 2px） */
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.2s forwards;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 文字に影を追加 */
}

/* お知らせセクションタイトル - About meスタイル */
.news-section-title {
    font-size: 3rem; /* フォントサイズを大きく（2rem → 3rem） */
    color: #333;
    text-align: center;
    margin: 100px 0 100px 0; /* 上下にマージンを100pxに変更 */
    padding: 20px 0; /* 上下にパディングを追加 */
    font-weight: 600; /* フォントウェイトを太く（400 → 600） */
    letter-spacing: 2px; /* 文字間隔を広く（1px → 2px） */
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 0.2s forwards;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 文字に影を追加 */
}

.about-section-title::after,
.news-section-title::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* 初期幅を0に設定 */
    height: 4px; /* アンダーラインを太く（2px → 4px） */
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
    border-radius: 2px; /* 角丸も大きく（1px → 2px） */
    animation: underlineExpand 1.5s ease-out 1.2s forwards;
    transform-origin: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* アンダーラインに影を追加 */
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.about-visual-container {
    width: 100%; /* body横幅サイズに変更 */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央配置 */
    padding: 0 40px; /* 左右パディングを調整 */
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 450px; /* コンテナの最小高さを狭める（600px → 450px） */
    border-radius: 25px; /* 角丸を追加 */
}

/* アニメーションボックス（テキスト部分）は背景を保持 */
.about-text-content {
    flex: 1;
    padding: 30px;
    margin: 120px 0; /* 上下マージンを大幅に増加してAboutエリア内で余白を確保 */
    position: relative;
    z-index: 2;
    opacity: 0 !important;
    transform: translate(-50px, 50px) !important; /* 左下から現れるように変更 */
    animation: slideInFromLeftBottom 1.2s ease-out 0.3s forwards !important;
    /* 初期白背景を強力に設定（カスタマイザーで上書き可能） */
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(15px);
}

.about-text-content .main-name {
    font-size: 3.5rem;
    color: #333;
    margin-bottom: 25px;
    font-weight: 300;
    letter-spacing: 3px;
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
    position: relative;
    overflow: hidden;
}

.about-text-content .main-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
    animation: underlineExpand 1.5s ease-out 1s forwards;
}

@keyframes underlineExpand {
    0% {
        width: 0;
    }
    100% {
        width: 150px; /* About meの文字幅より少し広く調整（120px → 150px） */
    }
}

.about-text-content .subtitle-lines {
    font-size: 1.2rem; /* フォントサイズを大きく */
    line-height: 1.7; /* 行間を増加 */
    color: #333; /* より濃い色に変更（#666 → #333） */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out 0.8s forwards;
    margin-top: 30px; /* アンダーラインからの距離を追加 */
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-text-content .subtitle-lines p {
    margin: 10px 0; /* マージンを増加 */
    font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
    letter-spacing: 1px;
    color: #333; /* より濃い色に変更（継承 → #333） */
    font-weight: 400; /* フォントウェイトを少し太く */
}

/* アニメーションボックス（画像部分）も背景を保持 */
.about-image-content {
    flex: 1;
    margin: 120px 0; /* 上下マージンを大幅に増加してAboutエリア内で余白を確保 */
    position: relative;
    z-index: 2;
    opacity: 0 !important;
    transform: translate(50px, 50px) scale(0.9) !important; /* 右下から現れるように変更 */
    animation: slideInFromRightBottom 1.2s ease-out 0.6s forwards !important;
    /* 初期白背景を強力に設定（カスタマイザーで上書き可能） */
    background: rgba(255, 255, 255, 0.90) !important;
    border-radius: 15px;
    padding: 20px; /* パディングを増加して画像の余白を確保 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 25px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

@keyframes slideInUpScale {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(-5px) scale(1); /* 浮き上がりを小さく（-8px → -5px） */
    }
}

.about-meditation-image {
    width: 100%;
    height: 500px; /* 高さを増加して画像を全部表示 */
    object-fit: cover;
    border-radius: 15px;
    opacity: 1; /* 透明度を100%に変更（0.8 → 1） */
    /* mix-blend-mode: multiply; ブレンドモードを削除 */
    /* filter: sepia(10%) saturate(120%) brightness(1.1); フィルターを削除 */
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.about-meditation-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* filter: sepia(5%) saturate(130%) brightness(1.2); ホバー時のフィルターも削除 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .about-visual-container {
        flex-direction: column;
        gap: 20px; /* ギャップを縮小（30px → 20px） */
        padding: 0 20px;
        width: 100%;
        min-height: 400px; /* 最小高さを縮小（500px → 400px） */
    }
    
    .about-text-content,
    .about-image-content {
        flex: 1;
        width: 100%;
        margin: 40px 0; /* マージンを縮小（60px → 40px） */
    }
    
    .about-text-content {
        padding: 20px 15px; /* パディングを縮小 */
    }
    
    .about-image-content {
        padding: 8px; /* パディングを縮小（12px → 8px） */
    }
    
    .about-meditation-image {
        height: 200px; /* 高さを縮小（250px → 200px） */
    }
    
    .about-visual-section {
        margin-top: 20px; /* マージンを縮小（30px → 20px） */
        padding: 40px 0 80px 0; /* パディングを縮小 */
    }
    
    .about-text-content .main-name {
        font-size: 2.2rem; /* フォントサイズを縮小（2.8rem → 2.2rem） */
    }
    
    .about-section-title {
        font-size: 1.8rem; /* タブレット用h2サイズ */
        margin: 40px 0 30px 0; /* マージンを縮小 */
        padding: 15px 0; /* パディングを縮小 */
    }
}

@media (max-width: 480px) {
    .about-visual-section {
        padding: 30px 0; /* パディングを縮小 */
        margin-top: 15px; /* マージンを縮小（20px → 15px） */
    }
    
    .about-visual-container {
        padding: 0 15px;
        min-height: 300px; /* 最小高さを縮小（400px → 300px） */
    }
    
    .about-text-content,
    .about-image-content {
        margin: 30px 0; /* マージンを縮小（40px → 30px） */
    }
    
    .about-text-content {
        padding: 15px 10px; /* パディングを縮小 */
    }
    
    .about-image-content {
        padding: 8px; /* パディングを維持 */
    }
    
    .about-meditation-image {
        height: 180px; /* 高さを縮小（200px → 180px） */
    }
    
    .about-text-content .main-name {
        font-size: 1.8rem; /* フォントサイズを縮小（2.2rem → 1.8rem） */
    }
    
    .about-section-title {
        font-size: 1.5rem; /* スマートフォン用h2サイズ */
        margin: 30px 0 20px 0; /* マージンを縮小 */
        padding: 10px 0; /* パディングを縮小 */
    }
}

/* 新しいアニメーションキーフレーム */
@keyframes slideInFromLeftBottom {
    0% {
        opacity: 0;
        transform: translate(-50px, 50px);
    }
    100% {
        opacity: 1;
        transform: translate(0, -5px); /* 最終位置で少し浮き上がり */
    }
}

@keyframes slideInFromRightBottom {
    0% {
        opacity: 0;
        transform: translate(50px, 50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(0, -5px) scale(1); /* 最終位置で少し浮き上がり */
    }
}

/* 元のアニメーションキーフレームを復元 */
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(-5px); /* 浮き上がりを小さく（-8px → -5px） */
    }
}

@keyframes slideInUpScale {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(-5px) scale(1); /* 浮き上がりを小さく（-8px → -5px） */
    }
}

/* ブログカルーセルカードの透過度設定 */
.blog__carousel-item,
article.blog__carousel-item,
body.home .blog__carousel-item,
body.home article.blog__carousel-item {
    background: rgba(255, 255, 255, 0.85) !important; /* 半透明の白背景 */
    background-color: rgba(255, 255, 255, 0.85) !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: blur(10px) !important; /* ガラス効果を追加 */
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    mask: none !important;
    -webkit-mask: none !important;
    mix-blend-mode: normal !important;
    isolation: auto !important;
    visibility: visible !important;
    z-index: 9999 !important;
}

/* カルーセルカード内の要素は白背景を維持 */
.blog__carousel-item *,
article.blog__carousel-item *,
body.home .blog__carousel-item *,
body.home article.blog__carousel-item * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* カルーセル全体の透明効果も無効化 */
.blog__carousel,
body.home .blog__carousel {
    mask: none !important;
    -webkit-mask: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ホバー時の透過度変更 */
.blog__carousel-item:hover,
article.blog__carousel-item:hover,
body.home .blog__carousel-item:hover,
body.home article.blog__carousel-item:hover {
    background: rgba(255, 255, 255, 0.95) !important; /* ホバー時により不透明に */
    background-color: rgba(255, 255, 255, 0.95) !important;
    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: blur(15px) !important; /* ホバー時により強いガラス効果 */
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
}

/* ホバー時のカード内要素は白背景維持 */
.blog__carousel-item:hover *,
article.blog__carousel-item:hover *,
body.home .blog__carousel-item:hover *,
body.home article.blog__carousel-item:hover * {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
}