@charset "UTF-8";

body {
    background-color: #F5F5F0;
    color: #1A1A1A;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
}

html, body {
    width: 100%;
    max-width: 100%;       /* 画面幅以上に広がるのを防ぐ */
    margin: 0;
    padding: 0;
	overflow-x: clip;
}

/* 縦書き設定 */
.writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.25em;
    line-height: 2.2;
}

/* --- 画像パララックス・拡大エフェクト (修正版) --- */

        .parallax-img-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 100%;
			    background-color: #f0f0f0; /* 画像読み込み前の背景色 */
        }

.parallax-img {
    width: 100%;
    height: 140%; /* 余裕を持って140%に */
    
    position: absolute; /* 位置を固定 */
    top: -20%;          /* 上にはみ出させてセンター配置 */
    left: 0;
    
    object-fit: cover;
    object-position: center;
    will-change: transform;
    opacity: 0;
    transition: opacity 0s 0.5s;
    z-index: 0;
}
/* --- Reveal Animation (カーテンエフェクト) --- */

/* カーテンの設定 */
.reveal-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #A3A3A3;
    transform: scaleX(0);
    transform-origin: left;
    
    z-index: 20; /* 画像より手前にする */
    pointer-events: none;
}

/* 親要素に is-visible がついた時の動き */

