@charset "UTF-8";
/* ######################################################################################

　リニューアルサイト：アニメーション

###################################################################################### */

/* =======================================
    ベースリセット
======================================= */
html, body {
    margin: 0;
    padding: 0;
    height: auto; /* ← 100%だとbodyの高さが足りない */
    min-height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE/Edge */
    background:#000;
}
html::-webkit-scrollbar {display: none;}

button {
    border:none;
    background:none;
}

/* ######################################################################################

　枠組み

###################################################################################### */

/* =======================================
    重なり順
======================================= */
.headMenu         {z-index:99999;}
button.hbg        {z-index:99999;}

.spFixBtn         {z-index:99999;}
.benefits         {z-index:99999;}

.logoLayer        {z-index:4;}
.movieReplay      {z-index:3;}
.movieSkip        {z-index:3;}
.contentsBase     {z-index:3;}
.pin-spacer       {z-index:2 !important;}
.openingContainer {z-index:1;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}

/* =======================================
    オープニング枠
======================================= */
.openingContainer {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background: #000;
    opacity: 1;
    transition: opacity 2s ease;
}
.openingContainer.fade-out {opacity: 0; pointer-events: none;}

/* =====================================
   コンテンツ枠
===================================== */
.contentsBase {
    position: relative; position: fixed;
    width: 100%;
    overflow: hidden;
    display: none;
    opacity: 0;
    transition:opacity 1.5s ease-in-out;
}
.contentsBase.fade-in {
    opacity: 0.001;
    display:block;
    animation:FadeIn 1.5s ease-in-out forwards;
}
.contentsBase.popOpen {
    animation:popOpen 0.5s ease-out forwards;
}

@keyframes FadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes popOpen {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}

@media print, screen and (min-width: 768px) {
    .contentsBase {height: 100vh;}
}
@media screen and (max-width: 767px) {
    html.scroll_lock {height: 100vh; overflow-y: scroll; overscroll-behavior: none;}
    html.scroll_lock .contentsBase {height:calc(100vh + 1px); overflow:hidden;}
}




/* ######################################################################################

　オープニングムービー

###################################################################################### */

/* =====================================
   枠設定
===================================== */
.openingVideo {
    position:fixed;
    width:100vw;
    height:100vh;
    overflow:hidden;
}
.openingVideo iframe {
    position:absolute;
    top:50%;
    left:50%;
}
.landscape .openingVideo iframe {
    height:calc((100vw / 16 * 9) + 100px);
    width:calc(100vw + 142px);
    transform:translate(-50%, calc(-50% - 20px));
}
.horizon .openingVideo iframe {
    width:calc((100vh + 80px) / 9 * 16);
    height:calc(100vh + 120px);
    transform:translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
}

.openingVideo.fade-out {
    opacity: 0;
    transition: opacity 3s ease;
    pointer-events: none;
}


/* =====================================
   Youtube配置
===================================== */

/* =======================================
    きらきら背景
======================================= */

.wallVideoContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50vh;
    overflow: hidden;
    z-index: 0; /* 動画を背景にしたい場合。前面に出すなら適宜調整 */
    background: black;
    /*object-fit:cover;*/
}
.wallVideoContainer .wallVideoUT,
.wallVideo .wallVideoUT {display:block !important;}


@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .logoLayer img {width: 70%;}
}


/* =====================================
   ロゴ
===================================== */
.logoLayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,1);
    transition: background-color 0.5s ease, opacity 0.5s ease;
}
.logoLayer.transparent-bg {background-color: rgba(0,0,0,0);}

.logoLayer img {
    height: auto;
    max-width: 600px;
    opacity: 1;
    transition: opacity 1s ease;
}
.logoLayer img.fade-out {opacity: 0;}
@media print, screen and (min-width: 768px) {
    .logoLayer img {width: 30%;}
}
@media screen and (max-width: 767px) {
    .logoLayer img {width: 70%; position:relative; top:-5%;}
}


