body {
    margin: 0;
    position: relative;
}

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

/*========= スクロールバーを無くす ===============*/
html {
  -ms-overflow-style: none; /* IE, Edge 対応 */
  scrollbar-width: none;    /* Firefox 対応 */
}

htnl::-webkit-scrollbar {
  display: none; /* Chrome, Safari 対応 */
}

/* ==== アニメーション｜スクロール封じ 
@keyframes scrollseal {
from { overflow: hidden }
to { overflow: visible; }
}
==== */

/* ==== 17秒間スクロール禁止 
body {
animation: scrollseal 0s 17s both;
}
==== */

/*========= サイドバーを開始数秒の間、非表示にする ===============*/
.d-none {
  display: none;
}


/*========= マウスストーカー ===============*/

html,body,a {
    cursor: none;
}

#js-mouse{
    pointer-events: none;
    position: fixed;
    top: -30px; 
    left: -30px;
    width: 60px;
    height: 60px;  
    border-width: 2px;
    border-style: solid;
    border-color: rgba(233, 253, 255, 0.8);
    border-radius: 50%;
    transform: translate(0,0);
    transition: all 0.8s ease-out;
    z-index: 9999;
    opacity: 0;
    mix-blend-mode: exclusion;
}

#js-cursor{
    pointer-events: none;
    position: fixed;
    top: -15px; 
    left: -15px;
    width: 25px;
    height: 25px;
    background-color:rgba(233, 253, 255, 0.8);
    border-radius: 50%;
    transform: translate(0,0);
    transition: width 0.3s ease-out,height 0.3s ease-out;
    z-index: 10000;
    opacity: 0;
    mix-blend-mode: exclusion;
}

#js-mouse .js-hover {
    width: 80px;
    height: 80px;
}
#js-cursor .js-hover {
    width: 50px;
    height: 50px;
}



/*========= 背景動画設定 ===============*/
#main{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
    z-index: -1;
} 

#video-area{
    position: fixed;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video, #video-commmingsoon{
    /*天地中央配置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 130%;
    min-width: 130%;
    background-image: url(C:\Users\info\OneDrive\デスクトップ\Opus Puente\HP\メインページ\img\背景画像.png);
}




/*見出し設定
 h1{
    要素の配置
    position:absolute;
    要素を天地中央寄せ
    top: 48%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    見た目の調整
    color:transparent;
    text-shadow: 0 0 15px #666; 
    z-index: 1000;
}
*/

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
    position:absolute;
    top: 50%;
    margin-left: 3%;
    opacity: 0;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%) translateX(-50%); 
    /*テキストの形状*/
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-5px;
    /*丸の形状*/
    width:10px;
    height:10px;
    border-radius: 50%;
    background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
        circlemove 2.6s ease-in-out infinite,
        cirlemovehide 2.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:100px;}
     100%{bottom:-100px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
    100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
    content:"";
    /*描画位置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); 
    /*線の形状*/
    width:2px;
    height: 200px;
    background:#eee;
}



/*========= 「スクロールマーク」を読み込み後14秒後にふわっと表示 ===============*/
.scrolldown2 {
  animation: fade-in 6s;
  animation-timing-function: ease-in-out;
  animation-delay: 14s;
  animation-fill-mode: backwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}



/*========= 「スクロールマーク」が画面に入ったら表示/消えたら非表示 ===============*/
.scrolldown2 {
    @include trans;
    opacity: 0.8;
    transition: opacity 0.7s, transform 1s;

    &.isPassive {
        opacity: 0;
    }
}



/*========= サイドバー ===============*/

#phone-container {
    display:none;
}

#sidebar-container {
    height: 100vh;
    display: flex;
} 

/*========= 左サイドバー ===============*/
#sidebar-left{
    width: 150px;
    height: 100%;
    padding: auto 0;
    position: relative;
}

#sidebar-left ul{
    list-style: none;
}

.list{
    display: flex;
    writing-mode: vertical-rl;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.item{
    padding:25px 0;
    color: white;
    font-size: 7%;
/*========= 左サイドバーが画面に入ったら表示/消えたら非表示 ===============*/
    @include trans;
    opacity: 0;
    transition: opacity 0.7s, transform 1s;

    &.isActive2 {
        opacity: 0.8;
    }

    /*ここからhover用*/
    transition: .9s ease; /* ゆっくり変化させる */
}

.item:hover {
    filter: brightness(0.1); /* 明るくする */
    transform: scale(1.4); /* 拡大 */
    opacity: 0;
}


.item a{
    text-decoration: none; /*下線をなくす*/
    color: white;
    white-space: nowrap;
    pointer-events: none; /*URLに飛ぶのを無効化 */
}


/*========= 右サイドバー ===============*/

#sidebar-right{
    margin: 0 0 0 auto;
    width: 130px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#sidebar-right-list img{
    display: block;
    object-fit: cover;
    max-width: 22%;
    height: auto;
    margin: 0 auto;
    margin-top: 40px;
    opacity: 0.8;
    /*ここからhover用*/
    transition: filter 0.3s ease;
    transition: transform .6s ease; /* ゆっくり変化させる */
}

#sidebar-right-list img:hover {
    filter: brightness(1.75); /* 明るくする */
    transform: scale(1.4); /* 拡大 */
    opacity: 1;
}


