/* 共通スタイル */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 会社名のスタイル */
.company-name {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 1.5em;
    color: white;
    z-index: 2000;
}

.company-name a {
    color: white;
    text-decoration: none;
}

.slideshow {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slides {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

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

.left-slides {
    width: var(--left-slide-width);
    left: 0;
    clip-path: polygon(
        0% 0%, 
        calc(100% - var(--boundary)) 0%, 
        100% 100%, 
        0% 100%
        );
}

.right-slides {
    width: var(--right-slide-width);
    left: calc(var(--left-slide-width) - var(--boundary));
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        var(--boundary) 100%);
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none; /* 追加 */
}

.slide.active {
    opacity: 1;
    pointer-events: auto; /* 追加 */
}

.project-name {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    color: #fff;
}

.left-slides .project-name {
    left: 20px;
}

.right-slides .project-name {
    right: 20px;
    text-align: right;
}

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

.menu-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 1em;
    font-weight: bold; /* Bold font for visibility */
    color: #ffffff;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 2000; 
}

.menu-button:hover {
    text-decoration: underline;
}



/* メニューパネル */
.menu-panel {
    position: fixed;
    top: 0;
    left: 0; /* ← leftのアニメーションをやめる */
    width: calc(300px + var(--boundary));
    height: 100dvh;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - var(--boundary)) 0, 100% 100%, 0 100%);
    transform: translateX(-100%) translateZ(0); /* ← transformで開閉 */
    transition: transform .5s ease;             /* ← left → transform */
    will-change: transform, clip-path;
    z-index: 1000;
    padding: 50px 20px;
    box-sizing: border-box;
    font-weight: bold;
  }
  
  .menu-panel.open { transform: translateX(0) translateZ(0); }

.menu-panel ul {
    list-style-type: none;
    padding: 0;
}

.menu-panel li {
    margin: 15px 0;
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(-20px); /* 初期状態で少し上に位置させる */
    transition: opacity 0.5s ease, transform 0.5s ease; /* アニメーション */
}

.menu-panel.open li {
    opacity: 1; /* パネルが開いた時に表示 */
    transform: translateY(0); /* 元の位置に戻る */
}

/* アニメーションの遅延を設定 */
.menu-panel.open li:nth-child(1) { transition-delay: 0.1s; }
.menu-panel.open li:nth-child(2) { transition-delay: 0.2s; }
.menu-panel.open li:nth-child(3) { transition-delay: 0.3s; }
.menu-panel.open li:nth-child(4) { transition-delay: 0.4s; }
.menu-panel.open li:nth-child(5) { transition-delay: 0.5s; }
.menu-panel.open ul li:nth-child(6) { transition-delay: 0.6s; } /* AI×BIMコンサル用 */
.menu-panel.open ul li:nth-child(7) { transition-delay: 0.7s; } /* 小さいメニュー用 */
.menu-panel.open ul li:nth-child(8) { transition-delay: 0.8s; } /* 小さいメニュー用 */

/* 小さいメニューの遅延 */
.menu-panel.open li.small-text-group li:nth-child(1) { transition-delay: 0.6s; }
.menu-panel.open li.small-text-group li:nth-child(2) { transition-delay: 0.7s; }
.menu-panel.open li.small-text-group li:nth-child(3) { transition-delay: 0.8s; }
.menu-panel.open li.small-text-group li:nth-child(4) { transition-delay: 0.9s; }

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

/* 大きいメニューの上にスペースを追加 */
.main-menu {
    margin-top: 100px; 
}

/* 小さいメニューの上にスペースを追加 */
.small-menu {
    margin-top: 100px; /* 大きいメニューから少し離す */
}



.menu-panel ul.small-menu li a {
    font-size: 0.8em; /* 小さい文字に */
}

/* Close button */
.close-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: transparent;
    color: white;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 2000;
}

/* メニューが開いている時 */
.menu-panel.open {
    left: 0;
}



/* スマホ用スタイル */
@media screen and (max-width: 768px) {
    .right-slides {
        display: none;
    }
    .left-slides {
        width: 100%;
        clip-path: none;
    }
}