#banner_area { background: url(/images/00/banner_bg.png) no-repeat right bottom / auto 90%; }

/* banner */
#banner { width: 100%; height: 700px; }
#banner >div { width: 100%; height: 100%; }
#banner .treel { width: 148px; bottom: 5%; left: 3%; }
#banner .treer { width: 146px; right: 10%; bottom: 5%; }
#banner .page { width: 288px; top: 25%; left: 37%; }
#banner .atxt { width: 70px; top: 21%; left: 28%; }
#banner .area { width: 50px; top: 38%; left: 11%; }
#banner .text { width: 100px; top: 35%; right: 5%; }
#banner #banner_txt { height: 100%; }
#banner #banner_txt >div { margin: auto auto 0; }
#banner #banner_txt h2 { padding: 0 0.08em; background: linear-gradient(to right, #fcba5e 0%,#ff9329 33%,#ff6654 78%,#e3402d 100%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; line-height: 100%; letter-spacing: -0.08em; color: var(--white); animation: textclip 2s linear infinite; -webkit-animation: textclip 2s linear infinite; }
#banner #banner_txt h2:after { position: absolute; width: calc(95% - 40px); height: 10px; background: linear-gradient(to right, #fcba5e 0%,#ff9329 33%,#ff6654 78%,#e3402d 100%); background-size: 200% auto; display: block; right: 0.08em; bottom: 10%; content: ""; animation: textclip 2s linear infinite; -webkit-animation: textclip 2s linear infinite; }
#banner #banner_txt .coin { width: 80px; right: 27.3%; bottom: 33%; }
#banner #banner_txt .coin img { animation: coin 2s linear infinite; -webkit-animation: coin 2s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
#banner #banner_txt .dot { width: 36px; bottom: 9%; left: 1.5%; }
#banner #banner_txt .money { width: 175px; bottom: 12%; left: 8%; }
#banner #banner_txt .man { width: 190px; bottom: 11%; left: 26%; }
#banner #banner_txt .man img { animation: man 2s linear infinite; -webkit-animation: man 2s linear infinite; }
#banner #banner_txt .arrow { top: -17%; right: 16%; }
#banner #banner_txt .arrow >div { width: 189px; animation: arrow 1.5s linear infinite; -webkit-animation: arrow 1.5s linear infinite; }
#banner #banner_txt .arrow >div img { max-width: inherit; }
#banner #banner_txt .arrow h3 { margin: 30px 0 0 50px; }
#banner #banner_txt .arrow h3 font { font-weight: 400; font-size: 37px; }
#banner #banner_txt .women1 { width: 368px; right: -1%; bottom: 12%; }
#banner #banner_txt .women1 img { animation: women1 1.5s linear infinite; -webkit-animation: women1 1.5s linear infinite; }
#banner #banner_txt .women2 { width: 160px; top: -187px; left: 44%; }
#banner #banner_txt .women2 img { animation: women2 1.5s linear infinite; -webkit-animation: women2 1.5s linear infinite; }
#banner .apple { width: 395px; top: 35%; left: 10%; }

/* banner_phone */
#banner_phone >div { margin: 30px auto; }
#banner_phone p { font-size: 21px; }
#banner_phone p a { padding: 0 15px; font-size: 40px; }
#banner_phone p a:before { position: absolute; width: 100%; height: 2px; background: var(--black); display: block; bottom: 4px; left: 0; content: ""; }
#banner_phone .phoneicon { width: 105px; height: 85px; top: calc((100% - 85px) / 2); right: -150px; animation: bphone 1.5s linear infinite; -webkit-animation: bphone 1.5s linear infinite; }
#banner_phone .phoneicon svg { width: 100%; height: 100%; }

