.elementor-kit-7{--e-global-color-primary:#4C4948;--e-global-color-secondary:#4C4948;--e-global-color-text:#000000;--e-global-color-accent:#FFFFFF;--e-global-color-2224e22:#F8B500;--e-global-color-7f52cd1:#00B9FF;--e-global-typography-primary-font-family:"Kiwi Maru";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Zen Maru Gothic";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Zen Kaku Gothic New";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:36px;--e-global-typography-text-letter-spacing:0.1px;--e-global-typography-accent-font-family:"Zen Maru Gothic";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-accent );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.vertical {
        writing-mode: vertical-rl;
    }
    
/* --- マスク方式のアニメーション --- */

/* 1. 親コンテナの設定：中身がはみ出したら隠す */
.reveal-mask {
    overflow: hidden !important;
}

/* 2. 動かしたい要素：最初は100px下に隠しておく */
.reveal-item {
    /* 透明にはせず、位置だけ下げる */
    transform: translate3d(0, 100%, 0) !important; 
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}

/* 3. 表示状態：元の位置（0）に戻る */
.reveal-item.is-animated {
    transform: translate3d(0, 0, 0) !important;
}


/* ==========================================
   1. ヘッダー全体の基本設定（通常時 & 固定時共通）
   ========================================== */
header.elementor-element-7deaa43,
header.elementor-sticky--active {
    --header-height-large: 120px;
    --header-height-small: 70px;
    
    /* 横幅の強制固定（ウィンドウ幅に追従させる） */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    
    min-height: var(--header-height-large) !important;
    height: var(--header-height-large) !important;
    transition: all 0.5s ease-in-out !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ロゴの初期設定：赤をより鮮やかに現色へ近づける調整 */
header.elementor-element-7deaa43 .header-logo img {
    width: 300px !important;
    /* フィルター調整のポイント：
       1. saturate(3): 彩度を通常の3倍まで上げ、くすみを飛ばして鮮やかにする
       2. brightness(1.1): 全体を少し明るくし、発色を良くする
       3. contrast(1.2): コントラストを上げ、赤色と背景のメリハリをつける
    */
    filter: invert(1) hue-rotate(180deg) saturate(5) brightness(0.9) contrast(1.6) !important;
    transition: all 0.5s ease !important;
}

/* メニューの初期設定（白文字） */
header.elementor-element-7deaa43 .header-menu .e-n-menu-title-text {
    color: #ffffff !important;
    transition: color 0.5s ease !important;
}

/* ==========================================
   2. スクロール後（Stickyエフェクト発火時）
   ========================================== */

/* ヘッダーの縮小・背景白 */
header.elementor-element-7deaa43.elementor-sticky--effects,
header.elementor-sticky--effects {
    min-height: var(--header-height-small) !important;
    height: var(--header-height-small) !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100% !important; /* スクロール後も幅100%を維持 */
    left: 0 !important;
}

/* ロゴ縮小・フィルター解除（元の赤＋黒に戻る） */
header.elementor-element-7deaa43.elementor-sticky--effects .header-logo img {
    width: 150px !important;
    filter: none !important;
}

/* メニュー色変更（黒文字） */
header.elementor-element-7deaa43.elementor-sticky--effects .header-menu .e-n-menu-title-text {
    color: #000000 !important;
}

/* --- 4. スクロール後に右側に出現する山吹色の装飾 --- */

/* 疑似要素で装飾を作成（::afterを使用します） */
header.elementor-element-7deaa43.elementor-sticky--effects::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0; /* 右端を基準にする */
    width: 40%; /* 右側半分（50%）をカバー */
    height: 100%;
    background-color: #FFB61E; /* 山吹色 */
    z-index: 0;
    
    /* 左側のエッジを斜めにする（右端に向けて広がる形状） */
    /* ポイント：左上を少し削り、左下を尖らせる */
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    
    /* 右側からのスライドインアニメーション */
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* スクロールしてクラスが付いた時に表示 */
header.elementor-element-7deaa43.elementor-sticky--effects::after {
    opacity: 1;
    transform: translateX(0);
}

/* ロゴとメニューを装飾の前面に出す */
header.elementor-element-7deaa43.elementor-sticky--effects .header-logo,
header.elementor-element-7deaa43.elementor-sticky--effects .header-menu {
    z-index: 2;
    position: relative;
}
/* ==========================================
   3. レスポンシブ・その他
   ========================================== */

/* シェイプディバイダーをスクロール後に隠す */
header.elementor-element-7deaa43.elementor-sticky--effects .elementor-shape {
    display: none !important;
}

/* スマホ・タブレットでの高さ調整 */
@media (max-width: 1024px) {
    header.elementor-element-7deaa43 {
        --header-height-large: 80px; 
        --header-height-small: 60px;
    }
    header.elementor-element-7deaa43 .header-logo img {
        width: 180px !important;
    }
}


/* インジケーター全体の配置（強制中央揃え版） */
.scrolldown-indicator {
    position: absolute;
    bottom: 30px; 
    /* 親コンテナの端から端までを基準にする */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important; /* 左右の余白を自動にして中央へ */
    width: fit-content !important; /* 中身の幅だけに絞る */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* 「SCROLL」のテキストスタイル */
.scrolldown-text {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: #ffffff; 
    margin-bottom: 10px;
    font-family: sans-serif;
    text-indent: 0.3em; /* 文字間隔を広げた分のズレを補正 */
}

/* 縦ラインのベース */
.scrolldown-line {
    width: 1px;
    height: 80px; /* 少し長めにして高級感を出す */
    background-color: rgba(255, 255, 255, 0.2); 
    position: relative;
    overflow: hidden;
}

/* 動くライン本体 */
.scrolldown-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    animation: scroll-line-anim 2.5s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite;
}

@keyframes scroll-line-anim {
    0% { transform: scaleY(0); transform-origin: top; }
    30% { transform: scaleY(1); transform-origin: top; }
    60% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}/* End custom CSS */