/* 1. カーテンのアニメーション */
.reveal-wrap.is-visible .reveal-curtain {
    animation: revealAnim 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* 2. 画像の表示（ここを強化しました） */
.reveal-wrap.is-visible .parallax-img,
.reveal-wrap.is-visible img {
    opacity: 1 !important; /* 強制的に不透明にする */
}

/* カーテンの動き定義 */
@keyframes revealAnim {
    0% { transform: scaleX(0); transform-origin: left; }
    45% { transform: scaleX(1); transform-origin: left; }
    55% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* WORKSカード専用のカーテンアニメーション制御 */
/* 親要素(.fade-up)が表示されたら、子要素のカーテンを作動させる */
.fade-up.is-visible .work-curtain {
    animation: revealAnim 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
/* 親が表示されたら画像も不透明に */
.fade-up.is-visible .work-img {
    opacity: 1;
    transform: scale(1);
}
/* 初期状態 */
.work-img {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0s 0.6s, transform 1.5s ease-out; /* カーテンが開く頃に表示 */
}

@keyframes revealAnim {
    0% { transform: scaleX(0); transform-origin: left; }
    45% { transform: scaleX(1); transform-origin: left; }
    55% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ヒーロー画像の角丸 */
.rounded-hero {
    border-radius: 0 0 0 120px;
}
@media (max-width: 768px) {
    .rounded-hero {
        border-radius: 0 0 0 60px;
    }
}

/* セクションタイトル */
.section-title-en {
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #666666;
    margin-bottom: 1rem;
    display: block;
}
.section-title-ja {
    font-family: "Noto Serif JP", serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
}

/* リストアイテムのホバー */
.list-item {
    transition: background-color 0.3s ease;
}
.list-item:hover {
    background-color: #EBEBE6;
}

/* フェードアップ */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    /* Tailwindの競合を防ぐため !important を使用し、box-shadowも含める */
    transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s ease !important;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 画像ホバー */
.hover-reveal-img {
    position: fixed;
    width: 320px;
    height: 240px;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8) translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.4s ease;
    z-index: 50;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.hover-reveal-img.is-active {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
}

/* プロセスタイムライン */
.step-marker {
    transition: all 0.3s ease;
    background-color: #F5F5F0;
    border: 1px solid #D4D4D4;
    color: #D4D4D4;
}
.step-item.active .step-marker {
    background-color: #1A1A1A;
    border-color: #1A1A1A;
    color: #FFFFFF;
}
.step-item.active h3 { opacity: 1; }
.step-item h3 { opacity: 0.5; transition: opacity 0.3s ease; }

/* ヒストリースライダー */
.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 6s linear;
    transform: scale(1.0);
}
.slide-img.active {
    opacity: 1;
    transform: scale(1.1); /* ゆっくりズーム */
}

/* スライダーインジケーター */
.slide-indicators {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}
.slide-dot {
    width: 40px;
    height: 2px;
    background-color: rgba(255,255,255,0.3);
    transition: background-color 0.3s;
}
.slide-dot.active {
    background-color: #fff;
}

/* 新：右側セクションインジケーター（縦型） */
.side-nav {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: none; /* SPでは非表示 */
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    mix-blend-mode: difference; /* 背景色に応じて反転 */
    color: #fff; /* differenceにより、白背景では黒く、黒背景では白くなる */
}
@media (min-width: 768px) {
    .side-nav {
        display: flex;
    }
}
.nav-item {
    display: flex;
    flex-direction: row-reverse; /* 線を右、テキストを左に */
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
    height: auto;
}
.nav-item:hover {
    opacity: 0.8;
}
.nav-item.active {
    opacity: 1;
}

/* 縦線 */
.nav-line {
    width: 1px;
    height: 20px; /* 通常時の高さ */
    background-color: currentColor;
    transition: height 0.3s ease, width 0.3s ease;
}
.nav-item.active .nav-line {
    height: 60px; /* アクティブ時の高さ */
    width: 2px; /* 少し太く */
}

/* 縦書きテキスト */
.nav-text {
    font-family: "Manrope", sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: mixed;
    display: none; /* 通常は非表示 */
    margin-right: -0.5rem; /* 位置微調整 */
}
.nav-item:hover .nav-text,
.nav-item.active .nav-text {
    display: block;
}

/* Hero Scroll Down Indicator */
@keyframes scrollDownEffect {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
.scroll-line-inner {
    animation: scrollDownEffect 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* アコーディオン・もっと見るボタン */
.hidden-work {
    display: none !important; /* Tailwindのflexなどに勝つためにimportant */
}
/* フェードインアニメーション用 */
.fade-in-work {
    animation: fadeInWork 0.8s ease forwards;
}
@keyframes fadeInWork {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* プラスボタン */
.plus-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.plus-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1A1A1A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}
.plus-btn:hover::before {
    transform: scaleX(1);
}
.plus-btn:hover {
    color: #fff;
    border-color: #1A1A1A;
}
.plus-icon {
    transition: transform 0.5s ease;
}
.plus-btn:hover .plus-icon {
    transform: rotate(90deg);
}

/* About Section Special Animation */
.stagger-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.stagger-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Sticky Profile: スクロール追従 */
.sticky-profile {
    position: -webkit-sticky; /* Safari用 */
    position: sticky;
    top: 8rem; /* ヘッダーの高さ分あける */
    height: fit-content;
}

/* --- Hero Slider (Main Visual) --- */

/* 画像を重ねるための設定 */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* パララックス用に縦長に */
    object-fit: cover;
    opacity: 0; /* 基本は非表示 */
    z-index: 0;
    transition: opacity 2.5s ease-in-out; /* 2.5秒かけてふわっと切り替え */
}

/* アクティブな画像だけ表示 */
.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

/* 【重要】既存のカーテンアニメーションとの競合を防ぐ */
/* カーテンが開いた後(is-visible)でも、activeじゃないスライドは非表示のままにする */
.reveal-wrap.is-visible .hero-slide:not(.active) {
    opacity: 0;
}
/* カーテンが開いた後は、activeなスライドを表示 */
.reveal-wrap.is-visible .hero-slide.active {
    opacity: 1;
}

/* --- Aurora Gradient Background (本番用：見えるように調整済み) --- */

/* コンテナ */
.aurora-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* 透明度：0.6だと薄すぎたので0.8に上げました */
    opacity: 0.8; 
}

/* 共通設定 */
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    /* ぼかし：80pxだと消えるので60pxに抑えました */
    filter: blur(60px); 
    mix-blend-mode: multiply; /* 色を重ねて深みを出す */
    animation: blobMove infinite ease-in-out alternate;
}

/* Blob 1: 淡いブルー系（知性・誠実） */
.blob-1 {
    top: -10%;
    left: -10%;
    width: 60%; /* 大きさ */
    height: 60%;
    /* 少し色味を強くしました */
    background: linear-gradient(to right, #B8D6DE, #E0EDF0); 
    animation-duration: 15s; /* 15秒でゆったり動く */
}

/* Blob 2: 淡いベージュ・オレンジ系（温かみ・親しみ） */
.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 50%;
    height: 50%;
    /* 少し色味を強くしました */
    background: linear-gradient(to left, #E8D6B8, #F5F0E6);
    animation-duration: 18s;
    animation-direction: alternate-reverse;
}

/* Blob 3: アクセントグレー（落ち着き） */
.blob-3 {
    top: 40%;
    left: 40%;
    width: 40%;
    height: 40%;
    background-color: #D4D4D4;
    animation-duration: 12s;
}

/* アニメーション定義 */
@keyframes blobMove {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        /* 動きの幅を少し大きめに設定 */
        transform: translate(50px, 30px) scale(1.1) rotate(10deg);
    }
}

/* --- 3D Reveal Animation (奥から立ち上がる) --- */

/* グリッドの親要素に奥行きを設定 */
#works-grid {
    perspective: 1200px;
}

/* アニメーションの初期状態（奥に倒れている） */
.reveal-3d {
    opacity: 0;
    /* X軸回転で奥に倒す + 少し縮小 + 下にずらす */
    transform: perspective(1200px) rotateX(30deg) scale(0.9) translateY(50px);
    transform-origin: center top; /* 上辺を軸にぶら下がるような動き、または center center */
    /* 滑らかな動きの設定 */
    transition: all 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) !important;
    will-change: transform, opacity;
}

