/* リセットと基本設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ベーススタイル */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    position: relative;
    margin-top: 50px !important;
}

/* メインコンテナ及び親要素のスタイル */
.lp-wrapper, .article-body, .article-content, .column, .column-detail {
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* メインコンテナ */
.main-container {
    position: relative;
    width: 100%;
    max-width: 390px;
    margin: 0 auto !important;
    min-height: 100vh;
    display: block !important;
}

/* シェイクアニメーション */
@keyframes shakeAnimation {
    0% { transform: translateX(0); }
    25% { transform: translateX(2px); }
    50% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* CTAボタンの基本スタイル */
.cta-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 350px;
    height: 60px;
    z-index: 9999;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* 各ボタンの位置（元の位置に合わせて調整） */
.cta-button.btn-1 {
    top: 365px;
}

.cta-button.btn-2 {
    top: 2020px;
}

/* 底部固定按钮样式 */
.cta-button.btn-3 {
    position: fixed !important;
    bottom: 20px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    width: 90% !important;
    max-width: 390px !important;
    height: auto !important; /* 高度自适应 */
}

/* 确保底部固定按钮在页面加载时立即显示 */
.cta-button.btn-3 {
    animation: none !important; /* 移除可能的加载动画延迟 */
    transition: none !important; /* 移除可能的过渡效果 */
}

/* 底部固定按钮的图片样式 */
.cta-button.btn-3 img {
    display: block !important;
    width: 100% !important;
    height: auto !important; /* 高度自适应，保持图片比例 */
    max-width: 390px !important; /* 与页面其他图片保持一致的最大宽度 */
    border-radius: 10px !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) !important;
}

/* ボタン画像のスタイル */
.cta-button img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    animation: shakeAnimation 1.5s ease-in-out infinite;
    animation-delay: 1s;
}

/* ホバー効果 */
.cta-button:hover {
    transform: translateX(-50%) scale(0.95);
}

/* フォーカス効果 */
.cta-button:focus {
    outline: none;
}

.cta-button:focus img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 0 0 3px #007bff);
}

/* デバッグ用（開発時のみ使用） */
.debug .cta-button {
    background-color: rgba(255, 0, 0, 0.3);
    border: 2px solid red;
}

/* 画像コンテンツのスタイル */
.content-image {
    display: block !important;
    margin: 0 auto !important;
    height: auto;
}

.image-container {
    text-align: center;
    margin: 0 auto !important;
    display: block !important;
    clear: both;
}

/* レスポンシブデザイン - モバイル用の調整 */
@media (max-width: 767px) {
    .cta-button {
        width: 85%;
        height: 50px;
    }
}

/* PC用の位置調整 */
@media (min-width: 768px) {
    .cta-button.btn-1 {
        top: 380px;
    }
    
    .cta-button.btn-2 {
        top: 2100px;
    }
    
    /* 确保底部固定按钮在PC上也保持固定 */
    .cta-button.btn-3 {
        position: fixed !important;
        bottom: 20px !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
        width: 90% !important;
        max-width: 390px !important; /* 与页面其他图片保持一致的最大宽度 */
        height: auto !important; /* 高度自适应 */
        animation: none !important;
        transition: none !important;
    }
    
    /* 底部固定按钮的图片样式 - PC版 */
    .cta-button.btn-3 img {
        display: block !important;
        width: 100% !important;
        height: auto !important; /* 高度自适应，保持图片比例 */
        max-width: 390px !important; /* 与页面其他图片保持一致的最大宽度 */
        border-radius: 10px !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) !important;
    }
    
    /* 画面幅が広い場合のボタンサイズ調整 */
    .cta-button {
        max-width: 400px;
    }
    
    /* 画像コンテンツのPC用調整 */
    .main-container {
        max-width: 100% !important;
        padding: 0 20px;
        box-sizing: border-box;
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .image-container {
        max-width: 390px !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: block !important;
        clear: both !important;
        float: none !important;
    }
    
    .content-image {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        clear: both !important;
    }
    
    /* 确保所有使用内联样式的图片也居中 */
    div[style*="width: 390px"] {
        max-width: 390px !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: block !important;
        clear: both !important;
        float: none !important;
    }
    
    div[style*="width: 390px"] img {
        margin: 0 auto !important;
        display: block !important;
        clear: both !important;
    }
}

/* ボタン画像のスタイル */
.cta-button img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    animation: shakeAnimation 1.5s ease-in-out infinite;
    animation-delay: 1s;
}

/* 确保所有图片容器都居中 */
div[class*="image"], div[style*="text-align"] {
    text-align: center;
    margin: 0 auto !important;
    display: block !important;
    clear: both;
}

/* 确保所有图片都居中 */
img {
    max-width: 100%;
    height: auto;
    display: block !important;
    margin: 0 auto !important;
}

/* 特定のインラインスタイルを持つ要素に対する強制中央揃え */
div[style*="width: 390px"],
div[style*="width:390px"] {
    margin: 0 auto !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    text-align: center !important;
}

div[style*="width: 390px"] img,
div[style*="width:390px"] img {
    margin: 0 auto !important;
    display: block !important;
    clear: both !important;
    float: none !important;
}

/* デバッグ用スタイル - 必要に応じて有効化 */
/*
.cta-button {
    border: 2px solid red;
}
*/

/* 左右晃动动画 */
@keyframes shakeAnimation {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* モバイル用の調整 */
@media (max-width: 768px) {
    .follow-btn-container {
        bottom: 15px;
    }
    
    .floating-service-btn {
        padding: 12px 20px;
        min-width: 240px;
    }
    
    .btn-main-text {
        font-size: 14px;
    }
    
    .btn-sub-text {
        font-size: 11px;
    }
    
    #banner-content {
        font-size: 12px !important;
    }
    
    #close-banner {
        font-size: 16px !important;
        right: 10px !important;
    }
}

/* 顶部悬浮窗轮播广告 */
#top-floating-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#banner-content {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    max-width: 85%;
}

#close-banner {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
}

/* 确保顶部悬浮窗始终显示 */
#top-floating-banner {
    top: 0 !important;
    display: flex !important;
}

/* フッタースタイル */
.bennavi-footer {
    display: none;
}

.footer-navi {
    background-color: #f8f9fa;
    padding: 20px 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-navi-list {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 20px;
}

.footer-navi-list li a {
    color: #333;
    text-decoration: none;
}

.copyright {
    background-color: #333;
    color: white;
    padding: 10px 0;
}

.bennavi-copyright {
    font-size: 12px;
}

.company-informations {
    padding: 20px 0;
}

.company-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.company-location {
    font-size: 12px;
    line-height: 1.6;
}

.certification-info {
    margin-top: 20px;
}

.market-unit {
    display: flex;
    align-items: center;
    gap: 20px;
}

.market-desctiption {
    font-size: 12px;
}

.lp-wrapper {
    padding-bottom: 0;
}