/* animation */
@keyframes textclip { 0% , 100% { background-position: 50% center; } 50% { background-position: 100% center; } }
@-webkit-keyframes textclip { 0% , 100% { background-position: 50% center; } 50% { background-position: 100% center; } }
@keyframes coin { 0% , 21% , 100% { transform: rotateY(0deg); } 20% { transform: rotateY(360deg); } }
@-webkit-keyframes coin { 0% , 21% , 100% { -webkit-transform: rotateY(0deg); } 20% { -webkit-transform: rotateY(360deg); } }
@keyframes man { 0% , 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@-webkit-keyframes man { 0% , 100% { -webkit-transform: rotate(-1deg); } 50% { -webkit-transform: rotate(1deg); } }
@keyframes arrow { 0% , 21% , 100% { opacity: 1; } 20% { opacity: 0; } }
@-webkit-keyframes arrow { 0% , 21% , 100% { opacity: 1; } 20% { opacity: 0; } }
@keyframes women1 { 0% , 100% { transform: skewX(0deg); } 50% { transform: skewX(1deg); } }
@-webkit-keyframes women1 { 0% , 100% { -webkit-transform: skewX(0deg); } 50% { -webkit-transform: skewX(1deg); } }
@keyframes women2 { 0% , 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@-webkit-keyframes women2 { 0% , 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(3px); } }
@keyframes bphone { 0% , 20% , 40% , 100% { transform: rotate(5deg); } 10% , 30% { transform: rotate(-5deg); } }
@-webkit-keyframes bphone { 0% , 20% , 40% , 100% { -webkit-transform: rotate(5deg); } 10% , 30% { -webkit-transform: rotate(-5deg); } }

@media screen and (min-width: 1441px){
	#banner #banner_txt >div { width: 1360px; }
	#banner #banner_txt h2 { font-size: 350px; }
}
@media screen and (max-width: 1440px){
	#banner { height: 600px; }
	#banner #banner_txt >div { width: 1024px; }
	#banner #banner_txt h2 { font-size: 265px; }
	#banner #banner_txt .coin { width: 60px; right: 27%; bottom: 33.5%; }
	#banner #banner_txt .money { width: 152px; }
	#banner #banner_txt .man { width: 160px; }
	#banner #banner_txt .arrow { top: -34%; right: 12%; }
	#banner #banner_txt .women1 { width: 310px; right: -5%; bottom: 12%; }
	#banner #banner_txt .women2 { width: 130px; top: -58%; left: 40%; }
	#banner .apple { width: 295px; }
}
@media screen and (max-width: 1160px){
	#banner { height: 500px; background-position: right 50%; }
	#banner .treel { width: 110px; left: 10%; bottom: 0; }
	#banner .treer { width: 110px; right: 15%; bottom: 0; }
	#banner .atxt { width: 50px; top: 24%; left: 18%; }
	#banner #banner_txt >div { width: 575px; }
	#banner #banner_txt h2 { line-height: 175px; font-size: 220px; }
	#banner #banner_txt h2:after { bottom: 0; }
	#banner #banner_txt .coin { width: 70px; right: 45.5%; bottom: 12%; z-index: 3; }
	#banner #banner_txt .money { width: 132px; left: -12%; bottom: 0; }
	#banner #banner_txt .man { width: 130px; bottom: 0; left: 15%; }
	#banner #banner_txt .arrow { top: 11%; right: 15%; }
	#banner #banner_txt .arrow >div { width: 129px; }
	#banner #banner_txt .arrow h3 { margin: 90px 0 0 -50px; }
	#banner #banner_txt .arrow h3 font { font-size: 27px; }
	#banner #banner_txt .women1 { width: 257px; right: -10%; bottom: 0; }
	#banner_phone p a { font-size: 30px; }
	#banner_phone p { font-size: 18px; }
	#banner_phone .phoneicon { width: 64px; height: 64px; top: calc((100% - 64px) / 2); right: -84px; }
}
@media screen and (max-width: 640px){
	#banner { height: 85vw; }
	#banner .treel { width: 17vw; left: 0; }
	#banner .treer { width: 17vw; right: 0; }
	#banner .page { width: 30vw; top: 18vw; right: 5vw; left: auto; }
	#banner #banner_txt >div { width: 85vw; }
	#banner #banner_txt h2 { padding: 0; line-height: 28vw; letter-spacing: -3vw; font-size: 35vw; }
	#banner #banner_txt h2:after { width: 100%; right: 0; bottom: 0; }
	#banner #banner_txt .coin {     width: 0.35em;
    right: 1em;
    bottom: 0.11em;
    z-index: 3;
    font-size: 35vw;
    line-height: 28vw; }
	#banner #banner_txt .money { width: 132px; left: -12%; bottom: 0; }
	#banner #banner_txt .man { width: 18vw; left: 0; }
	#banner #banner_txt .arrow { top: 6vw; right: 2vw; }
	#banner #banner_txt .arrow >div { width: 19vw; }
	#banner #banner_txt .arrow h3 { margin: 12vw 0 0 -6vw; }
	#banner #banner_txt .arrow h3 font { font-size: 5vw; }
	#banner_phone { margin: 40px auto 30px; }
	#banner_phone .phoneicon { top: -40px; right: -40px; }
}
@media screen and (max-width: 350px){
	#banner_phone .phoneicon { top: -50px; right: -20px; }
}