/* 表示された状態（起き上がる） */
.reveal-3d.is-visible {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
}

/* --- Sticky Profile (スクロール追従) --- */
.sticky-profile {
    position: -webkit-sticky;
    position: sticky;
    top: 6rem; /* ヘッダーの高さ分、上を空けて止まる */
    height: fit-content;
    z-index: 10;
}

/* --- Reveal Image (カーテン後に画像を表示) --- */
.reveal-img {
    opacity: 0; /* 最初は透明 */
    transition: opacity 0.8s ease 0.6s; /* カーテンが開く0.6秒後に出現 */
    will-change: opacity;
}

/* 親要素（reveal-wrap）が表示モードになったら画像を表示 */
.reveal-wrap.is-visible .reveal-img {
    opacity: 1 !important;
}


/* =========================================
   1. Loading Screen (オープニング)
   ========================================= */
/* ロード完了時：上にスライドして消える */
.loaded #loading-screen {
    transform: translateY(-100%);
}

/* ロード中のロゴアニメーション */
.loading-active #loading-logo {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   2. Responsive Tweaks (スマホ調整)
   ========================================= */
@media (max-width: 768px) {
    /* スマホではSticky（追従）を無効化して、自然なスクロールにする */
    .sticky-profile {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 2rem; /* 下に余白を開ける */
    }

}

/* =========================================
   3. Lenis (慣性スクロール) 推奨設定
   ========================================= */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* 緊急用：オープニングを無効化 */
#loading-screen {
    display: none !important;
}

/* --- Custom Scrollbar (Seminar Section) --- */

/* スクロールバー全体の幅 */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px; /* 極細でスタイリッシュに */
}

/* スクロールバーの軌道（背景） */
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); /* ほとんど見えない薄い色 */
    border-radius: 4px;
}

/* スクロールバーの動く部分（つまみ） */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); /* 半透明の白 */
    border-radius: 4px;
}

/* つまみにホバーした時 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6); /* 少し明るく */
}

/* --- メインビジュアルのフェードイン修正 --- */

