/*  mainVidualの設定 ----------------- */



#topContent #mainVidual{
    padding-top: 0;
    position: relative;
    height: 100vh;
    min-height: 40vh;
    margin-top: -100px;
}

#topContent #mainVidual .gradient-logo{
position: relative;
}

#topContent #mainVidual .gradient-logo .gradient-mask{
background-position: center;
width: 100%;
}


/* メインビジュアル　背景アニメーション ---------- */
#topContent #mainVidual{
opacity: 0;
transition: 2s;
transition-delay: .5s;
}

#topContent #mainVidual.content-show{
opacity: 1;
}


/* メインビジュアル　タイトルアニメーション ---------- */
#topContent #mainVidual .gradient-logo{
transition: 2s;
transition-delay: .5s;
opacity: 0;
}
#topContent #mainVidual .gradient-logo.content-show{
opacity: 1;
}

@media (min-width: 1060px) {
#topContent #mainVidual .gradient-logo{
transition: 2s;
}

#topContent #mainVidual .gradient-logo.content-show{
opacity: 1;
overflow: hidden;
}
}


/*---------------------------------
メインビジュアル　TOPビジュアル変更
-----------------------------------*/
#topContent #mainVidual{
position: relative;
height: calc( 100vh - 100px);
width: 100%;

    padding-top: 100px;
    position: relative;
    height: 100vh;
}

#topContent #mainVidual .gradient-logo{
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

/* respondive 1060  --------------- */
@media (min-width: 1060px) {
#topContent #mainVidual{
    margin-top: 0;
    padding: 0;
}
}

/* respondive 1060  --------------- */
/*@media (min-width: 1600px) {
#topContent #mainVidual .gradient-logo{
    width: max-content;
}
}*/
/*---------------------------------
画像出し分け
-----------------------------------*/
/*#topContent #mainVidual .gradient-logo .sp_01{
    display: none;
}*/

/*#topContent #mainVidual .gradient-logo .pc_01{
    display: none;
}*/




/* スマホのランドスケイプ */
/*@media screen and (orientation: landscape) {
#topContent #mainVidual{
    height: 250vh;
}

#topContent #mainVidual .gradient-logo .pc_01{
    height: 100%;
}
}

@media screen and (orientation: portrait) {
#topContent #mainVidual{
    height: 100vh;
}
}

*/
#topContent #mainVidual{
    min-height: 600px;
}
#topContent #mainVidual .gradient-logo .pc_01{
    object-position: top;
    object-fit: cover;
    height: 100vh;
    width: 100%;
    min-height: 600px;
}

/* 縦長な時専用のクラス */
#topContent #mainVidual .gradient-logo .pc_01.vertical-img{
    object-position: top;
}

/* respondive 1100  --------------- */
@media (min-width: 900px) {
#topContent #mainVidual{
    min-height: 700px;
}

#topContent #mainVidual .gradient-logo .pc_01{
    min-height: 700px;
}
}

/* respondive 1100  --------------- */
@media (min-width: 1060px) {
/*#topContent #mainVidual .gradient-logo .sp_01{
    display: none;
}*/

#topContent #mainVidual .gradient-logo .pc_01{
    display: block;
/*    object-fit: cover;*/
    object-position: center;
/*    height: 100vh;
    width: 100%;*/
}
}


/* バナー ------- */
#topContent #mainVidual .banner-side{
    right: 8%;
    left: inherit;
}