/*
 * File: aibim-styles.css
 */

/* リセット・共通 */
html, body {
    margin: 0;
    padding: 0;
    overflow-y: auto; /* ★ 縦スクロールを許可 */
    overflow-x: clip; /* ★ 横スクロールは禁止 */
    font-family: sans-serif;
    background-color: black; /* 下地は黒 */
}

/* 会社名（右上） */
.company-name-right {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    z-index: 4000;
}

.company-name-right a {
    color: #fff;
    text-decoration: none;
}

.main-container {
    position: relative;
    width: 100vw;
    height: 100vh; /* ★ ファーストビューは100vhを維持 */
}

/* * 左パネル：3Dモデルエリア
 * 右パネル：動画エリア
 * 下記クリッピングパスで左右台形を作り、鏡面反転
 */

:root {
    --boundary: calc(100vh * 0.26794919243); /* tan(15deg) ≈ 0.26794919243 */
    --right-slide-width: calc(100% * (1 / (1 + 1/1.618)));
    --left-slide-width: calc(100% - var(--right-slide-width) + var(--boundary));
}

/* 左側パネル (鏡面反転意図で、元rightの形を流用) */
.left-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--left-slide-width);
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        calc(100% - var(--boundary)) 100%, 
        0% 100%
    );
    background-color: #222; /* 下地 */
    overflow: hidden;
}

#threejs-container {
    width: var(--left-slide-width);
    height: 100%;
    position: relative;
}

/* 右側パネル (元leftの形を反転) */
.right-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--right-slide-width);
    left: calc(var(--left-slide-width) - var(--boundary));
    clip-path: polygon(
        var(--boundary) 0%, 
        100% 0%, 
        100% 100%, 
        0% 100%
    );
    background-color: #333;
    overflow: hidden;
}

/* 背景動画のスタイル */
.background-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* メニューボタン（左下） */
.menu-button-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    text-shadow:
    0 0 6px rgba(60, 60, 60, 0.95), /* 強めの黒ぼかし */
    0 0 12px rgba(120, 120, 120, 0.7); /* 外側にもう一段 */
    cursor: pointer;
    z-index: 4100;
    background: none;
    border: none;
}

/* メニューパネル(右側からスライドしてくる) */
/* 変更：スライドはラッパーで担当（clip-pathは持たせない） */
.menu-panel-right {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(300px + var(--boundary));
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.5s ease;
    z-index: 3000;
    /* 背景、padding、clip-pathなどは内側の .menu-surface に移動 */
}

/* 追加：形状や中身のスタイルは内側で担当 */
.menu-surface {
    position: absolute;
    inset: 0; /* top/right/bottom/left をまとめて指定 */
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    clip-path: polygon(var(--boundary) 0, 100% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(var(--boundary) 0, 100% 0, 100% 100%, 0% 100%); /* Safari用 */
    padding: 60px 20px 60px calc(20px + var(--boundary));
    box-sizing: border-box;
    font-weight: bold;
}

/* メニューリスト */
.menu-panel-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-panel-right li {
    margin: 15px 0;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* パネルがopen時アニメーション */
.menu-panel-right.open {
   transform: translateX(0); /* 変更：transformを元の位置に戻す */
}
.menu-panel-right.open li {
    opacity: 1;
    transform: translateY(0);
}
/* nth-childでアニメーション遅延 */
.menu-panel-right.open li:nth-child(1) { transition-delay: 0.1s; }
.menu-panel-right.open li:nth-child(2) { transition-delay: 0.2s; }
.menu-panel-right.open li:nth-child(3) { transition-delay: 0.3s; }
.menu-panel-right.open li:nth-child(4) { transition-delay: 0.4s; }
.menu-panel-right.open li:nth-child(5) { transition-delay: 0.5s; }

.menu-panel-right li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.0em;
}


/* レスポンシブ対応: 幅が狭いときは上下分割など自由に調整 */
@media screen and (max-width: 768px) {
    #threejs-container {
    width: 100%;
    height: 100%;
}
    .left-panel,
    .right-panel {
        clip-path: none;
        width: 100%;
        height: 50%;
        position: static;
    }
    .background-video {
        position: static;
        width: 100%;
        height: auto;
    }
    .main-container {
        display: flex;
        flex-direction: column;
    }
}


/* =================================
   ▼▼▼ ページ本文オーバーレイ (削除) ▼▼▼
   ================================= */
/*
 * 以前の .page-content-overlay 関連の
 * スタイル指定 (position: fixed など) は
 * すべて削除されました。
 */


/* =================================
   ▼▼▼ ページ下部 本文 (ここから追記) ▼▼▼
   ================================= */
.aibim-page-content {
    background-color: #000; /* 背景は黒 */
    color: #e0e0e0; /* 以前指定したグレー */
    padding: 60px 20px; /* 上下の余白 */
    box-sizing: border-box;
    /* position: fixed ではないので、ファーストビューの下に続きます */
}

.aibim-page-content .content-body {
    max-width: 800px; /* 読みやすい幅に設定 */
    margin: 0 auto; /* 中央揃え */
    line-height: 1.8;
}

/* WordPressが生成するタグのスタイル */
.aibim-page-content p {
    margin-bottom: 1.5em;
    font-size: inherit; 
    line-height: inherit;
}

.aibim-page-content a {
    color: #e0e0e0;
    text-decoration: underline;
}

.aibim-page-content h1,
.aibim-page-content h2,
.aibim-page-content h3,
.aibim-page-content h4 {
    color: #ffffff; /* 見出しは白で目立たせる */
    margin-top: 2em;
    margin-bottom: 0.8em;
    line-height: 1.4;
}
/* ▲▲▲ ページ下部 本文 (ここまで追記) ▲▲▲ */