@font-face {
font-family: 'icomoon';
src:  url(//axy-inc.tokyo/wp-content/plugins/wp-responsive-menu/inc/assets/icons/fonts/icomoon.eot?5ujmx2);
src:  url(//axy-inc.tokyo/wp-content/plugins/wp-responsive-menu/inc/assets/icons/fonts/icomoon.eot?5ujmx2#iefix) format('embedded-opentype'),
url(//axy-inc.tokyo/wp-content/plugins/wp-responsive-menu/inc/assets/icons/fonts/icomoon.ttf?5ujmx2) format('truetype'),
url(//axy-inc.tokyo/wp-content/plugins/wp-responsive-menu/inc/assets/icons/fonts/icomoon.woff?5ujmx2) format('woff'),
url(//axy-inc.tokyo/wp-content/plugins/wp-responsive-menu/inc/assets/icons/fonts/icomoon.svg?5ujmx2#icomoon) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="wpr-icon-"], [class*=" wpr-icon-"] { font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wpr-icon-store:before {
content: "\e900";
}
.wpr-icon-cart2:before {
content: "\e901";
}
.wpr-icon-basket:before {
content: "\e902";
}
.wpr-icon-cart:before {
content: "\e93a";
}
.wpr-icon-x:before {
content: "\e687";
}
.wpr-icon-rss:before {
content: "\e600";
}
.wpr-icon-rss-alt:before {
content: "\e68c";
}
.wpr-icon-mail:before {
content: "\e68d";
}
.wpr-icon-plus:before {
content: "\e601";
}
.wpr-icon-minus:before {
content: "\e602";
}
.wpr-icon-magnifying-glass:before {
content: "\e603";
}
.wpr-icon-instagram:before {
content: "\e688";
}
.wpr-icon-grid:before {
content: "\e604";
}
.wpr-icon-search:before {
content: "\e605";
}
.wpr-icon-twitter:before {
content: "\e606";
}
.wpr-icon-plus2:before {
content: "\e607";
}
.wpr-icon-minus2:before {
content: "\e608";
}
.wpr-icon-search2:before {
content: "\e609";
}
.wpr-icon-feed:before {
content: "\e60a";
}
.wpr-icon-cancel:before {
content: "\e60b";
}
.wpr-icon-home:before {
content: "\e60c";
}
.wpr-icon-home2:before {
content: "\e60d";
}
.wpr-icon-search3:before {
content: "\e689";
}
.wpr-icon-menu:before {
content: "\e60e";
}
.wpr-icon-point-right:before {
content: "\e60f";
}
.wpr-icon-point-down:before {
content: "\e610";
}
.wpr-icon-close:before {
content: "\e611";
}
.wpr-icon-minus3:before {
content: "\e612";
}
.wpr-icon-plus3:before {
content: "\e613";
}
.wpr-icon-arrow-right:before {
content: "\e614";
}
.wpr-icon-arrow-down:before {
content: "\e615";
}
.wpr-icon-arrow-right2:before {
content: "\e616";
}
.wpr-icon-arrow-down2:before {
content: "\e617";
}
.wpr-icon-arrow-right3:before {
content: "\e618";
}
.wpr-icon-arrow-down3:before {
content: "\e619";
}
.wpr-icon-paragraph-justify:before {
content: "\e61a";
}
.wpr-icon-paragraph-justify2:before {
content: "\e61b";
}
.wpr-icon-mail2:before {
content: "\e61c";
}
.wpr-icon-google:before {
content: "\e61d";
}
.wpr-icon-googleplus:before {
content: "\e61e";
}
.wpr-icon-googleplus2:before {
content: "\e61f";
}
.wpr-icon-googleplus3:before {
content: "\e620";
}
.wpr-icon-googleplus4:before {
content: "\e621";
}
.wpr-icon-facebook:before {
content: "\e622";
}
.wpr-icon-facebook2:before {
content: "\e623";
}
.wpr-icon-facebook3:before {
content: "\e624";
}
.wpr-icon-instagram2:before {
content: "\e68a";
}
.wpr-icon-twitter2:before {
content: "\e625";
}
.wpr-icon-twitter3:before {
content: "\e626";
}
.wpr-icon-twitter4:before {
content: "\e627";
}
.wpr-icon-feed2:before {
content: "\e628";
}
.wpr-icon-feed3:before {
content: "\e629";
}
.wpr-icon-feed4:before {
content: "\e62a";
}
.wpr-icon-vimeo:before {
content: "\e62b";
}
.wpr-icon-vimeo2:before {
content: "\e62c";
}
.wpr-icon-vimeo3:before {
content: "\e62d";
}
.wpr-icon-flickr:before {
content: "\e62e";
}
.wpr-icon-flickr2:before {
content: "\e62f";
}
.wpr-icon-flickr3:before {
content: "\e630";
}
.wpr-icon-flickr4:before {
content: "\e631";
}
.wpr-icon-deviantart:before {
content: "\e632";
}
.wpr-icon-deviantart2:before {
content: "\e633";
}
.wpr-icon-github:before {
content: "\e634";
}
.wpr-icon-github2:before {
content: "\e635";
}
.wpr-icon-github3:before {
content: "\e636";
}
.wpr-icon-github4:before {
content: "\e637";
}
.wpr-icon-github5:before {
content: "\e638";
}
.wpr-icon-tumblr:before {
content: "\e639";
}
.wpr-icon-tumblr2:before {
content: "\e63a";
}
.wpr-icon-skype:before {
content: "\e63b";
}
.wpr-icon-linkedin:before {
content: "\e63c";
}
.wpr-icon-pinterest:before {
content: "\e63d";
}
.wpr-icon-pinterest2:before {
content: "\e63e";
}
.wpr-icon-search32:before {
content: "\e63f";
}
.wpr-icon-basket2:before {
content: "\e903";
}
.wpr-icon-basket3:before {
content: "\e027";
}
.wpr-icon-magnifying-glass2:before {
content: "\e037";
}
.wpr-icon-facebook5:before {
content: "\e05d";
}
.wpr-icon-twitter5:before {
content: "\e05e";
}
.wpr-icon-googleplus5:before {
content: "\e05f";
}
.wpr-icon-rss2:before {
content: "\e060";
}
.wpr-icon-tumblr3:before {
content: "\e061";
}
.wpr-icon-linkedin2:before {
content: "\e062";
}
.wpr-icon-dribbble:before {
content: "\e063";
}
.wpr-icon-plus5:before {
content: "\e656";
}
.wpr-icon-plus6:before {
content: "\e657";
}
.wpr-icon-minus5:before {
content: "\e658";
}
.wpr-icon-minus6:before {
content: "\e659";
}
.wpr-icon-cancel2:before {
content: "\e65a";
}
.wpr-icon-magnifier:before {
content: "\e65b";
}
.wpr-icon-grid3:before {
content: "\e65c";
}
.wpr-icon-grid4:before {
content: "\e65d";
}
.wpr-icon-list:before {
content: "\e65e";
}
.wpr-icon-add:before {
content: "\e65f";
}
.wpr-icon-minus7:before {
content: "\e660";
}
.wpr-icon-search7:before {
content: "\e661";
}
.wpr-icon-shopping-bag2:before {
content: "\e904";
}
.wpr-icon-shopping-cart2:before {
content: "\e905";
}
.wpr-icon-add_shopping_cart:before {
content: "\e854";
}
.wpr-icon-shopping_cart:before {
content: "\e8cc";
}
.wpr-icon-remove_shopping_cart:before {
content: "\e928";
}
.wpr-icon-shopping_basket:before {
content: "\e8cb";
}
.wpr-icon-align-justify:before {
content: "\e026";
}
.wpr-icon-search5:before {
content: "\e036";
}
.wpr-icon-circle-plus:before {
content: "\e040";
}
.wpr-icon-circle-minus:before {
content: "\e041";
}
.wpr-icon-square-plus:before {
content: "\e044";
}
.wpr-icon-square-minus:before {
content: "\e045";
}
.wpr-icon-arrow-right4:before {
content: "\e095";
}
.wpr-icon-arrow-down4:before {
content: "\e097";
}
.wpr-icon-grid2:before {
content: "\e102";
}
.wpr-icon-cross:before {
content: "\e117";
}
.wpr-icon-menu2:before {
content: "\e120";
}
.wpr-icon-ellipsis:before {
content: "\e129";
}
.wpr-icon-times:before {
content: "\e647";
}
.wpr-icon-plus4:before {
content: "\e648";
}
.wpr-icon-minus4:before {
content: "\e649";
}
.wpr-icon-arrow-right-thick:before {
content: "\e64a";
}
.wpr-icon-th-menu:before {
content: "\e64b";
}
.wpr-icon-arrow-down-thick:before {
content: "\e64c";
}
.wpr-icon-times-outline:before {
content: "\e64d";
}
.wpr-icon-plus-outline:before {
content: "\e64e";
}
.wpr-icon-minus-outline:before {
content: "\e64f";
}
.wpr-icon-th-small-outline:before {
content: "\e650";
}
.wpr-icon-th-menu-outline:before {
content: "\e651";
}
.wpr-icon-zoom-outline:before {
content: "\e652";
}
.wpr-icon-arrow-down5:before {
content: "\e653";
}
.wpr-icon-arrow-right5:before {
content: "\e654";
}
.wpr-icon-search6:before {
content: "\e655";
}
.wpr-icon-shopping-cart:before {
content: "\f07a";
}
.wpr-icon-cart-plus:before {
content: "\f217";
}
.wpr-icon-cart-arrow-down:before {
content: "\f218";
}
.wpr-icon-shopping-bag:before {
content: "\f290";
}
.wpr-icon-shopping-basket:before {
content: "\f291";
}
.wpr-icon-search9:before {
content: "\f002";
}
.wpr-icon-envelope-o:before {
content: "\f003";
}
.wpr-icon-th-large:before {
content: "\f009";
}
.wpr-icon-th:before {
content: "\f00a";
}
.wpr-icon-th-list:before {
content: "\f00b";
}
.wpr-icon-times2:before {
content: "\f00d";
}
.wpr-icon-home3:before {
content: "\f015";
}
.wpr-icon-align-justify2:before {
content: "\f039";
}
.wpr-icon-chevron-right:before {
content: "\f054";
}
.wpr-icon-plus-circle:before {
content: "\f055";
}
.wpr-icon-minus-circle:before {
content: "\f056";
}
.wpr-icon-arrow-right6:before {
content: "\f061";
}
.wpr-icon-arrow-down6:before {
content: "\f063";
}
.wpr-icon-plus7:before {
content: "\f067";
}
.wpr-icon-minus8:before {
content: "\f068";
}
.wpr-icon-chevron-down:before {
content: "\f078";
}
.wpr-icon-twitter-square:before {
content: "\f081";
}
.wpr-icon-facebook-square:before {
content: "\f082";
}
.wpr-icon-linkedin-square:before {
content: "\f08c";
}
.wpr-icon-github-square:before {
content: "\f092";
}
.wpr-icon-twitter6:before {
content: "\f099";
}
.wpr-icon-facebook6:before {
content: "\f09a";
}
.wpr-icon-github6:before {
content: "\f09b";
}
.wpr-icon-hand-o-right:before {
content: "\f0a4";
}
.wpr-icon-hand-o-down:before {
content: "\f0a7";
}
.wpr-icon-arrow-circle-right:before {
content: "\f0a9";
}
.wpr-icon-arrow-circle-down:before {
content: "\f0ab";
}
.wpr-icon-tasks:before {
content: "\f0ae";
}
.wpr-icon-bars:before {
content: "\f0c9";
}
.wpr-icon-pinterest3:before {
content: "\f0d2";
}
.wpr-icon-pinterest-square:before {
content: "\f0d3";
}
.wpr-icon-google-plus-square:before {
content: "\f0d4";
}
.wpr-icon-google-plus:before {
content: "\f0d5";
}
.wpr-icon-envelope:before {
content: "\f0e0";
}
.wpr-icon-linkedin3:before {
content: "\f0e1";
}
.wpr-icon-angle-double-right:before {
content: "\f101";
}
.wpr-icon-angle-double-down:before {
content: "\f103";
}
.wpr-icon-angle-right:before {
content: "\f105";
}
.wpr-icon-angle-down:before {
content: "\f107";
}
.wpr-icon-github-alt:before {
content: "\f113";
}
.wpr-icon-ellipsis-h:before {
content: "\f141";
}
.wpr-icon-rss-square:before {
content: "\f143";
}
.wpr-icon-toggle-down:before {
content: "\f150";
}
.wpr-icon-toggle-right:before {
content: "\f152";
}
.wpr-icon-youtube-square:before {
content: "\f166";
}
.wpr-icon-youtube:before {
content: "\f167";
}
.wpr-icon-instagram3:before {
content: "\f16d";
}
.wpr-icon-apple:before {
content: "\f179";
}
.wpr-icon-android:before {
content: "\f17b";
}
.wpr-icon-skype2:before {
content: "\f17e";
}
.wpr-icon-vimeo-square:before {
content: "\f194";
}
.wpr-icon-cart3:before {
content: "\e906";
}
.wpr-icon-bag:before {
content: "\e907";
}
.wpr-icon-facebook4:before {
content: "\e640";
}
.wpr-icon-twitter-old:before {
content: "\e641";
}
.wpr-icon-feed5:before {
content: "\e642";
}
.wpr-icon-bird:before {
content: "\e643";
}
.wpr-icon-search4:before {
content: "\e644";
}
.wpr-icon-pointer:before {
content: "\e645";
}
.wpr-icon-pointer2:before {
content: "\e646";
}
.wpr-icon-shopping-bag3:before {
content: "\e908";
}
.wpr-icon-shopping-basket2:before {
content: "\e909";
}
.wpr-icon-shopping-cart3:before {
content: "\e90a";
}
.wpr-icon-search10:before {
content: "\e68b";
}
.wpr-icon-cross2:before {
content: "\e663";
}
.wpr-icon-minus9:before {
content: "\e664";
}
.wpr-icon-plus8:before {
content: "\e665";
}
.wpr-icon-layout:before {
content: "\e666";
}
.wpr-icon-list2:before {
content: "\e667";
}
.wpr-icon-video:before {
content: "\e668";
}
.wpr-icon-arrow-down7:before {
content: "\e669";
}
.wpr-icon-arrow-right7:before {
content: "\e66a";
}
.wpr-icon-arrow-down8:before {
content: "\e66b";
}
.wpr-icon-arrow-right8:before {
content: "\e66c";
}
.wpr-icon-arrow-down9:before {
content: "\e66d";
}
.wpr-icon-arrow-right9:before {
content: "\e66e";
}
.wpr-icon-arrow-down10:before {
content: "\e66f";
}
.wpr-icon-arrow-right10:before {
content: "\e670";
}
.wpr-icon-arrow-down11:before {
content: "\e671";
}
.wpr-icon-uniE672:before {
content: "\e672";
}
.wpr-icon-arrow-right11:before {
content: "\e673";
}
.wpr-icon-github62:before {
content: "\e674";
}
.wpr-icon-flickr5:before {
content: "\e675";
}
.wpr-icon-flickr6:before {
content: "\e676";
}
.wpr-icon-vimeo4:before {
content: "\e677";
}
.wpr-icon-vimeo5:before {
content: "\e678";
}
.wpr-icon-twitter7:before {
content: "\e679";
}
.wpr-icon-facebook7:before {
content: "\e67a";
}
.wpr-icon-facebook8:before {
content: "\e67b";
}
.wpr-icon-facebook9:before {
content: "\e67c";
}
.wpr-icon-googleplus6:before {
content: "\e67d";
}
.wpr-icon-googleplus7:before {
content: "\e67e";
}
.wpr-icon-pinterest4:before {
content: "\e67f";
}
.wpr-icon-pinterest5:before {
content: "\e680";
}
.wpr-icon-tumblr4:before {
content: "\e681";
}
.wpr-icon-linkedin4:before {
content: "\e682";
}
.wpr-icon-linkedin5:before {
content: "\e683";
}
.wpr-icon-instagram4:before {
content: "\e684";
}
.wpr-icon-skype3:before {
content: "\e685";
}
.wpr-icon-skype4:before {
content: "\e686";
}
.wpr-icon-cart4:before {
content: "\e90b";
}
.wpr-icon-search8:before {
content: "\e662";
}.fv-video-text {
position: absolute;
inset: 0;
width: 100vw;
height: fit-content;
translate: -50% -50%;
left: 50%;
top: 50%;
z-index: 0;
}
.fv-video-text__item--text {
font-size: 160px;
line-height: 1;
font-weight: 800;
width: max-content;
height: max-content;
margin: 0;
color: #3c4361;
opacity: .3;
}
@media screen and (max-width: 768px) {
.fv-video-text__item--text {
font-size: 80px;
}
}
@keyframes infinity-scroll-right {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
.fv-video-text__list--left {
animation: infinity-scroll-right 250s infinite;
}
.fv-video-text__wrap {
display: flex;
overflow: hidden;
}
.fv-video-text__list {
display: flex;
list-style: none;
padding: 0
}
.fv-video-title {
position: absolute;
top: 42%;
left: 30%;
translate: -50% -50%;
z-index: 2;
text-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
.fv-video-title h2 {
color: #fff;
font-size: 6vw;
font-weight: 700;
line-height: 1;
}
.fv-video-title h3 {
color: #fff;
font-size: 2vw;
line-height: 1;
}
.fv-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 12;
}
#fv-video .fv-video-inner {
position: relative;
display: block;
width: 100%;
height: 100%;
transform-style: preserve-3d;
perspective-origin: 50% 50%;
perspective: 100vw;
overflow: visible;
}
#fv-video .fv-video-inner>div:has(.fv-video-main) {
width: 100vw;
aspect-ratio: 16 / 9;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
} #fv-video .fv-video-inner>div:has(.fv-video-main.fv-video1) {
transform: rotateY(-16deg) rotateX(0deg) translateX(-15vw) translateZ(-60vw) translateY(-6vw);
scale: 1; opacity: 1; filter: brightness(100%);
animation: videoAnimation1 20s infinite;
}
#fv-video .fv-video-inner>div:has(.fv-video-main.fv-video2) {
transform: rotateY(-16deg) rotateX(0deg) translateX(-22vw) translateZ(-50vw) translateY(2vw);
scale: 0.9; opacity: 0; filter: brightness(100%);
animation: videoAnimation2 20s infinite;
}
#fv-video .fv-video-inner>div:has(.fv-video-main.fv-video3) {
transform: rotateY(-16deg) rotateX(0deg) translateX(4vw) translateZ(-108vw) translateY(-32vw);
scale: 1; opacity: 0; filter: brightness(80%);
animation: videoAnimation3 20s infinite;
}
#fv-video .fv-video video,
#fv-video .fv-video iframe {
display: block;
pointer-events: none; width: 100%;
height: 100%;
} @keyframes videoAnimation1 {
0%, 30% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-15vw) translateZ(-60vw) translateY(-6vw);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
33%, 63% {
transform: rotateY(-16deg) rotateX(0deg) translateX(4vw) translateZ(-108vw) translateY(-32vw);
scale: 1;
opacity: 0;
filter: brightness(80%);
}
66%, 96% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-10vw) translateZ(-70vw) translateY(-12vw);
scale: 1;
opacity: 1;
filter: brightness(50%);
}
100% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-15vw) translateZ(-60vw) translateY(-6vw);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
}
@keyframes videoAnimation2 {
0%, 30% {
transform: rotateY(-16deg) rotateX(0deg) translateX(4vw) translateZ(-108vw) translateY(-32vw);
scale: 1;
opacity: 0;
filter: brightness(80%);
}
33%, 63% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-10vw) translateZ(-70vw) translateY(-12vw);
scale: 1;
opacity: 1;
filter: brightness(50%);
}
66%, 96% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-15vw) translateZ(-60vw) translateY(-6vw);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
100% {
transform: rotateY(-16deg) rotateX(0deg) translateX(4vw) translateZ(-108vw) translateY(-32vw);
scale: 1;
opacity: 0;
filter: brightness(80%);
}
}
@keyframes videoAnimation3 {
0%, 30% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-10vw) translateZ(-70vw) translateY(-12vw);
scale: 1;
opacity: 1;
filter: brightness(50%);
}
33%, 63% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-15vw) translateZ(-60vw) translateY(-6vw);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
66%, 96% {
transform: rotateY(-16deg) rotateX(0deg) translateX(4vw) translateZ(-108vw) translateY(-32vw);
scale: 1;
opacity: 0;
filter: brightness(80%);
}
100% {
transform: rotateY(-16deg) rotateX(0deg) translateX(-10vw) translateZ(-70vw) translateY(-12vw);
scale: 1;
opacity: 1;
filter: brightness(50%);
}
} #fv-video .fv-video-inner>div:has(.fv-video-reflect) {
scale: 1 -1;
width: 100vw;
aspect-ratio: 16 / 9;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
#fv-video .fv-video-inner>div:has(.fv-video-reflect.fv-video1) {
transform: rotateY(-16deg) rotateX(0deg) translateX(-15vw) translateZ(-60vw) translateY(calc(-100% + 6vw - 20px));
scale: 1 -1; opacity: 1;
animation: videoReflectAnimation1 20s infinite;
}
#fv-video .fv-video-inner>div:has(.fv-video-reflect.fv-video2) {
transform: rotateY(-16deg) rotateX(0deg) translateX(-22vw) translateZ(-50vw) translateY(calc(-100% + 2vw - 20px));
scale: 0.9 -0.9; opacity: 0;
animation: videoReflectAnimation2 20s infinite;
}
#fv-video .fv-video-inner>div:has(.fv-video-reflect.fv-video3) {
transform: rotateY(-16deg) rotateX(0deg) translateX(4vw) translateZ(-108vw) translateY(calc(-100% + 32vw - 20px));
scale: 1 -1; opacity: 0;
animation: videoReflectAnimation3 20s infinite;
}
#fv-video .fv-video-inner>div:has(.fv-video-reflect)::before {
content: "";
display: block;
width: 110vw;
height: 100%;
background: linear-gradient(0deg, rgba(2, 8, 35, 0.2) -30%, rgba(2, 8, 35, 1) 50%);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
@keyframes videoReflectAnimation1 {
0%, 30% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-15vw)
translateZ(-60vw)
translateY(calc(-100% + 6vw - 20px));
scale: 1 -1;
opacity: 1;
}
33%, 63% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(4vw)
translateZ(-108vw)
translateY(calc(-100% + 32vw - 20px));
scale: 1 -1;
opacity: 0;
}
66%, 96% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-10vw)
translateZ(-70vw)
translateY(calc(-100% + 12vw - 20px));
scale: 1 -1;
opacity: 1;
}
100% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-15vw)
translateZ(-60vw)
translateY(calc(-100% + 6vw - 20px));
scale: 1 -1;
opacity: 1;
}
}
@keyframes videoReflectAnimation2 {
0%, 30% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(4vw)
translateZ(-108vw)
translateY(calc(-100% + 32vw - 20px));
scale: 1 -1;
opacity: 0;
}
33%, 63% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-10vw)
translateZ(-70vw)
translateY(calc(-100% + 12vw - 20px));
scale: 1 -1;
opacity: 1;
}
66%, 96% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-15vw)
translateZ(-60vw)
translateY(calc(-100% + 6vw - 20px));
scale: 1 -1;
opacity: 1;
}
100% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(4vw)
translateZ(-108vw)
translateY(calc(-100% + 32vw - 20px));
scale: 1 -1;
opacity: 0;
}
}
@keyframes videoReflectAnimation3 {
0%, 30% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-10vw)
translateZ(-70vw)
translateY(calc(-100% + 12vw - 20px));
scale: 1 -1;
opacity: 1;
}
33%, 63% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-15vw)
translateZ(-60vw)
translateY(calc(-100% + 6vw - 20px));
scale: 1 -1;
opacity: 1;
}
66%, 96% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(4vw)
translateZ(-108vw)
translateY(calc(-100% + 32vw - 20px));
scale: 1 -1;
opacity: 0;
}
100% {
transform: rotateY(-16deg) rotateX(0deg)
translateX(-10vw)
translateZ(-70vw)
translateY(calc(-100% + 12vw - 20px));
scale: 1 -1;
opacity: 1;
}
} @media screen and (max-width: 600px) { .fv-video-text {
display: none;
} .fv-video-title {
top: 70%;
left: 0;
translate: initial;
}
.fv-video-title h2 {
font-size: 10vw;
margin: 0;
}
.fv-video-title h3 {
font-size: 5vw;
margin-top: 8px;
} .fv-video {
width: 100%;
aspect-ratio: 3 / 4;
} #fv-video .fv-video-inner {
width: 100%;
height: 100%;
perspective: 120vw;
perspective-origin: 50% 45%;
padding-bottom: 40px;
overflow: visible;
} #fv-video .fv-video-inner > div:has(.fv-video-main) {
width: 100vw;
aspect-ratio: 3 / 4;
top: 50%;
left: 50%;
transform-origin: center center;
} #fv-video .fv-video-inner > div:has(.fv-video-main.fv-video1) {
animation-name: videoAnimation1SP;
} #fv-video .fv-video-inner > div:has(.fv-video-main.fv-video2) {
animation-name: videoAnimation2SP;
} #fv-video .fv-video-inner > div:has(.fv-video-main.fv-video3) {
animation-name: videoAnimation3SP;
} #fv-video .fv-video video {
width: 100%;
height: 100%;
object-fit: cover;
} #fv-video .fv-video-inner > div:has(.fv-video-reflect) {
width: 100vw;
height: 30vw;
aspect-ratio: 3 / 4;
top: 80%;
left: 50%;
transform-origin: center center;
}
#fv-video .fv-video-inner > div:has(.fv-video-reflect.fv-video1) {
animation-name: videoReflectAnimation1SP;
}
#fv-video .fv-video-inner > div:has(.fv-video-reflect.fv-video2) {
animation-name: videoReflectAnimation2SP;
}
#fv-video .fv-video-inner > div:has(.fv-video-reflect.fv-video3) {
animation-name: videoReflectAnimation3SP;
}
}
@media screen and (max-width: 600px) { @keyframes videoAnimation1SP {
0%, 30% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(0);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
33%, 63% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(-8vw);
scale: 1;
opacity: 1;
filter: brightness(80%);
}
66%, 96% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(-5vw);
scale: 1;
opacity: 0;
filter: brightness(50%);
}
100% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(0);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
}
@keyframes videoAnimation2SP {
0%, 30% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(-8vw);
scale: 1;
opacity: 1;
filter: brightness(80%);
}
33%, 63% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(-5vw);
scale: 1;
opacity: 0;
filter: brightness(50%);
}
66%, 96% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(0);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
100% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(-8vw);
scale: 1;
opacity: 1;
filter: brightness(80%);
}
}
@keyframes videoAnimation3SP {
0%, 30% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(-5vw);
scale: 1;
opacity: 0;
filter: brightness(50%);
}
33%, 63% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(0);
scale: 1;
opacity: 1;
filter: brightness(100%);
}
66%, 96% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(-8vw);
scale: 1;
opacity: 1;
filter: brightness(80%);
}
100% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(-5vw);
scale: 1;
opacity: 0;
filter: brightness(50%);
}
}
}
@media screen and (max-width: 600px) {
@keyframes videoReflectAnimation1SP {
0%, 30% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(calc(-50% - 10px));
scale: 1 -1;
opacity: 1;
}
33%, 63% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(calc(-8vw - 10px));
scale: 1 -1;
opacity: 1;
}
66%, 96% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(calc(-5vw - 10px));
scale: 1 -1;
opacity: 0;
}
100% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(calc(-50% - 10px));
scale: 1 -1;
opacity: 1;
}
}
@keyframes videoReflectAnimation2SP {
0%, 30% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(calc(-8vw - 10px));
scale: 1 -1;
opacity: 1;
}
33%, 63% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(calc(-5vw - 10px));
scale: 1 -1;
opacity: 0;
}
66%, 96% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(calc(-50% - 10px));
scale: 1 -1;
opacity: 1;
}
100% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(calc(-8vw - 10px));
scale: 1 -1;
opacity: 1;
}
}
@keyframes videoReflectAnimation3SP {
0%, 30% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(calc(-5vw - 10px));
scale: 1 -1;
opacity: 0;
}
33%, 63% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-3vw)
translateZ(-25vw)
translateY(calc(-50% - 10px));
scale: 1 -1;
opacity: 1;
}
66%, 96% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(8vw)
translateZ(-55vw)
translateY(calc(-8vw - 10px));
scale: 1 -1;
opacity: 1;
}
100% {
transform:
translate(-50%, -50%)
rotateY(-8deg)
translateX(-5vw)
translateZ(-35vw)
translateY(calc(-5vw - 10px));
scale: 1 -1;
opacity: 0;
}
}
}.acf-card-grid-title {
color: #fff;
}
.acf-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.acf-card-grid__item {
display: block;
text-decoration: none;
}
.acf-card-grid__image-wrap {
position: relative;
width: 100%;
}
.acf-card-grid__image {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.acf-card-grid__category {
position: absolute;
top: 20%;
right: -12px;
z-index: 3;
display: flex;
flex-direction: row-reverse;
}
.acf-card-grid__category--one-item {
right: 4px;
}
.acf-card-grid-category__ja {
font-size: 12px;
color: #999;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
line-height: 1.4;
}
.acf-card-grid-category__ja--only {
font-size: 20px;
color: #fff
}
.acf-card-grid-category__en {
font-size: 24px;
color: #fff;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: "STIX Two Text", serif;
}
.acf-card-grid__category--left {
right: initial;
left: 4px;
}
.acf-card-grid__image--gray {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: .3s;
clip-path:polygon( 0 0, 100% 0, 100% 100%, 0 100% );
filter: grayscale(1);
z-index: 2;
}
.acf-card-grid__hover-text {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
color: #fff;
font-size: 14px;
font-weight: 600;
opacity: 0;
transform: translateY(32px);
transition:
opacity .3s ease,
transform .3s ease;
z-index: 3;
}
.acf-card-grid__hover-text-sub {
align-self: flex-end;
padding-right: 4px;
line-height: 1;
}
.acf-card-grid__hover-text--talent {
display: flex;
flex-direction: column;
gap: 8px;
}
.acf-card-grid__link {
display: flex;
justify-content: flex-end;
margin-top: 2%;
padding-right: 2%;
}
@media screen and (max-width:768px) {
.acf-card-grid__link {
margin-top: 40px;
}
}
@media (hover:hover) {
.acf-card-grid__item:hover .acf-card-grid__image--gray {
clip-path: polygon( 100% 100%, 100% 100%, 100% 100%, 100% 100% );
}
.acf-card-grid__item:hover .acf-card-grid__hover-text {
opacity: 1;
transform: translateY(0);
background: rgb(0 0 0 / 0.5);
}
.acf-card-grid__item:hover .acf-card-grid__hover-text.acf-card-grid__hover-text--talent {
background: transparent;
}
}
@media screen and (max-width:600px) {
.acf-card-grid__item.is-visible .acf-card-grid__image--gray {
clip-path: polygon( 100% 100%, 100% 100%, 100% 100%, 100% 100% );
}
.acf-card-grid__item.is-visible .acf-card-grid__hover-text {
opacity: 1;
transform: translateY(0);
background: rgb(0 0 0 / 0.5);
}
.acf-card-grid__item.is-visible
.acf-card-grid__hover-text.acf-card-grid__hover-text--talent {
background: transparent;
}
}
@media screen and (max-width:1100px) {
.acf-card-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
@media screen and (max-width:768px) {
.acf-card-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.acf-card-grid-category__en {
font-size: 20px;
line-height: 1.2;
}
.acf-card-grid-category__ja {
font-size: 10px;
}
.acf-card-grid-category__ja--only {
font-size: 16px;
}
.acf-card-grid__hover-text {
opacity: 1;
bottom: 0;
transform: translateY(0);
background: rgb(0 0 0 / 0.5);
font-size: 12px;
}
.acf-card-grid__hover-text.acf-card-grid__hover-text--talent {
background: transparent;
}
}
@media screen and (max-width:480px) {
.acf-card-grid-category__en {
font-size: 18px;
}
.acf-card-grid-category__ja--only {
font-size: 12px;
}
}.page-content .themify_builder.themify_builder_content > .themify_builder_row.red-line-row {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
margin-left: initial;
margin-right: initial;
}
.red-line-container {
display: grid;
}
.red-line,
.red-line-container-wrapper {
grid-area: 1 / 1;
}
div.module_column.red-line-container {
width: 100vw;
}
.red-line-row {
position: relative;
margin: 7vw 0;
padding: 5vw 0;
}
.red-line-row::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #df0939;
transform: skewY(-5deg);
z-index: -1;
}
.red-line-row .row_inner {
display: flex;
align-items: center;
justify-content: center;
}
.red-line-row.red-line-row--after-video-slider {
margin-top: -15%;
}
@media screen and (max-width:600px) {
.red-line-row.red-line-row--after-video-slider {
margin-top: 25%;
}
}
.red-line-row.red-line-row--justify-left .row_inner {
justify-content: flex-start;
}
div.module_subrow.red-line-container-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.home div.module_subrow.red-line-container-wrapper {
gap: 10vw;
}
@media screen and (max-width:1024px) {
div.module_subrow.red-line-container-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
div.module_subrow.red-line-container-wrapper--reverse {
flex-direction: column-reverse;
}
.home div.module_subrow.red-line-container-wrapper {
gap: 0;
}
}
div.module_column.red-line-left-column,
div.module_column.red-line-right-column {
width: fit-content;
}
div.module_column.red-line-left-column--full-width {
width: 100%;
max-width: 640px;
}
@media screen and (max-width:1024px) {
div.module_column.red-line-left-column--full-width {
max-width: 400px;
}
}
div.module_column.red-line-right-column {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.red-line-rihgt-video {
align-self: center;
}
@media screen and (max-width:1024px) {
div.module_column.red-line-right-column {
align-items: center;
}
.red-line-container-wrapper--reverse div.module_column.red-line-right-column {
align-items: flex-start;
}
.red-line-cta-button .tb_text_wrap {
display: flex;
justify-content: center;
}
}
.red-line-right-column > *:not(:last-child) {
width: fit-content;
}