/* banner */
#banner {padding: 120px 0 0;width: 100%;z-index: 3;background: #f9f5f0;}
#banner *{overflow:unset}
#banner .item {height: 80vh;}
#banner .item:before{content:'';width: calc(100% - 295px);position: absolute;height: 100%;background: linear-gradient(90deg, rgb(249 245 240), rgb(249 245 240 / 0%) 50%);z-index: 1;right: 0;}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip  {width: calc(100% - 295px);left: unset;right: 0;overflow: hidden;}
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video {overflow: hidden;position: absolute;width: 100%;height: auto;top: 50%;left: 50%;transform: translate(-50%, -50%) scaleX(-1);-webkit-transform: translate(-50%, -50%) scaleX(-1);}
#banner .item .info{z-index:2;margin: auto;position: relative;display: flex;align-items: center;}
#banner .item .info >div {margin: auto;width: calc(90% - 90px);pointer-events: none;}
#banner .item .info >div .txt >* {max-width: calc(100% - 30px);font-size: 25px;letter-spacing: 3px;color: #313131;margin-left: 5px;display: block;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 120%;font-size: 45px;font-weight: 500;letter-spacing: 6px;}
#banner .item .info >div .txt .en {line-height: 120%;font-size: 165px;font-weight: 600;letter-spacing: 0;font-family: "Cormorant Garamond", serif;word-spacing: 100vw;line-height: 1;margin: 20px 0 25px;}
#banner .item .info .is-hidden{opacity:0;}
#banner .item .info .subcopy { transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; }

@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }

@media screen and (max-width: 1400px){
	#banner .item .info >div .txt .en{font-size: 110px;}
}
@media screen and (max-width: 1280px){
	#banner .item .info >div .txt .h3{font-size: 35px;}
    #banner .item .info >div .txt >*{font-size: 22px;}
}
@media screen and (max-width: 1024px){
    #banner .item .clip video{height:100%;width: auto;}
}
@media screen and (max-width: 980px){
    #banner .item .info >div{width: calc(100% - 90px);}
	#banner .item .info >div .txt .en{font-size: 90px;}
	#banner .item .info >div .txt .h3{font-size: 30px;}
    #banner .item .info >div .txt >*{font-size: 18px;}
    #banner .item{height: 50vh;}
}
@media screen and (max-width: 640px){
    #banner .item .info{display:flex;align-items: flex-end;}
    #banner .item .clip{width:80%}
    #banner .item:before{display:none;}
    #banner .item .info >div{width: calc(100% - 40px);margin-bottom: -130px;}
	#banner .item .info >div .txt .en{font-size: 60px;}
	#banner .item .info >div .txt .h3{font-size: 24px;}
    #banner .item .info >div .txt >*{font-size: 15px;letter-spacing: 1px;}
    #banner .item{height: 50vh;}
    #banner{padding-top: 90px;}
    #banner .item .info .is-text{opacity:1}
}