/*========= 右サイドバーが画面に入ったら表示/消えたら非表示 ===============*/
#sidebar-right-list a {
    @include trans;
    opacity: 0;
    transition: opacity 0.7s, transform 1s;

    &.isActive {
        opacity: 1;
    }
}



/*========= タブレット向け（画面幅が601pxから900px）  ===============*/
@media (min-width: 768px) and (max-width: 1200px) {
    #js-cursor, #js-mouse{
        display:none;
    }

}


/*========= スマホ向け（画面幅が600px以下） ===============*/
@media (max-width: 767px) {

    #js-cursor, #js-mouse{
        display:none;
    }


    /*=== スクロールマーク2を非表示 ====*/
    .scrolldown2{
        display:none;
    }


    /*=== スクロールマーク３の設定 ====*/   
    /*スクロールダウン全体の場所*/
    .scrolldown3{
        /*描画位置※位置は適宜調整してください*/
        position:absolute;
        bottom:40px;
        left:50%;
        opacity: 1;
    }

    /*Scrollテキストの描写*/
    .scrolldown3 span{
        /*描画位置*/
        position: absolute;
        left:10px;
        bottom:15px;
        /*テキストの形状*/
        color: #eee;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        /*縦書き設定*/
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    /* 丸の描写 */
    .scrolldown3:before {
        content: "";
        /*描画位置*/
        position: absolute;
        bottom:0;
        left:-4px;
        /*丸の形状*/
        width:10px;
        height:10px;
        border-radius: 50%;
        background:#eee;
        /*丸の動き1.6秒かけて透過し、永遠にループ*/
        animation:
            circlemove 1.6s ease-in-out infinite,
            cirlemovehide 1.6s ease-out infinite;
    }

    /*下からの距離が変化して丸の全体が上から下に動く*/
    @keyframes circlemove{
          0%{bottom:60px;}
         100%{bottom:-5px;}
     }

    /*上から下にかけて丸が透過→不透明→透過する*/
    @keyframes cirlemovehide{
          0%{opacity:0}
         50%{opacity:1;}
        80%{opacity:0.9;}
        100%{opacity:0;}
     }

    /* 線の描写 */
    .scrolldown3:after{
        content:"";
        /*描画位置*/
        position: absolute;
        bottom:0;
        left:0;
        /*線の形状*/
        width:2px;
        height: 65px;
        background:#eee;
    }

    /*========= 「スクロールマーク」を読み込み後14秒後にふわっと表示 ===============*/
    .scrolldown3 {
      animation: fade-in 6s;
      animation-timing-function: ease-in-out;
      animation-delay: 14s;
      animation-fill-mode: backwards;
    }

    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 0.8;
      }
    }


    /* ========= 「スクロールマーク」が画面に入ったら表示/消えたら非表示 =============== */
    .scrolldown3 {
        @include trans;
        opacity: 0.8;
        transition: opacity 0.7s, transform 1s;

        &.isPassive2 {
            opacity: 0;
        }
    }


    /*========= 左サイドバー(スマホVer) ===============*/
    #sidebar-container {
        display: block;
        width: 100%;
    } 

    #pc-container {
        display: none;
    }

    #phone-container {
        display: block;
        height: 100%;
        position: relative;
    }

    #sidebar-left-phone {
        width: 200px;
        margin: 0 auto;
    }

    #sidebar-left-phone ul{
        list-style: none;
    }

    .list-phone {
        height: 80%;
        padding: 0 1px;
        padding-top: 30%;
    }

    .item-phone {
        padding-top: 26%;
        text-align: center;
        font-family: 'Ubuntu Mono', monospace;


    /*========= 左サイドバーが画面に入ったら表示/消えたら非表示 
        @include trans;
        opacity: 0;
        transition: opacity 0.7s, transform 1s;

        &.isActive3 {
            opacity: 0.8;
        }
===============*/
        /*ここからhover用*/
        transition: .9s ease; /* ゆっくり変化させる */
    }

    .item-phone:hover {
        filter: brightness(0.1); /* 明るくする */
        transform: scale(1.4); /* 拡大 */
        opacity: 0;
    }


    .item-phone a{
        text-decoration: none; /*下線をなくす*/
        font-size: 20px;
        color: white;
        pointer-events: none; /*URLに飛ぶのを無効化 */
    }

        
    /*========= 右サイドバー(スマホVer) ===============*/
    #sidebar-right-phone{
        height :15%; 
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        text-align:  center; 
        align-items: center;
    }

    #sidebar-right-list-phone a{
        text-decoration: none;
    }


    #sidebar-right-list-phone img{
        object-fit: cover;
        padding: 0 2%;
        max-width: 8%;
        opacity: 0.8;
        /*ここからhover用*/
        transition: filter 0.3s ease;
        transition: transform .6s ease; /* ゆっくり変化させる */
    }

    #sidebar-right-list img:hover {
        filter: brightness(1.75); /* 明るくする */
        transform: scale(1.4); /* 拡大 */
        opacity: 1;
    }


    /*========= 右サイドバーが画面に入ったら表示/消えたら非表示 
    #sidebar-right-list a {
        @include trans;
        opacity: 0;
        transition: opacity 0.7s, transform 1s;

        &.isActive {
            opacity: 1;
        }
    }
    ===============*/
}