/* =====================================
   スクロールギャラリー
===================================== */
.scrollGallery {
    overflow: hidden;
    display: none;
    opacity: 0;
    transition: opacity 3s ease;
}
.scrollGallery.fade-in  {display: block; opacity: 1;}
.scrollGallery.fade-out {opacity: 0 !important;}

.pin-spacer{ transition: opacity 3s ease;}
.pin-spacer.fade-out {opacity: 0 !important;}

.wrap {position: relative; height: 100vh;}

/* --- Image Items --- */
.item {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: center no-repeat;
    background-size: cover;
    left: 50%;
    top: 0%;
    transform: scale(0) translateX(-50%);
    transform-origin:top center;
    opacity: 0;
    z-index: 1;
    transition: none !important; /* 初期チラつき防止 */
}
.item01 { background-image: url(../img/renew/opening/img_01.jpg); }
.item03 { background-image: url(../img/renew/opening/img_03.jpg); }
.item04 { background-image: url(../img/renew/opening/img_04.jpg); }
.item05 { background-image: url(../img/renew/opening/img_05.jpg); }
.item06 { background-image: url(../img/renew/opening/img_06.jpg); }
.item07 { background-image: url(../img/renew/opening/img_07.jpg); }
.item08 { background-image: url(../img/renew/opening/img_08.jpg); }
.item09 { background-image: url(../img/renew/opening/img_09.jpg); }
.item10 { background-image: url(../img/renew/opening/img_10.jpg); }
.item11 { background-image: url(../img/renew/opening/img_11.jpg); }
.item12 { background-image: url(../img/renew/opening/img_12.jpg); }
.item13 { background-image: url(../img/renew/opening/img_13.jpg); }
.item14 { background-image: url(../img/renew/opening/img_14.jpg); }
.item15 { background-image: url(../img/renew/opening/img_15.jpg); }
.item16 { background-image: url(../img/renew/opening/img_16.jpg); }
.item17 { background-image: url(../img/renew/opening/img_17.jpg); }
.item18 { background-image: url(../img/renew/opening/img_18.jpg); }
.item19 { background-image: url(../img/renew/opening/img_19.jpg); }
.item20 { background-image: url(../img/renew/opening/img_20.jpg); }
.item21 { background-image: url(../img/renew/opening/img_21.jpg); }
.item22 { background-image: url(../img/renew/opening/img_22.jpg); }
.item23 { background-image: url(../img/renew/opening/img_23.jpg); }
.item24 { background-image: url(../img/renew/opening/img_24.jpg); }

/* --- Utility Classes --- */
.hidden-init {opacity: 0; transform: scale(0); scale: 0;}


/* =====================================
   スキップ・リプレイボタン
===================================== */
.movieReplay,
.movieSkip {
  position: fixed;
  right: 20px;
  padding: 0.5em 1.5em;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius:0.4em;
}
.movieSkip.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}



@media print, screen and (min-width: 768px) {
.movieReplay {bottom:80px;}
.movieSkip   {top:20px;}

.movieReplay,
.movieSkip {
    font-size:14px;
}
}
@media screen and (max-width: 767px) {
.movieReplay   {top:20px;}
.movieSkip {bottom:50px;}

.movieReplay,
.movieSkip {
    font-size:14px;
}
}





/* ######################################################################################

　コンテンツ切り替え

###################################################################################### */

/* =======================================
    枠設定
======================================= */
.slider { width: 100%; position: relative;}
.slider__inner { width: 100%; height: 100%; position:relative; z-index:0;}

canvas {position: absolute; top: 0; left: 0; z-index: 1; opacity: 0.01; transition: opacity 0.8s ease;}

.js-slider-content .slide-content {display: none;}
.js-slider-content .slide-content.active {display: block;}

