@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================
   ブログページ用レイアウト（SWELLサイドバー対応）
   ========================================= */

/* ブログページのコンテンツエリアをflexboxで横並びに */
.extage-blog-page .l-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    gap: 40px;
}

/* メインコンテンツエリア */
.extage-blog-page .l-mainContent {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* サイドバー */
.extage-blog-page .l-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* タブレット以下でサイドバーを下に */
@media (max-width: 1024px) {
    .extage-blog-page .l-content {
        flex-direction: column;
    }

    .extage-blog-page .l-sidebar {
        width: 100%;
    }
}

/* ブログページのヘッダー下余白 */
.extage-blog-page .site-header {
    margin-bottom: 0;
}

/* =========================================
   トップページ（page-id-72067）左右パディング削除
   ========================================= */
.page-id-72067,
.page-id-72067 .l-content,
.page-id-72067 .l-mainContent,
.page-id-72067 .post_content {
    padding-left: 0;
    padding-right: 0;
}

/* 全ページ body のパディング削除 */
body {
    padding: 0 !important;
}

/* ブログページのみ上パディング40px */
body.extage-blog-page {
    padding: 40px 0 0 !important;
}

/* イベントセクション下パディング */
.event-section {
    padding-bottom: 80px;
}

/* ページヘッダーを画面上辺にくっつける */
.page-header {
    margin-top: 0 !important;
}

/* =========================================
   白ヘッダー（特定ページ用）
   ========================================= */

/* 白ヘッダーページ：ヘッダーを白背景に */
.extage-white-header .site-header {
    --header-bg: #ffffff !important;
    --header-text: #151414 !important;
    --header-border: #e8e8e8 !important;
    background-color: #ffffff !important;
    border-bottom-color: #e8e8e8 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 白ヘッダーページ：ライトロゴを表示、ダークロゴを非表示 */
.extage-white-header .site-header .site-logo__img--light {
    display: block !important;
}

.extage-white-header .site-header .site-logo__img--dark {
    display: none !important;
}

/* 白ヘッダーページ：ナビゲーションテキスト色 */
.extage-white-header .site-header .site-nav__item > a,
.extage-white-header .site-header .header-cta__link {
    color: #151414 !important;
}

.extage-white-header .site-header .site-nav__item > a:hover {
    color: var(--color-primary) !important;
}

/* 白ヘッダーページ：ハンバーガーメニューアイコン色 */
.extage-white-header .site-header .hamburger-btn span,
.extage-white-header .site-header .hamburger-btn span::before,
.extage-white-header .site-header .hamburger-btn span::after {
    background-color: #151414 !important;
}

/* 白ヘッダーページ：資料アイコン（黒版を表示、白版を非表示） */
.extage-white-header .site-header .btn__icon--light {
    display: inline-block !important;
}

.extage-white-header .site-header .btn__icon--dark {
    display: none !important;
}

/* =========================================
   FVテキストアニメーション（ゆっくりフェード、移動量小）
   ========================================= */

/* 初期状態：移動量を小さく */
.fv__hero-line {
    transform: translateY(15px) !important;
    transition: opacity 1.2s ease-out, transform 1.2s ease-out !important;
}

.fv__label {
    transform: translateY(10px) !important;
    transition: opacity 1s ease-out, transform 1s ease-out !important;
}

.fv__tagline {
    transform: translateY(10px) !important;
    transition: opacity 1.2s ease-out, transform 1.2s ease-out !important;
}

.fv__cta {
    transition: opacity 1s ease-out, transform 1s ease-out !important;
}

/* アニメーション後の状態 */
.fv__hero-line.is-animated,
.fv__label.is-animated,
.fv__tagline.is-animated,
.fv__cta.is-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =========================================
   ブログページ ピックアップナビ矢印
   ========================================= */
.blog-pickup__nav {
    color: #999999 !important;
}

.blog-pickup__nav svg,
.blog-pickup__nav path {
    stroke: #999999 !important;
}

/* =========================================
   事例実績ページ（works）サイドバー非表示
   ========================================= */
.post-type-archive-works .l-sidebar,
.single-works .l-sidebar {
    display: none !important;
}

.post-type-archive-works .l-mainContent,
.single-works .l-mainContent {
    max-width: 100% !important;
    width: 100% !important;
}

/* 事例実績ページ：html, body含め全体の幅制限解除 */
html.post-type-archive-works,
html.single-works,
.post-type-archive-works,
.single-works {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

.post-type-archive-works .site-main,
.single-works .site-main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 事例実績ページ：SWELL親テーマの幅制限を解除 */
.post-type-archive-works .l-content,
.post-type-archive-works .l-container,
.post-type-archive-works .l-mainContent,
.post-type-archive-works #content,
.post-type-archive-works .post_content,
.single-works .l-content,
.single-works .l-container,
.single-works .l-mainContent,
.single-works #content,
.single-works .post_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================
   ヘッダー資料請求ボタン ホバー
   ========================================= */
.site-header .btn--outline-header {
    transition: all 0.3s ease;
}

.site-header .btn--outline-header:hover {
    background-color: #E86420 !important;
    border-color: #E86420 !important;
    color: #ffffff !important;
}

.site-header .btn--outline-header:hover .btn__icon--light {
    display: none !important;
}

.site-header .btn--outline-header:hover .btn__icon--dark {
    display: inline-block !important;
}

/* =========================================
   スライドメニュー（ハンバーガーメニュー）背景色
   ========================================= */
.slide-menu {
    background: #ffffff !important;
}