/* 1. 最初はスライダー全体を透明にしておく */
#hero-slider {
    opacity: 0;
    /* カーテンが開くのを0.6秒待ってから、0.8秒かけて表示 */
    transition: opacity 0.8s ease 0.6s; 
}

/* 2. 幕が開いたら（is-visibleがついたら）表示する */
.reveal-wrap.is-visible #hero-slider {
    opacity: 1;
}

/* --- メインビジュアルのスライド切り替えアニメーション --- */

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* 通常時（非アクティブ）：透明にしておく */
    opacity: 0;
    z-index: 1;
    
    /* アニメーション設定 */
    /* opacity: 2秒かけてフワッと変わる */
    /* transform: 7秒かけてゆっくりズームする */
    transition: opacity 2.0s ease-in-out, transform 7.0s ease-out;
    
    /* 待機中は少し拡大しておく（ズームアウト演出のため） */
    transform: scale(1.1);
}

/* アクティブ時（表示中） */
.hero-slide.active {
    /* 不透明にする（見えるようにする） */
    opacity: 1;
    z-index: 2;
    
    /* 元のサイズに戻る動き（1.1倍 → 1倍 へゆっくり動く） */
    transform: scale(1);
}

/* --- Seminar Section Custom Scrollbar --- */

/* スクロールバーのベース設定（Firefox用） */
.custom-scroll {
    scrollbar-width: thin; /* 細くする */
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent; /* つまみ / 背景 */
}

/* Chrome, Safari, Edge用 */
.custom-scroll::-webkit-scrollbar {
    width: 6px; /* 幅を6px（極細）に */
}

/* スクロールバーの背景（トラック） */
.custom-scroll::-webkit-scrollbar-track {
    background: transparent; /* 背景色なしでスッキリ */
}

/* つまみ（スクロールする部分） */
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3); /* 半透明の白 */
    border-radius: 100px; /* 角を丸く */
    border: none; /* 余計な枠線を消す */
}

/* つまみにホバーした時 */
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6); /* ホバーで少し明るく */
}

/* --- History Slider Fix --- */

/* カーテンが開いた後でも、スライダーの画像は一旦隠す */
.reveal-wrap.is-visible .slide-img {
    opacity: 0 !important;
}

/* activeクラスがついている画像だけを表示する */
.reveal-wrap.is-visible .slide-img.active {
    opacity: 1 !important;
    transform: scale(1.1); /* ズーム効果も復活 */
}

/* --- Mobile Menu Slide Animation --- */

/* 1. リンクの初期状態（下に隠しておく） */
.menu-link {
    display: block;
    transform: translateY(110%); /* 文字の高さ分だけ下にずらす */
    opacity: 0;
    will-change: transform, opacity;
    /* 戻る時のアニメーション（閉じる時はサッと消える） */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

/* 2. メニューが開いた時（JSでクラス付与） */
.menu-link.is-active {
    transform: translateY(0); /* 元の位置に戻る */
    opacity: 1;
    /* 出る時のアニメーション（少しゆっくり優雅に） */
    /* header.phpで設定した inline-style の delay がここで効きます */
    transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.0s ease;
}

/* Q&Aセクションの背景（軽量化版） */
.bg-texture-paper {
    background-color: #F9F9F7; /* ベースの色 */
    
    /* ▼ 修正：重たいSVGをやめて、軽量なPNG画像をリピートさせます */
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA5OTkAAABMTExERERmZmazs7PMzMz3Pw6IAAAABHRSTlMvf4C/PYIPVwAAABxJREFUOMtjYBhYwMTAwJ7OAAAQq4CSCg0TBgYALXYCA11u5QkAAAAASUVORK5CYII=");
    
    /* 画像を小さくリピートさせてノイズに見せる */
    background-repeat: repeat;
    background-size: 100px 100px; /* 粒度の調整 */
    background-blend-mode: multiply; /* 背景色と馴染ませる */
    opacity: 0.8; /* ここで濃さを調整 */
}