.slider-content {
    color: #fff;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    width:0;
    height:0;
}
@media print, screen and (min-width: 768px) {
.slider {height: 100%;}
}
@media screen and (max-width: 767px) {
.slider {height:calc(100% - 60px);}
}



/* =======================================
    パーツ共通設定
======================================= */
    .slider-content .hbg,
    .slider-content .logo,
    .slider-content .name,
    .slider-content .copy,
    .slider-content .scroll,
    .slider-content a.youtubeVideo,
    .slider-content button {position:absolute;}

    .slider-content .logo img,
    .slider-content .copy img,
    .slider-content .scroll img,
    .slider-content button img {width:100%; height:auto;}


#videoPlaceholder,
#videoPlaceholder *,
.wallVideo,
.wallVideo * {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* GPUレイヤー分離でChromeバグ対策 */
}

/* iframeに描画強制 */
.wallVideo iframe {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 共通の動画コンテナレイアウト設定 */
#videoPlaceholder,
#sharedVideoWrapper {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
}

#videoPlaceholder {opacity:1; transition: opacity 0.8s ease;}

.videoPlaceholder {overflow:hidden;}
.videoPlaceholder video {pointer-events: none;}


/* =======================================
    ハンバーガーメニュー
======================================= */
button.hbg {
    display: flex; /* 最初から常にレイアウトに存在させる */
    position:fixed;
    flex-wrap:wrap;
    justify-content:center;
    align-content:space-between;
    top:-9999px;
    right:-9999px;
    
    width:40px;
    height:30px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.hbg.fade-in {opacity: 1;}

button.hbg.is-hidden {opacity: 0; pointer-events: none;}

button.hbg > div {
    background:#fff;
    width:30px;
    height:2px;
    transition:all 0.5s ease;
    transform-origin:center;
    opacity:1;
    position:relative;
    top:0;
    box-shadow:0 0 4px rgba(0,0,0,0.5);
}
@media print, screen and (min-width: 768px) {

    button.hbg {width:40px; height:30px;}
    button.hbg.fade-in {top:40px; right:40px;}
    button.hbg img {display:none;}
    button.hbg.open > :nth-of-type(1) { transform:rotate(45deg); top:calc(50% - 1px);}
    button.hbg.open > :nth-of-type(2) { opacity:0;}
    button.hbg.open > :nth-of-type(3) { transform:rotate(-45deg); top:calc(-50% + 1px);}
}
@media screen and (max-width: 767px) {
    button.hbg {
        position:fixed;
        flex-wrap:wrap;
        justify-content:center;
        align-content:space-between;
        background:url(../img/renew/menu/sp_fixmenu_wall_04.png) no-repeat;
        background-size:cover;
        width:25%;
        height:60px;
        border-top:1px solid #fff;
        border-left:1px solid #fff;
    }
    button.hbg.fade-in {top:auto; bottom:0; right:0;}
    button.hbg img {width:72px; height:44px;}

    button.hbg.open {
        z-index:99999;
    }

    button.hbg > div { position:absolute;}
    button.hbg > :nth-of-type(1) {opacity:0; top:50%;}
    button.hbg > :nth-of-type(3) {opacity:0; top:50%;}
    button.hbg > :nth-of-type(2) {
        background:url(../img/renew/menu/sp_fixmenu_ico_04.svg) center no-repeat;
        width:72px;
        height:44px;
        box-shadow:none;
        top:50%;
        transform:translateY(-50%)
    }

    /* open */
    button.hbg.open > :nth-of-type(1) { transform:rotate(45deg); opacity:1;}
    button.hbg.open > :nth-of-type(2) { opacity:0;}
    button.hbg.open > :nth-of-type(3) { transform:rotate(-45deg); opacity:1;}
}

/* =======================================
    spフッタボタン
======================================= */
@media print, screen and (min-width: 768px) {
.spFixBtn { display:none;}
}
@media screen and (max-width: 767px) {
    .spFixBtn {
        display:block;
        position:fixed;
        bottom:0;
        left:0;
        width:75%;
        transition:all 0.5s ease;
        opacity:0;
    }
    .spFixBtn.fade-in {opacity:1;}
    .spFixBtn.is-hidden {opacity: 0; pointer-events: none;}


    .spFixBtn___wrap {
        display:flex;
    }
    .spFixBtn___item {
        width:33.333%;
        list-style:none;
    }
    .spFixBtn___item + .spFixBtn___item {
        border-left:1px solid #fff;
    }
    .spFixBtn___item a {
        display:flex;
        justify-content:center;
        align-content:center;
        align-items:center;
        height:60px;
        text-decoration:none;
        background:center no-repeat;
        background-size:cover;
        border-top:1px solid #fff;
    }
    .spFixBtn___item:nth-child(1) a {background-image:url(../img/renew/menu/sp_fixmenu_wall_01.png);}
    .spFixBtn___item:nth-child(2) a {background-image:url(../img/renew/menu/sp_fixmenu_wall_02.png);}
    .spFixBtn___item:nth-child(3) a {background-image:url(../img/renew/menu/sp_fixmenu_wall_03.png);}
    .spFixBtn___item img {width:72px; height:44px;}
}














/* =======================================
    ヘッダメニュー
======================================= */
.headMenu {
    position:fixed;
    top:42px;
    right:100px;
    line-height:1;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}
.headMenu.fade-in {opacity: 1;}
.headMenu.is-hidden {opacity: 0; pointer-events: none;}
.headMenu a {
    display:flex;
    align-items:center;
    height:30px;
background: linear-gradient(to right,  rgba(183,172,157,0.7) 0%,rgba(109,102,80,0.7) 100%);
    padding:0 20px;
    border-radius:5px;


}
.headMenu img {height:12px; width:auto; vertical-align:middle;}

.headMenu li {
    list-style:none;
}
.headMenu li+li {margin-left:10px;}

@media print, screen and (min-width: 768px) {
.headMenu {display:flex;}
}
@media screen and (max-width: 767px) {
.headMenu {display:none;}
}

/* =======================================
    物件エントリー
======================================= */

.top___entry {
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content:center;
    align-items:center;
    max-width:420px;
}
@media print, screen and (min-width: 768px) {
.top___entry {
    bottom:70px;
    width:30%;
}
}
@media screen and (max-width: 767px) {
.top___entry {
    bottom:90px;
    width:80%;
}
}

/* =======================================
    物件エントリー
======================================= */
.top___entry .top___entry___text {
    max-width:240px;
}
.top___entry .top___entry___entry img {
    width:200px;
    height:auto;
}
@media print, screen and (min-width: 768px) {
.top___entry .top___entry___entry {margin-top:1.5em;}
}
@media screen and (max-width: 767px) {
}

/* =======================================
    物件エントリーとは
======================================= */
.top___entry .benefits {
    display:flex;
    justify-content:center;
    align-content:center;
    align-items:center;
    color:#fff;
    cursor:pointer;
}
.top___entry .benefits img {
    width:200px;
    height:auto;
}
@media print, screen and (min-width: 768px) {
.top___entry .benefits {margin-top:0.5em;}
}

@media screen and (max-width: 767px) {
.top___entry .benefits {margin-top:2em;}
.top___entry .top___entry___entry {display:none;}
}


/* =======================================
    ロゴ
======================================= */
@media print, screen and (min-width: 768px) {
    .slider-content .logo {width:20%; top: 2.7%; left: 2.7%;}
}
@media screen and (max-width: 767px) {
    .slider-content .logo {width:34%; top: 20px; left: 20px;}
}


/* =======================================
    コピー
======================================= */
@media print, screen and (min-width: 768px) {
    .slider-content .copy {top: 16%; left: 50%; transform: translateX(-50%); width:76%; max-width:1000px;}
    .slider-content.slide-content03 .copy {transform: translate(-50%,-8%);}
}
@media screen and (max-width: 767px) {
    .slider-content .copy {top: 13%; left:50%; transform:translateX(-50%); width:84.2%;}
    .slider-content.slide-content03 .copy {transform: translate(-50%,-2.8%);}
}


/* =======================================
    VIEWボタン
======================================= */

.slider-content .youtubeVideo,
.slider-content button:not(.hbg) {
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    transition:opacity .5s ease;
    cursor:pointer;
}
.slider-content .youtubeVideo:hover,
.slider-content button:hover {opacity:0.8;}
@media print, screen and (min-width: 768px) {
    .slider-content .youtubeVideo,
    .slider-content button:not(.hbg) {top: 53%; width:8%; max-width:130px;}
}
@media screen and (max-width: 767px) {
    .slider-content .youtubeVideo,
    .slider-content button:not(.hbg) {top: 40%; width:20%;}
}


/* =======================================
    Scrollアイコン
======================================= */

.scrollDown {
    position:fixed;
    width:100vw;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    z-index:999;
    opacity:1;
    transition:opacity 1s ease;
    background:transparent;
    border:5px solid transparent;
}
.scrollDown:before {
    content:"";
    display:block;
    position:absolute;
    left:50%;
    bottom:0;
    width:1px;
    background:#fff;
    animation:scrollDownCenter 3s infinite ease-in-out;
}
.scrollDown.fade-out {opacity:0;}

.popWindow .scrollDown {
    bottom:0;
}



@keyframes scrollDownCenter {
0%   {transform:scaleY(0); transform-origin:top;}
10%  {transform:scaleY(100%); transform-origin:top;}
70%  {transform:scaleY(100%); transform-origin:bottom;}
80%  {transform:scaleY(0); transform-origin:bottom;}
100% {transform:scaleY(0); transform-origin:bottom;}
}

.scrollDown img {width:100%; height:auto;}
@media print, screen and (min-width: 768px) {
.scrollDown {padding-bottom:70px;}
.scrollDown img {width:50px;}
.scrollDown:before {height:60px;}

.popWindow .scrollDown { height:80px;}

}
@media screen and (max-width: 767px) {
.scrollDown {padding-bottom:calc(10vw / 5 * 7);}
.scrollDown img {width:16vw;}
.scrollDown:before {height:calc(7.2vw / 5 * 7);}

.popWindow .scrollDown {height:calc(8vw / 5 * 7);}

}

.openingContainer .scroll {
    position:fixed;
    transform:translateX(-50%);
    z-index:9999;
    animation: 2s infinite alternate ease-out;
    animation-name:scrollDownOP;
    opacity:0;
    transition:opacity 1s ease 1s;
}
.openingContainer .scroll.fade-in {opacity:1;}

.slider-content .scroll {
    transform:translateY(-50%);
    animation: 2s infinite ease-out;
    padding-bottom:4px;
}
@media print, screen and (min-width: 768px) {
    .openingContainer .scroll {
    left:50%;
    bottom:0;
    }
    .slider-content .scroll {
        top:50%;
        right:30px;
        transform:translateY(-50%);
        width:30px;
        animation-name:scrollDownPC;
    }
}
@media screen and (max-width: 767px) {
    .openingContainer .scroll {
    left:34%;
    bottom:5%;
    }
    .slider-content .scroll {
        width:20px;
        bottom:5%;
        right:10px;
        animation-name:scrollDownSP;
    }
}
@keyframes scrollDownPC {
    0%   { transform:translateY(-50%);}
    20%  { transform:translateY(-44%);}
    40%  { transform:translateY(-50%);}
    100% { transform:translateY(-50%);}
}
@keyframes scrollDownSP {
    0%   { transform:translateY(5%);}
    20%  { transform:translateY(10%);}
    40%  { transform:translateY(5%);}
    100% { transform:translateY(5%);}
}


@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}