/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable.
Version: 4.13.5.1783238468
*/

@charset "UTF-8";

/* ==========================================
   【ベース】縦書きテキスト（基本はザブトンなし）
   ========================================== */
.v-text {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    display: inline-block;
}

/* ウィジェット内のテキストの基本スタイル */
.v-text .elementor-heading-title,
.v-text p {    
    background-color: transparent;
    color: #505050;
    padding: 0;
    letter-spacing: 0.15em;
    line-height: 1.4;
    margin: 0;
}

/* 見出しウィジェットにクラスをつけた時用 */
.v-color-cream .elementor-heading-title {
    color: #F9F4EA;
}

/* テキストエディタウィジェットにクラスをつけた時用 */
.v-color-cream p {
    color: #F9F4EA;
}

/* ==========================================
   【追加パターン】ザブトン（背景と余白）
   ========================================== */
/* 白ザブトンの設定（文字タグ自体に直接安全に敷く） */
.v-bg-white .elementor-heading-title,
.v-bg-white p {
    background-color: #ffffff !important;
    color: #505050 !important;
    padding: 15px 5px !important;
    display: inline-block !important;
}

/* 赤ザブトンの設定（文字タグ自体に直接安全に敷く） */
.v-bg-red .elementor-heading-title,
.v-bg-red p {
    background-color: #E94708 !important;
    color: #F9F4EA !important;
    padding: 15px 5px !important;
    display: inline-block !important;
}

/* 
  中箱も一緒に縦書きモードにする 
  ★アニメーションの transform と競合しないよう、display: inline-block だけ外しておきます
*/
.v-text .elementor-widget-container {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
}

/* ==========================================
   【実績紹介】アーカイブ用ラベル（赤ザブトン）
   ========================================== */
.archive-label-red {
    display: inline-block;
    background-color: #E94708;
    color: #F9F4EA;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 2px;
    margin-bottom: 6px;
    white-space: nowrap;
}

/* ==========================================
   【ヘッダー】サブメニュー中央揃え＆1行化
   ========================================== */
.submenu-center-dropdown .elementor-nav-menu .sub-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 240px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.submenu-center-dropdown .elementor-nav-menu .sub-menu a {
    white-space: nowrap !important;
    text-align: center !important;
    padding: 12px 20px !important;
}

/* ==========================================
   スクロールフェードインアニメーション
   ========================================== */

/* 共通設定：最初は透明 */
.js-fade {
    opacity: 0;
    
    /* ★カクつき対策の特効薬★
       ブラウザに「この要素は opacity と transform が変わるから、
       事前にGPU（グラフィックチップ）を使って準備しておいて！」と伝えます。
    */
    will-change: opacity, transform;

    transition: opacity 3.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 3.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 各方向の初期位置（全角スペースを徹底除去！） */
.fade-up    { transform: translateY(60px); }
.fade-down  { transform: translateY(-80px); } 
.fade-left  { transform: translateX(30px); }
.fade-right { transform: translateX(-30px); }

/* 画面内に入った時にクラスが付与されて動く */
.js-fade.is-show {
    opacity: 1;
    transform: translate(0, 0) !important;
}
/* ==========================================
   【スマホ対策】画面全体の横揺れ・横スクロールを防止
   ========================================== */
html, body {
    overflow-x: hidden; /* 横方向のはみ出しを完全にカット */
    width: 100%;
}

/* Elementorの一番外側のラッパー（念のための二重ブロック） */
#page, .site {
    overflow-x: hidden;
}