html{
height:100%;
}
body {
width:100%;
height:100%;
margin: 0;
padding:0;
overflow-x:hidden;
background-color: #13240f;
font-family: "kozuka-gothic-pro", sans-serif;
font-weight: 500;
font-style: normal;
}
.wf-loading * {
font-family: sans-serif !important;
}
body > footer {
position: sticky;
top: 100vh;
}
img {
image-rendering: -webkit-optimize-contrast;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
br.sponly {display:none;}
br.sponly2 {display:none;}
br.pconly {display:inline;}
.img {
width: 100%;
height: auto;
vertical-align: bottom;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes loop-slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes loop-slide-rev {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes loop-slide-tate {
from {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
background-color: transparent;
}
to {
transform: translate3d(0, -100% , 0);
-webkit-transform: translate3d(0, -100%, 0);
background-color: transparent;
}
}
@keyframes loop-slide-tate-rev {
from {
transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
background-color: transparent;
}
to {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
background-color: transparent;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name:fadeIn;
animation-duration:1.1s;
animation-fill-mode:forwards;
animation-timing-function: ease-out;
}
.fadeInFast {
animation-name:fadeIn;
animation-duration:0.2s;
animation-fill-mode:forwards;
animation-timing-function: ease-out;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOutFast {
animation: fadeOut 0.1s forwards;
}
@media (max-width: 1024px) {
body {
margin: 0;
padding:0;
width:100%;
height:100vh;
overflow-x:hidden;
}
br.sponly {display:inline;}
br.sponly2 {display:none;}
br.pconly {display:inline;}
}
@media (max-width: 610px) {
br.sponly2 {display:inline;}
br.pconly {display:none;}
}
/* ========================================
ローディング
========================================== */
/* 非表示 */
.is-hidee {
display: none;
}
/* ローディング画面をフェードアウト */
.fadeout-bg {
transition-property: opacity;
transition-delay: 0s;
transition-duration: 1s;
opacity: 0;
pointer-events: none;
}
/* ローダーをフェードアウト */
.fadeout-loader {
transition-property: opacity;
transition-delay: 0s;
transition-duration: 1.0s;
opacity: 0;
pointer-events: none;
}
/* ローディング画面 */
#loader-bg {
background: #082223;
width: 100%;
height: 100%;
position: fixed;
inset: 0;
z-index: 1000000;
perspective: 500;
}
#loader {
width: 20%;
height: auto;
position: absolute;
opacity: 0;
animation: fly 1.5s ease-out both , rotate 1.5s ease-out both;
}
@keyframes fly {
0% {top:-30%; left: 80%; opacity: 0;}
20% {opacity: 1;}
100% {top:40%;left: 40%;opacity: 1;}
}
@keyframes rotate {
from {
transform: rotateY(60deg) rotateX(170deg) rotateZ(30deg);
}
to {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
}
#loader #load1 {
width:100%;
height:auto;
}
#loader #load2 {
width:96%;
height:auto;
position: absolute;
top: 0.6%;
left: 2%;
z-index: 2;
animation: load2 0.8s ease-out 2.4s both ;
}
@keyframes load2 {
0% {transform: translateY(0);}
100% {transform: translateY(-35%);}
}
#loader #load3 {
width:100%;
height:auto;
position: absolute;
inset: 0;
z-index: 3;
}
#loader #load4 {
width:100%;
height:auto;
position: absolute;
top: 0;
left: 0;
z-index: 4;
animation: load4 0.8s ease-out 1.7s both;
}
@keyframes load4 {
0% {transform: rotateX(0deg);transform-origin: center top;opacity: 1;}
100% {transform: rotateX(-180deg);transform-origin: center top;opacity: 0;}
}
#loader #load5 {
width:100%;
height:auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transform: translateY(-100%) rotateX(180deg);
transform-origin: center bottom;
z-index: 4;
animation: load5 0.8s ease-out 1.7s both ;
}
@keyframes load5 {
0% {transform: translateY(-100%) rotateX(180deg); opacity: 0;}
100% {transform: translateY(-100%) rotateX(0deg); opacity: 1;}
}
/* 以下スマホ */
@media (max-width: 1024px) {
#loader-bg {
background: #050704;
}
#loader {
width:50%;
height:auto;
margin:0;
padding:0;
}
@keyframes fly {
0% {top:-30%; left: 80%; opacity: 0;}
20% {opacity: 1;}
100% {top:40%;left: 25%;opacity: 1;}
}
}
@media (max-width: 600px) {
#loader {
width:60%;
height:auto;
margin:0;
padding:0;
}
@keyframes fly {
0% {top:-30%; left: 80%; opacity: 0;}
20% {opacity: 1;}
100% {top:40%;left: 20%;opacity: 1;}
}
}
/* ========================================
ヘッダー
========================================== */
#pcheader {
display: block;
width:100%;
height:auto;
padding:10px 0 15px;
position:fixed;
top:0;
background: linear-gradient(to bottom, #082223 10%, transparent);
z-index:1001;
opacity: 0;
}
#pcheader ul#pcmenu {
width:100%;
height:auto;
padding:0;
margin:0;
list-style-type:none;
display:flex;
justify-content: center;
}
#pcheader ul#pcmenu li {
width:auto;
height:auto;
margin:0 1%;
padding:0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#pcheader ul#pcmenu li.menusns {
width:auto;
height:auto;
margin:0 0.5%;
padding:0;
text-align:center;
display:flex;
justify-content: center;
align-items: flex-start;
}
#pcheader ul#pcmenu li a {
transition-duration: 0.4s;
text-decoration:none !important;
}
#pcheader ul#pcmenu li a:hover {
cursor:pointer;
}
#pcheader ul#pcmenu li a span.eng {
display: block;
width: 100%;
font-size:1.6vw;
line-height:1.6vw;
letter-spacing: 2.0px;
text-align: center;
color: #fff;
font-family: "adobe-handwriting-ernie", sans-serif;
font-weight: 400;
font-style: normal;
}
#pcheader ul#pcmenu li.menusns a span.eng img {
width: 3vw;
}
#pcheader ul#pcmenu li a span.jpn {
display: block;
width: 100%;
height: auto;
margin: 0.2vw 0 0;
font-size:0.8vw;
line-height:0.8vw;
text-align: center;
color: #ebd152;
letter-spacing: 1px;
transform: translateY(-0.5vw);
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
#pcheader ul#pcmenu li a:hover {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
.navigation {
display: none;
position: absolute;
left: 5px;
top: 5px ;
width: 100%;
height: 100%;
}
.global-nav {
position: fixed;
right: 0;
top: -2000px;
width: 100%;
height: 100%;
min-height: 100%;
padding-top: 0px;
background: url(../img/ET-menu-bg-sp.jpg) no-repeat;
background-size: cover;
background-position: center center;
z-index: 200000;
display: flex;
align-items: center;
}
.global-nav .global-nav-inner {
width: 100%;
height: auto;
position: relative;
}
.hamburger {
position: fixed;
left: 5px;
top: 1px;
width: 65px;
height: 65px;
cursor: pointer;
z-index: 300000;
opacity:0;
}
.global-nav #menu-logo {
width:80%;
height:auto;
margin:0px 10% 10vw;
padding:0;
text-align:center;
position: relative;
}
.global-nav__list {
margin: 0;
padding: 0;
list-style: none;
}
.global-nav__item {
text-align: center;
padding: 0.1vw 0px;
}
.global-nav__item a {
display: block;
padding: 0;
text-decoration: none;
color: #b81c22;
transition: all .6s;
letter-spacing: 1px;
}
.global-nav__item a .en {
width: 100%;
font-size:2vw;
}
.global-nav__item a .jp {
width: 100%;
font-size:1vw;
}
.hamburger__line {
position: absolute;
left: 8px;
width: 50px;
height: 4px;
background-color: #32A42A !important;
transition: all .6s;
}
.hamburger #menu {
position: absolute;
top: 44px;
left: 9px;
font-weight:bold;
color:#32A42A;
font-size:1.0em;
font-style: normal;
font-weight: 400;
}
.global-nav ul.nav-sns {
width: 60%;
height: auto;
margin: 10vw 20% 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: flex-start;
}
.global-nav ul.nav-sns li {
width: 20%;
margin: 0 2%;
}
.hamburger__line--1 {
top: 12px;
}
.hamburger__line--2 {
top: 27px;
}
.hamburger__line--3 {
top: 42px;
}
.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
top: 0;
}
.nav-open .black-bg {
opacity: .8;
visibility: visible;
}
.nav-open .hamburger__line--1 {
transform: rotate(45deg);
top: 30px;
}
.nav-open .hamburger__line--2 {
width: 0;
left: 50%;
opacity: 0;
}
.nav-open .hamburger__line--3 {
transform: rotate(-45deg);
top: 30px;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#pcheader {
display: none;
}
.navigation {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background:none;
opacity: 1;
}
.hamburger {
width: 52px; /* クリックしやすいようにちゃんと幅を指定する */
height: 54px; /* クリックしやすいようにちゃんと高さを指定する */
display:block !important;
}
.hamburger__line {
position: absolute;
left: -2px;
width: 40px;
height: 4px;
transition: all .6s;
}
.hamburger #menu {
position: absolute;
top: 38px;
left: -3px;
font-weight:bold;
font-size:0.9em;
}
.hamburger__line--1 {
top: 8px;
}
.hamburger__line--2 {
top: 21px;
}
.hamburger__line--3 {
top: 34px;
}
.global-nav #menu-logo {
width:50%;
height:auto;
margin:0px 25% 2vw;
padding:0;
text-align:center;
position: relative;
}
.global-nav {
position: fixed;
top: -1600px; /* これで隠れる */
left: 0;
width: 100%; /* スマホに収まるくらい */
height: 100%;
min-height: 100%;
padding: 0 0 10px;
transition: all .6s;
z-index: 200;
overflow-y: scroll; /* メニューが多くなったらスクロールできるように */
}
.global-nav__list {
margin: 0;
}
.global-nav__item {
margin: 15px 0;
}
.global-nav__item a {
display: block;
padding: 1px 0;
text-decoration: none;
transition: all .6s;
}
.global-nav__item a .en {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 10%;
color: #000;
text-align: center;
font-size:3.5rem;
line-height: 3.5rem;
letter-spacing: 8px;
font-family: "adobe-handwriting-ernie", sans-serif;
font-weight: 400;
font-style: normal;
}
.global-nav__item a .jp {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 10%;
color: #000;
text-align: center;
font-size:3.0rem;
line-height: 3.5rem;
letter-spacing: 1px;
transform: translateY(-1vw);
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
.global-nav ul.nav-sns {
width: 15%;
height: auto;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: flex-start;
position: absolute;
bottom: 0%;
right: 4%;
}
.global-nav ul.nav-sns li {
width: 100%;
margin: 0;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
top: 0;
}
.nav-open .black-bg {
opacity: .8;
visibility: visible;
}
.nav-open .hamburger__line--1 {
transform: rotate(45deg);
top: 20px;
}
.nav-open .hamburger__line--2 {
width: 0;
left: 50%;
}
.nav-open .hamburger__line--3 {
transform: rotate(-45deg);
top: 20px;
}
ul#nav-button {
display:none !important;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
.global-nav #menu-logo {
width:80%;
height:auto;
margin:0px 10% 10vw;
padding:0;
text-align:center;
position: relative;
}
.global-nav {
position: fixed;
right: 0;
top: -2000px;
width: 100%;
height: 100%;
min-height: 100%;
padding-top: 0;
background-size: cover;
background-position: center bottom;
z-index: 200000;
display: flex;
align-items: center;
}
.global-nav__list {
margin: 5px 0;
}
.global-nav__item {
margin: 0 0 10px !important;
}
.global-nav__item a {
display: block;
padding: 1px 0;
text-decoration: none;
transition: all .6s;
}
.global-nav__item a .en {
width: 100%;
font-size:1.8rem;
line-height: 1.8rem;
letter-spacing: 5.0px;
}
.global-nav__item a .jp {
width: 100%;
font-size:1.8rem;
line-height: 2.5rem;
}
.global-nav__item a .en img {
width: auto;
height: 12vw;
}
#menu-item {
width: 40%;
height: auto;
position: absolute;
bottom: -2%;
right: 10%;
pointer-events: none;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 375px) {
.global-nav__item {
margin: 0 0 10px !important;
}
.global-nav__item a .en {
width: 100%;
font-size:1.6rem;
line-height: 1.6rem;
letter-spacing: 5.0px;
}
}
/* ========================================
leaf
========================================== */
#leaf {
width: 100%;
height: 100%;
min-height: 100%;
perspective: 800px;
overflow: hidden;
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
transition: 1.5s opacity;
}
#leaf #leaf-L1 {
width: 2%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 5s linear 1s infinite, leaf-rotate1 4s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L2 {
width: 2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 2s infinite, leaf-rotate2 5s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L3 {
width: 1.5%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 5s linear 0s infinite, leaf-rotate1 4.5s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L4 {
width: 2.5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 7s linear 3s infinite, leaf-rotate2 5.2s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L5 {
width: 3.2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 4s infinite, leaf-rotate1 4.2s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L6 {
width: 2.3%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5s linear 5s infinite, leaf-rotate2 3.5s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L7 {
width: 2.9%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 4s linear 1s infinite, leaf-rotate1 3.8s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L8 {
width: 1.5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 4s linear 3s infinite, leaf-rotate1 3.0s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-L9 {
width: 2.5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5s linear 6s infinite, leaf-rotate2 4.0s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-R1 {
width: 0.8%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 8s linear 0s infinite, leaf-rotate3 2.8s ease-in-out infinite alternate, tenmetsu 0.5s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-R2 {
width: 1.2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 2s infinite, leaf-rotate4 2.0s ease-in-out infinite alternate, tenmetsu 1.0s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-R3 {
width: 1%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 7s linear 4s infinite, leaf-rotate4 3.0s ease-in-out infinite alternate, tenmetsu 0.7s ease-in-out infinite alternate;
pointer-events: none;
}
#leaf #leaf-R4 {
width: 1%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5.8s linear 6s infinite, leaf-rotate3 3.0s ease-in-out infinite alternate, tenmetsu 0.6s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes fall-leaf {
0% {top: -10%;opacity: 1;}
100% {top: 110%;opacity: 1;}
}
@keyframes leaf-rotate1 {
from {
left: 0%;
transform: rotate(0deg);
}
to {
left: 25%;
transform: rotate(-80deg) rotateX(180deg);
}
}
@keyframes leaf-rotate2 {
from {
left: 5%;
transform: rotate(0deg);
}
to {
left: 30%;
transform: rotate(80deg) rotateX(-160deg);
}
}
@keyframes leaf-rotate3 {
from {
left: 80%;
}
to {
left: 70%;
}
}
@keyframes leaf-rotate4 {
from {
left: 90%;
}
to {
left: 75%;
}
}
@keyframes tenmetsu {
from {
opacity: 1;
}
to {
opacity: 0.1;
}
}
/* 以下スマホ */
@media (max-width: 1024px) {
@keyframes fall-leaf {
0% {top: -25%;opacity: 1;}
100% {top: 125%;opacity: 1;}
}
#leaf #leaf-L1 {
width: 9%;
}
#leaf #leaf-L2 {
width: 8%;
}
#leaf #leaf-L3 {
width: 6%;
}
#leaf #leaf-L4 {
width: 7%;
}
#leaf #leaf-L5 {
width: 9.5%;
}
#leaf #leaf-L6 {
width: 6.5%;
}
#leaf #leaf-L7 {
width: 8%;
}
#leaf #leaf-R1 {
width: 3%;
}
#leaf #leaf-R2 {
width: 6%;
}
#leaf #leaf-R3 {
width: 5%;
}
@keyframes leaf-rotate1 {
from {
left: 0%;
transform: rotate(0deg);
}
to {
left: 40%;
transform: rotate(-80deg) rotateX(180deg);
}
}
@keyframes leaf-rotate2 {
from {
left: 5%;
transform: rotate(0deg);
}
to {
left: 60%;
transform: rotate(80deg) rotateX(-160deg);
}
}
@keyframes leaf-rotate3 {
from {
left: 90%;
}
to {
left: 70%;
}
}
@keyframes leaf-rotate4 {
from {
left: 100%;
}
to {
left: 75%;
}
}
}
/* ========================================
トップ
========================================== */
#top {
width:100%;
height:auto;
position:relative;
overflow: hidden;
background-color: #082223;
}
#top #top__bg {
width: 100%;
height: auto;
opacity: 0;
}
#top #top__bg img {
width: 100%;
height: auto;
aspect-ratio: 1920 / 1080;
}
#top #top__tate {
width: 7.5%;
height: auto;
position: absolute;
top: 8.5%;
right: 16%;
}
#top #top__title {
width: 34%;
height: auto;
position: absolute;
top: 37.5%;
left: 4%;
opacity: 0;
}
#top #top__bbjp {
width: 34%;
height: auto;
position: absolute;
top: 56%;
right: 2.5%;
opacity: 0;
}
#top #top__date {
width: 12.0%;
height: auto;
position: absolute;
top: 71%;
right: 13%;
opacity: 0;
}
#top #top__bben {
width: 60%;
height: auto;
position: absolute;
top: 88%;
right: 20%;
opacity: 0;
}
#top #top__award {
width: 65%;
height: auto;
position: absolute;
top: 93%;
right: 20%;
opacity: 0;
}
.top-first-anime {
animation: fadeIn 1.7s ease-out 0.7s forwards;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#top #top__bg img {
width: 100%;
height: auto;
aspect-ratio: 1170 / 2300;
}
#top #top__tate {
width: 26%;
height: auto;
position: absolute;
top: 7%;
right: 12%;
}
#top #top__title {
width: 90%;
height: auto;
position: absolute;
top: 64%;
left: 5%;
opacity: 0;
}
#top #top__bbjp {
width: 62%;
height: auto;
position: absolute;
top: 76%;
right: 19%;
opacity: 0;
}
#top #top__date {
width: 40%;
height: auto;
position: absolute;
top: 92%;
right: 30%;
opacity: 0;
}
#top #top__bben {
width: 90%;
height: auto;
position: absolute;
top: 82%;
right: 5%;
opacity: 0;
}
#top #top__award {
width: 94%;
height: auto;
position: absolute;
top: 84%;
right: 3%;
opacity: 0;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
}
/* ========================================
ブリッジ
========================================== */
#bridge {
width: 100%;
height: auto;
padding: 2vw 0 3vw;
position: relative;
background-color: #082223;
}
#bridge .sns-x {
display: block;
width: 5%;
height: auto;
margin: 0 47.5% 2vw;
position: relative;
}
.sns-x .x-base {
width: 100%;
height: auto;
}
.sns-x .x-nakami ,
.sns-x .x-futa {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
.sns-x:hover .x-nakami {
transform: translateY(-25%);
transition: 0.5s;
}
#bridge #br__theater {
width: 100%;
height: auto;
margin: 0 0 2vw;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#bridge #br__theater a {
display: block;
width: 17%;
height: auto;
margin: 0 1vw;
}
#bridge #br__theater a img:hover {
animation: flash 1.5s;
}
#bridge #mubi {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#bridge #mubi #mvtk-widgets-container {
display: inline-block;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#bridge {
width: 100%;
height: auto;
padding: 0 0 5vw;
position: relative;
background-color: #050704;
}
#bridge .sns-x {
display: block;
width: 16%;
height: auto;
margin: 0 42% 5vw;
position: relative;
}
#bridge #br__theater {
width: 100%;
height: auto;
margin: 0 0 5vw;
}
#bridge #br__theater a {
display: block;
width: 70%;
height: auto;
margin: 1.5vw 1vw;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
}
/* ========================================
ニュース
========================================== */
#news {
width: 100%;
height: auto;
padding: 2vw 0 3vw;
position: relative;
background-color: #082223;
}
#news h2 {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#news h2 img {
width: 10%;
}
#news #news-box {
width: 60%;
height: 30vw;
box-sizing: border-box;
margin: 0 20%;
padding: 2vw 10vw;
border: 2px solid #fff;
overflow-y: scroll;
position: relative;
background-image: url(../img/ET-br-news-glass-pc.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
}
#news #news-box::-webkit-scrollbar {
background: transparent;
width: 5px;
height: 1px;
border-radius: 20px;
}
#news #news-box::-webkit-scrollbar-thumb {
background-color: #f7cf08;
border-radius: 20px;
}
#news #news-box .news-line {
width: 100%;
height: auto;
margin: 1vw 0;
display: flex;
justify-content: flex-start;
}
#news #news-box .news-line .date {
width: 20%;
height: auto;
color: #ebd152;
font-size: 1.2vw;
line-height: 2vw;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
#news #news-box .news-line .headline {
width: 80%;
height: auto;
color: #fff;
font-size: 1.2vw;
line-height: 2vw;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
#news #news-box .news-line .headline a {
color: #fff;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#news {
width: 100%;
height: auto;
padding: 10vw 0;
background-color: #050704;
position: relative;
}
#news h2 {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#news h2 img {
width: 30%;
}
#news #news-box {
width: 80%;
height: 70vw;
box-sizing: border-box;
margin: 0 10%;
padding: 5vw 5vw;
border: 2px solid #fff;
overflow-y: scroll;
position: relative;
background-color: #13240f;
background-image: url(../img/ET-br-news-glass-sp.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
}
#news #news-box::-webkit-scrollbar {
background: #fff;
width: 5px;
height: 1px;
border-radius: 20px;
}
#news #news-box::-webkit-scrollbar-thumb {
background-color: #000;
border-radius: 20px;
}
#news #news-box .news-line {
width: 100%;
height: auto;
margin: 5vw 0;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
#news #news-box .news-line .date {
width: 100%;
height: auto;
margin-bottom: 1vw;
color: #ebd152;
font-size: 1.1rem;
line-height: 2rem;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
#news #news-box .news-line .headline {
width: 100%;
height: auto;
box-sizing: border-box;
padding-left: 1rem;
color: #fff;
font-size: 1.1rem;
line-height: 2rem;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
}
@media (max-width: 600px) {
#news {
width: 100%;
height: auto;
padding: 10vw 0 0;
background-color: #050704;
position: relative;
}
#news h2 img {
width: 30%;
}
#news #news-box {
width: 94%;
height: 120vw;
box-sizing: border-box;
margin: 0 3%;
}
}
@media (max-width: 375px) {
#news #news-box {
width: 94%;
height: 120vw;
box-sizing: border-box;
margin: 0 3%;
}
}
/* ========================================
モーダル
========================================== */
.movie-modal {
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
display: none;
}
.movie-modal.is-active {
opacity: 1;
pointer-events: auto;
display: block;
}
.modal{
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 11000;
display: none;
opacity: 0;
}
.modal.is-active {
display: block;
}
.movie-bg {
background:#000;
background-size: cover;
background-position: center center;
height: 100%;
position: absolute;
width: 100%;
opacity: 1;
}
.modal__bg {
background-image: url(../img/ET-news-box-bg-pc.jpg);
background-size: cover;
background-position: center center;
height: 100%;
position: absolute;
width: 100%;
}
.modal__content {
width: 70%;
height: auto;
max-height: 90%;
box-sizing: border-box;
background-color: #fff;
border: 2px solid #13240f;
color: #000;
padding: 40px 8vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
overflow-y: scroll;
}
.modal__content::-webkit-scrollbar {
background: #000;
width: 3px;
height: 3px;
border-radius: 20px;
}
.modal__content::-webkit-scrollbar-thumb {
background-color: #ff9600;
border-radius: 20px;
}
.modal__content h3 {
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px;
border-bottom: 1px solid #13240f;
text-align: center;
font-size: 1.4rem;
line-height: 2.0rem;
color: #ff9600;
font-weight: bold;
}
.modal__content h4 {
width: 100%;
height: auto;
margin: 40px 0 7px;
text-align: left;
font-size: 1.3rem;
line-height: 1.9rem;
color: #f3981c;
font-weight: bold;
}
.modal__content h5 {
width: 100%;
height: auto;
margin: 40px 0 7px;
text-align: left;
font-size: 1.2rem;
color: #000;
font-weight: bold;
}
.modal__content .date {
width: 100%;
height: auto;
margin: 20px 0 10px;
text-align: right;
font-size: 1rem;
color: #ff9600;
font-weight: bold;
}
.modal__content p {
width: 100%;
height: auto;
margin: 0;
text-align: left;
font-size: 1.0rem;
line-height: 1.8rem;
color: #000;
word-break: break-all;
}
.modal__content p a {
color: #000;
}
.modal__content p .bold {
font-size: 1.2rem;
font-weight: bold;
}
.modal__content .list1 {
width: 100%;
height: auto;
margin: 5px 0;
padding: 0;
list-style-type: none;
}
.modal__content .list1 li {
width: 100%;
height: auto;
margin: 10px 0;
display: flex;
justify-content: flex-start;
}
.modal__content .list1 li .head {
width: 17%;
font-size: 1.1rem;
line-height: 2rem;
color: #000;
}
.modal__content .list1 li .txt {
width: 83%;
font-size: 1.1rem;
line-height: 1.8rem;
color: #000;
word-break: break-all;
}
.modal__content .news-image1 {
width: 100%;
height: auto;
margin: 1vw 0;
text-align: center;
}
.modal__content .news-image1 img {
width: 60%;
}
.modal__content .news-image2 {
width: 100%;
height: auto;
margin: 1vw 0;
text-align: center;
}
.modal__content .news-image2 img {
width: 80%;
}
.modal__content .video-wrap {
width: 80%;
height: auto;
margin: 2vw 10%;
}
.movie__content {
width: 65%;
height: auto;
padding: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.movie__content .video {
width:100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0 0 10px;
display:block;
}
.movie__content .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie__content ul#movie-changer {
width: 100%;
height: auto;
margin: 10px 0;
padding: 0%;
list-style-type: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.batsu {
width: 5%;
height: auto;
position: fixed;
top: 2%;
right: 2%;
}
.batsu img {
width: 100%;
height: auto;
}
.batsu img:hover {
transform: rotate(360deg);
transition: all 1.0s ease;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
.movie__content {
width: 100%;
height: auto;
padding: 1% 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.modal__content {
width: 98%;
height: 80%;
box-sizing: border-box;
color: #fff;
padding: 40px 5vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.modal__content h3 {
width: 100%;
height: auto;
margin: 0 0 20px;
text-align: center;
font-size: 1.4rem;
color: #f3981c;
}
.modal__content h4 {
width: 100%;
height: auto;
margin: 60px 0 15px;
text-align: left;
font-size: 1.4rem;
color: #f3981c;
}
.modal__content .list1 li .head {
width: 20%;
font-size: 1.1rem;
line-height: 2rem;
color: #000;
}
.modal__content .list1 li .txt {
width: 80%;
font-size: 1.1rem;
line-height: 1.8rem;
color: #000;
word-break: break-all;
}
.batsu {
width: 10%;
height: auto;
position: fixed;
top: 3%;
right: 3%;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
.modal__content h3 {
width: 100%;
height: auto;
margin: 0 0 20px;
text-align: center;
font-size: 1.3rem;
line-height: 2rem;
color: #f3981c;
}
.modal__content h4 {
width: 100%;
height: auto;
margin: 60px 0 15px;
text-align: left;
font-size: 1.2rem;
line-height: 1.8rem;
color: #f3981c;
}
.modal__content .list1 li .head {
width: 30%;
font-size: 1.1rem;
line-height: 2rem;
color: #000;
}
.modal__content .list1 li .txt {
width: 70%;
font-size: 1.1rem;
line-height: 1.8rem;
color: #000;
word-break: break-all;
}
.modal__content .news-image1 {
width: 100%;
height: auto;
margin: 5vw 0;
text-align: center;
}
.modal__content .news-image1 img {
width: 80%;
}
.modal__content .news-image2 {
width: 100%;
height: auto;
margin: 5vw 0;
text-align: center;
}
.modal__content .news-image2 img {
width: 100%;
}
.modal__content .video-wrap {
width: 100%;
height: auto;
margin: 5vw 0;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 375px) {
.modal__content h3 {
width: 100%;
height: auto;
margin: 0 0 20px;
text-align: center;
font-size: 1.15rem;
line-height: 2rem;
color: #f3981c;
}
.modal__content h4 {
width: 100%;
height: auto;
margin: 60px 0 15px;
text-align: left;
font-size: 1.1rem;
line-height: 1.8rem;
color: #f3981c;
}
}
/* ========================================
トレーラー
========================================== */
.trailer {
width:100%;
height:auto;
margin:0;
padding:8vw 0 12vw;
overflow: hidden;
position: relative;
background-color: #082223;
}
.trailer h2 {
width:100%;
height:auto;
padding:0;
margin:0 0 1vw;
text-align: center;
position: relative;
pointer-events: none;
}
.trailer h2 img {
width: 13%;
}
#video-wrap {
width: 60%;
height: auto;
box-sizing: border-box;
margin: 0 20%;
padding: 0;
position: relative;
}
#video-wrap .movie-title {
display: none;
}
.video {
width:100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0;
display:block;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.trailer ul#movie-changer {
width: 60%;
height: auto;
margin: 10px 20%;
padding: 0%;
list-style-type: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.movie-btn {
width: 40%;
height: 3vw;
margin: 0.4vw 0.4vw;
padding: 3px 0;
text-align: center;
background-color: transparent;
border: 1px solid #ebd152;
color: #ebd152;
font-size: 1.1vw;
line-height: 1.6vw;
display: flex;
justify-content: center;
align-items: center;
}
.movie-btn i {
opacity: 0;
}
.activee {
background: #ebd152;
border: 1px solid #ebd152;
color: #082223;
}
.activee i {
opacity: 1;
}
.movie-btn:hover {
background: #ebd152;
border: 1px solid #ebd152;
color: #082223;
cursor: pointer;
transition-duration: 0.6s;
}
.video2 {
display: none;
}
/* 以下スマホ */
@media (max-width: 1024px) {
.trailer {
width:100%;
padding:10vw 0 20vw;
background-color: #050704;
}
.trailer h2 {
width:100%;
height:auto;
padding:0;
margin:0 0 3vw;
position: relative;
text-align: center;
}
.trailer h2 img {
width: 40%;
}
#video-wrap {
width: 90%;
height: auto;
margin: 0 5%;
padding: 0;
}
.video {
width:100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0;
display:block;
}
.video2 {
display: none;
}
.trailer ul#movie-changer {
width: 100%;
height: auto;
margin: 10px 0;
padding: 0%;
list-style-type: none;
display: flex;
justify-content: center;
}
.movie-btn {
width: 40%;
height: 6vw;
margin: 0.5vw;
font-size: 1rem;
line-height: 1.5rem;
}
}
@media (max-width: 600px) {
.trailer {
width:100%;
height:auto;
margin:0;
padding:30vw 0 20vw;
}
.trailer h2 {
width:100%;
height:auto;
padding:0;
margin:0;
position: relative;
}
.trailer h2 img {
width: 40%;
}
#video-wrap {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.video {
margin: 3vw 0 0;
}
.video2 {
display: block;
}
#video-wrap .movie-title {
display: block;
width: 100%;
height: auto;
margin: 2vw 0 10vw;
text-align: center;
}
#video-wrap .movie-title img {
width: auto;
height: 6vw;
}
.video {
width:100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0;
display:block;
}
.trailer ul#movie-changer {
width: 100%;
height: auto;
margin: 10px 0;
padding: 0%;
list-style-type: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.movie-btn {
width: 90%;
height: auto;
margin: 1vw 0;
padding: 1vw 0;
font-size: 1rem;
line-height: 1.5rem;
}
}
/* ========================================
イントロダクション
========================================== */
.intro-bgs {
width: 100%;
height: 100%;
min-height: 100%;
background-size: cover;
background-position: center center;
position: fixed;
inset: 0;
pointer-events: none;
opacity: 1;
}
#intro-bg1 {
transition: 1.0s all;
z-index: -28;
}
#intro-bg2 {
transition: 2.0s opacity , 2.0s filter 0.5s;
opacity: 0;
z-index: -27;
}
#intro {
width: 100%;
height: auto;
padding: 30vw 0;
position: relative;
overflow: hidden;
}
#intro h2 {
width: 100%;
height: auto;
margin: 0 0 20vw;
text-align: center;
}
#intro h2 img {
width: 23%;
}
#intro #intro__lead1 {
width: 100%;
height: auto;
margin: 0 0 3vw;
text-align: center;
}
#intro #intro__lead1 img {
width: 60%;
height: auto;
aspect-ratio: 1712 / 305;
}
#intro #intro__lead2 {
width: 100%;
height: auto;
margin: 0 0 5vw;
padding: 3vw 0 0;
position: relative;
}
#intro #intro__lead2 #intro__lead2-box {
width: 58%;
height: auto;
margin: 0 21%;
padding: 3vw 0;
text-align: center;
position: relative;
clip-path: inset(0 50% 0 50%);
background-color: rgba(244, 244, 244, 0.8);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
#000 25%,
#000 75%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
#000 25%,
#000 75%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
#intro #intro__lead2 #intro__lead2-box .intro-img {
width: 76%;
height: auto;
aspect-ratio: 1521 / 388;
opacity: 0;
}
#intro #intro__lead2 #intro__lead2-box #intro__lead2-img {
width: 76%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
#intro #intro__lead2 #intro__lead2-box #intro__lead2-img img {
aspect-ratio: 1521 / 388;
}
#intro #intro__lead2 #intro__lead2-ito {
width: 77%;
height: auto;
position: absolute;
top: 0;
left: 0;
clip-path: inset(0 100% 0 0);
}
#intro #intro__lead2 #intro__lead2-ito img {
width: 100%;
height: auto;
aspect-ratio: 1559 / 243;
}
.intro__lead2-box {
animation: intro__lead2-box 1.0s ease-in forwards;
}
.intro__lead2-ito {
animation: intro__lead2-ito 1.5s ease-in forwards;
}
@keyframes intro__lead2-box {
0% {clip-path: inset(0 50% 0 50%);}
100% {clip-path: inset(0 0 0 0);}
}
@keyframes intro__lead2-ito {
0% {clip-path: inset(0 100% 0 0);}
100% {clip-path: inset(0 0 0 0);}
}
#intro p {
width: 50%;
height: auto;
margin: 0 25% 30vw;
color: #fff;
font-size: 1.1vw;
line-height: 2.2vw;
letter-spacing: 2px;
font-feature-settings: "palt";
}
#intro #intro__end {
width: 35%;
height: auto;
margin-left: 5%;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#intro {
width: 100%;
height: auto;
padding: 50vh 0;
position: relative;
}
#intro h2 {
width: 100%;
height: auto;
margin: 0 0 50vh;
text-align: center;
}
#intro h2 img {
width: 64%;
}
#intro #intro__lead1 {
width: 100%;
height: auto;
margin: 0 0 15vw;
text-align: center;
}
#intro #intro__lead1 img {
width: 100%;
height: auto;
aspect-ratio: 1748 / 788;
}
#intro #intro__lead2 {
width: 100%;
height: auto;
margin: 0 0 20vw;
padding: 15vw 0 0;
position: relative;
}
#intro #intro__lead2 #intro__lead2-box {
width: 100%;
height: auto;
margin: 0;
padding: 10vw 0 20vw;
}
#intro #intro__lead2 #intro__lead2-box .intro-img {
width: 90%;
height: auto;
aspect-ratio: 1171 / 865;
opacity: 0;
}
#intro #intro__lead2 #intro__lead2-box #intro__lead2-img {
width: 90%;
height: auto;
position: absolute;
}
#intro #intro__lead2 #intro__lead2-box #intro__lead2-img img {
aspect-ratio: 1171 / 865;
}
#intro #intro__lead2 #intro__lead2-ito {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
clip-path: inset(0 100% 0 0);
}
#intro #intro__lead2 #intro__lead2-ito img {
width: 100%;
height: auto;
aspect-ratio: 1170 / 186;
}
#intro p {
width: 90%;
height: auto;
margin: 0 5% 50vh;
color: #fff;
font-size: 1.0rem;
line-height: 2.5rem;
letter-spacing: 2.5px;
font-feature-settings: "palt";
}
#intro #intro__end {
width: 100%;
height: auto;
margin-left: 0%;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
#intro #intro__lead2 #intro__lead2-box {
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
#000 10%,
#000 90%,
transparent 100%
);
}
}
/* 以下タブレット・スマホ */
@media (max-width: 375px) {
}
/* ========================================
ストーリー
========================================== */
#story {
width: 100%;
height: auto;
background-color: #b4d68c;
position: relative;
overflow: hidden;
}
#story .slide-wrap {
width: 100%;
height: auto;
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
}
#slider1 .top-slide ,
#slider2 .top-slide {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
perspective: 1000;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
position: relative;
}
#slider1 .top-slide {
animation: loop-slide-rev 200s infinite linear 0s both;
}
#slider2 .top-slide {
animation: loop-slide 200s infinite linear 0s both;
}
#slider1 .top-slide .content ,
#slider2 .top-slide .content {
width: 25vw;
height: auto;
margin: 0;
}
#slider1 .top-slide .content img ,
#slider2 .top-slide .content img {
width: 100%;
height: auto;
vertical-align: bottom;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
#story #story__contents {
width: 100%;
height: auto;
padding: 5vw 0;
}
#story #story__contents h2 {
width: 100%;
height: auto;
text-align: center;
margin: 0 0 2vw;
}
#story #story__contents h2 img {
width: 11%;
}
#story #story__contents p {
width: 50%;
height: auto;
margin: 0 25%;
color: #000;
font-size: 1.1vw;
line-height: 2.2vw;
letter-spacing: 2px;
font-feature-settings: "palt";
}
#story #story__cat {
width: 100%;
height: auto;
padding: 5vw 0 0;
position: relative;
}
#story #story__cat img {
width: 15%;
height: auto;
position: relative;
animation: catwalk 15s ease-in-out infinite, updown 1.0s step-start infinite;
}
@keyframes catwalk {
0% {left: -17%;bottom: 0;}
100% {left: 117%;bottom: 0;}
}
@keyframes updown {
0% {transform: rotate(-1deg);}
50% {transform: rotate(1deg);}
0% {transform: rotate(-1deg);}
}
#story #story__memo {
width: 12%;
height: auto;
position: absolute;
top: 15%;
left: 15%;
animation: story__memo1 8.0s ease-in-out infinite , story__memo2 2.0s step-start infinite;
}
@keyframes story__memo1 {
0% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes story__memo2 {
0% {transform: rotate(-3deg);}
50% {transform: rotate(3deg);}
0% {transform: rotate(-3deg);}
}
#story #story__letter1 {
width: 14%;
height: auto;
position: absolute;
top: 50%;
left: -2%;
animation: story__letter1 10.0s ease-in-out infinite , story__memo2 2.2s step-start infinite;
}
@keyframes story__letter1 {
0% {opacity: 0;}
10% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
#story #story__letter2 {
width: 22%;
height: auto;
position: absolute;
top: 17%;
right: 1%;
}
#story #story__letter2 #story__letter2-1 {
width: 100%;
height: auto;
}
#story #story__letter2 #story__letter2-2 {
width: 100%;
height: auto;
position: absolute;
inset: 0;
animation: story__letter2-2 7s ease-in-out infinite;
}
@keyframes story__letter2-2 {
0% {opacity: 0;}
10% {opacity: 0;}
40% {opacity: 1;}
60% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}
#story #story__letter3 {
width: 14%;
height: auto;
position: absolute;
top: 48%;
right: 3%;
animation: story__letter3 10s ease-in-out infinite , story__memo2 1.7s step-start infinite;
}
@keyframes story__letter3 {
0% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#slider1 .top-slide {
animation: loop-slide-rev 200s infinite linear 0s both;
}
#slider2 .top-slide {
animation: loop-slide 200s infinite linear 0s both;
}
#slider1 .top-slide .content ,
#slider2 .top-slide .content {
width: 70vw;
height: auto;
margin: 0;
}
#story #story__contents {
width: 100%;
height: auto;
padding: 10vw 0;
}
#story #story__contents h2 {
width: 100%;
height: auto;
text-align: center;
margin: 0 0 5vw;
}
#story #story__contents h2 img {
width: 20%;
}
#story #story__contents p {
width: 80%;
height: auto;
margin: 0 10%;
color: #000;
font-size: 1.1rem;
line-height: 2.2rem;
letter-spacing: 2px;
font-feature-settings: "palt";
}
#story #story__cat img {
width: 30%;
height: auto;
position: relative;
animation: catwalk 15s ease-in-out infinite, updown 1.0s step-start infinite;
}
@keyframes catwalk {
0% {left: -31%;bottom: 0;}
100% {left: 103%;bottom: 0;}
}
#story #story__memo {
width: 20%;
height: auto;
position: absolute;
top: 20%;
left: 3%;
animation: story__memo1 8.0s ease-in-out infinite , story__memo2 2.0s step-start infinite;
}
#story #story__letter1 {
width: 22%;
height: auto;
position: absolute;
top: 60%;
left: -2%;
animation: story__letter1 10.0s ease-in-out infinite , story__memo2 2.2s step-start infinite;
}
#story #story__letter2 {
width: 20%;
height: auto;
position: absolute;
top: 19%;
right: 10%;
}
#story #story__letter3 {
width: 20%;
height: auto;
position: absolute;
top: 58%;
right: 1%;
animation: story__letter3 10s ease-in-out infinite , story__memo2 1.7s step-start infinite;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
#slider1 .top-slide {
animation: loop-slide-rev 130s infinite linear 0s both;
}
#slider2 .top-slide {
animation: loop-slide 130s infinite linear 0s both;
}
#slider1 .top-slide .content ,
#slider2 .top-slide .content {
width: 100vw;
height: auto;
margin: 0;
}
#story #story__contents {
width: 100%;
height: auto;
padding: 60vw 0;
}
#story #story__contents h2 {
width: 100%;
height: auto;
text-align: center;
margin: 0 0 5vw;
}
#story #story__contents h2 img {
width: 40%;
}
#story #story__contents p {
width: 90%;
height: auto;
margin: 0 5%;
color: #000;
font-size: 1.1rem;
line-height: 2.2rem;
letter-spacing: 2px;
font-feature-settings: "palt";
}
#story #story__memo {
width: 55%;
height: auto;
position: absolute;
top: 62%;
left: 2%;
animation: story__memo2 2.0s step-start infinite;
}
#story #story__letter2 {
width: 70%;
height: auto;
position: absolute;
top: 14%;
right: -5%;
}
#story #story__letter1 ,
#story #story__letter3 {
display: none;
}
@keyframes catwalk {
0% {left: -51%;bottom: 0;}
100% {left: 103%;bottom: 0;}
}
#story #story__cat {
padding: 10vw 0 0;
}
#story #story__cat img {
width: 50%;
height: auto;
position: relative;
animation: catwalk 8s ease-in-out infinite, updown 1.0s step-start infinite;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 375px) {
#story #story__memo {
width: 50%;
height: auto;
position: absolute;
top: 65%;
left: 4%;
animation: story__memo2 2.0s step-start infinite;
}
}
/* ========================================
キャラクター
========================================== */
#chara-bg {
width: 100%;
height: 100%;
min-height: 100%;
position: fixed;
inset: 0;
pointer-events: none;
z-index: -25;
opacity: 0;
}
.chara-bgs {
width: 100%;
height: 100%;
min-height: 100%;
background-size: cover;
background-position: center center;
position: absolute;
inset: 0;
pointer-events: none;
}
#chara-bg0 {
background-color: #000;
z-index: -25;
}
.chara-bgpic {
z-index: -24;
}
@keyframes chara-bg1 {
0% {opacity: 1;}
10% {opacity: 1;}
15% {opacity: 0;}
95% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes chara-bg2 {
0% {opacity: 0;}
10% {opacity: 0;}
15% {opacity: 1;}
25% {opacity: 1;}
30% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes chara-bg3 {
0% {opacity: 0;}
25% {opacity: 0;}
30% {opacity: 1;}
39% {opacity: 1;}
44% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes chara-bg4 {
0% {opacity: 0;}
39% {opacity: 0;}
44% {opacity: 1;}
53% {opacity: 1;}
58% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes chara-bg5 {
0% {opacity: 0;}
53% {opacity: 0;}
58% {opacity: 1;}
67% {opacity: 1;}
72% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes chara-bg6 {
0% {opacity: 0;}
67% {opacity: 0;}
72% {opacity: 1;}
81% {opacity: 1;}
86% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes chara-bg7 {
0% {opacity: 0;}
81% {opacity: 0;}
86% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
#chara-bg1 {
animation: chara-bg1 30s ease-in-out infinite;
}
#chara-bg2 {
animation: chara-bg2 30s ease-in-out infinite;
}
#chara-bg3 {
animation: chara-bg3 30s ease-in-out infinite;
}
#chara-bg4 {
animation: chara-bg4 30s ease-in-out infinite;
}
#chara-bg5 {
animation: chara-bg5 30s ease-in-out infinite;
}
#chara-bg6 {
animation: chara-bg6 30s ease-in-out infinite;
}
#chara-bg7 {
animation: chara-bg7 30s ease-in-out infinite;
}
#character {
width: 100%;
height: auto;
padding: 6vw 0 15vw;
position: relative;
z-index: -23;
overflow: hidden;
}
#character h2 {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#character h2 img {
width: 20%;
}
.prevBtn {
width: 5%;
position: fixed;
top: 50%;
left: 10%;
transform: translateY(0, -50%, 0);
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
}
.nextBtn {
width: 5%;
position: fixed;
top: 50%;
right: 10%;
transform: translateY(0, -50%, 0);
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
}
/* コントローラーエリア */
.tabs {
width: 60%;
height: auto;
margin: 0 20% 3vw;
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
position: relative;
z-index: 3;
}
.tab {
width: 14%;
height: auto;
padding: 0;
cursor: pointer;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
.tab.active {
transform: scale(1.2);
}
/* 中身エリア */
.panels {
width: 60%;
height: auto;
margin: 0 15% 0 20%;
}
.panels .panel {
display: none;
width: 100%;
height: auto;
box-sizing: border-box;
margin: 8vw 0 0;
padding: 0 5vw;
position: relative;
}
.panels .panel.active {
display: block;
}
.panels .panel .panels {
width: 40%;
height: auto;
margin: 0;
position: absolute;
bottom: -20%;
left: 30%;
z-index: 2;
}
.panels .panel .panels .panel {
display: none;
width: 56%;
height: auto;
margin: 0;
padding: 0;
}
.panels .panel .panels .no-panel {
display: block;
width: 56%;
height: auto;
margin: 0;
}
.panels .panel .panels .panel.active {
display: block;
}
.panels .panel .txt {
width: 77%;
height: 20vw;
margin: 11vw 0 0 40%;
box-sizing: border-box;
padding: 5vw 3vw 5vw 7vw;
background: linear-gradient(to top, rgba(244, 244, 244, 0.8) 50%, transparent);
}
.panels .panel .txt .name {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
.panels .panel .txt .name img {
width: 40%;
}
.panels .panel .txt p {
width: 100%;
height: auto;
color: #000;
font-size: 1.1vw;
line-height: 2.0vw;
letter-spacing: 1.5px;
font-feature-settings: "palt";
}
.panels .panel .tabs {
width: 80%;
height: auto;
display: flex;
justify-content: center;
position: absolute;
bottom: -30%;
left: 13%;
}
.panels .panel .tabs .tab {
width: 10%;
height: auto;
margin: 0 1.2%;
cursor: pointer;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#character {
width: 100%;
height: auto;
padding: 10vw 0 15vw;
position: relative;
z-index: -23;
}
#character h2 {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#character h2 img {
width: 40%;
}
.prevBtn {
width: 10%;
position: fixed;
top: 50%;
left: 5%;
transform: translateY(0, -50%, 0);
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
z-index: 2;
}
.nextBtn {
width: 10%;
position: fixed;
top: 50%;
right: 5%;
transform: translateY(0, -50%, 0);
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
z-index: 4;
}
/* コントローラーエリア */
.tabs {
width: 90%;
height: auto;
margin: 0 5% 3vw;
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
position: relative;
z-index: 3;
}
.tab {
width: 14%;
height: auto;
padding: 0;
cursor: pointer;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
.panels {
width: 80%;
height: auto;
margin: 0 0 0 20%;
}
.panels .panel .panels {
width: 40%;
height: auto;
margin: 0;
position: absolute;
bottom: -20%;
left: 10%;
z-index: 2;
}
.panels .panel .txt {
width: 70%;
height: 40vw;
margin: 10vw 0 0 20%;
box-sizing: border-box;
padding: 5vw 3vw 5vw 7vw;
background: linear-gradient(to top, rgba(244, 244, 244, 0.8) 50%, transparent);
}
.panels .panel .txt .name {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
.panels .panel .txt .name img {
width: 40%;
}
.panels .panel .txt p {
width: 100%;
height: auto;
color: #000;
font-size: 1.1rem;
line-height: 2.0rem;
letter-spacing: 1.5px;
font-feature-settings: "palt";
}
.panels .panel .tabs {
width: 80%;
height: auto;
display: flex;
justify-content: center;
position: absolute;
bottom: -30%;
left: 13%;
}
.panels .panel .tabs .tab {
width: 10%;
height: auto;
margin: 0 1.2%;
cursor: pointer;
}
.panels .panel .tabs {
width: 80%;
height: auto;
display: flex;
justify-content: center;
position: absolute;
bottom: -15%;
left: 13%;
}
.panels .panel .tabs .tab {
width: 12%;
height: auto;
margin: 0 1.2%;
cursor: pointer;
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
#character {
width: 100%;
height: auto;
padding: 20vw 0 0;
position: relative;
z-index: -23;
}
#character h2 {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
}
#character h2 img {
width: 70%;
}
.prevBtn {
width: 10%;
position: fixed;
top: 50%;
left: 0%;
transform: translateY(0, -50%, 0);
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
z-index: 3;
}
.nextBtn {
width: 10%;
position: fixed;
top: 50%;
right: 0%;
transform: translateY(0, -50%, 0);
border: none;
background-color: transparent;
cursor: pointer;
opacity: 0;
z-index: 3;
}
/* コントローラーエリア */
.tabs {
width: 96%;
height: auto;
margin: 0 2% 3vw;
padding: 0;
list-style-type: none;
display: flex;
justify-content: space-between;
position: relative;
z-index: 3;
}
.tab {
width: 14%;
height: auto;
padding: 0;
cursor: pointer;
transform: scale(1);
transition: all 0.3s ease-in-out;
}
.panels {
width: 100%;
height: auto;
margin: 0;
}
.panels .panel {
display: none;
width: 100%;
height: auto;
box-sizing: border-box;
margin: 8vw 0 0;
padding: 0;
position: relative;
}
.panels .panel .panels {
width: 90%;
height: auto;
margin: 0;
position: absolute;
bottom: 50%;
left: 10%;
z-index: 2;
}
.panels .panel .panels .panel {
display: none;
width: 56%;
height: auto;
margin: 0;
padding: 0;
}
.panels .panel .panels .no-panel {
display: block;
width: 56%;
height: auto;
margin: 0;
}
.panels .panel .txt {
width: 100%;
height: 90vw;
margin: 100vw 0 0;
box-sizing: border-box;
padding: 20vw 3vw 5vw 12vw;
background: linear-gradient(to top, rgba(244, 244, 244, 0.8) 60%, transparent);
position: relative;
}
.panels .panel .txt .name {
width: 80%;
height: auto;
margin: 0 0 2vw;
text-align: right;
position: absolute;
top: 15%;
left: 10%;
}
.panels .panel .txt .name img {
width: 40%;
}
.panels .panel .txt p {
width: 90%;
height: auto;
color: #000;
font-size: 1.1rem;
line-height: 2.0rem;
letter-spacing: 1.5px;
font-feature-settings: "palt";
position: absolute;
top: 57%;
left: 5%;
}
.panels .panel .tabs {
width: 80%;
height: auto;
display: flex;
justify-content: center;
position: absolute;
bottom: -30%;
left: 13%;
}
.panels .panel .tabs .tab {
width: 10%;
height: auto;
margin: 0 1.2%;
cursor: pointer;
}
.panels .panel .tabs {
width: 60%;
height: auto;
display: flex;
justify-content: center;
position: absolute;
bottom: 40%;
left: 40%;
}
.panels .panel .tabs .tab {
width: 26%;
height: auto;
margin: 0 2%;
cursor: pointer;
}
}
/* ========================================
キャスト
========================================== */
#cast {
width: 100%;
height: auto;
padding: 8vw 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
#cast h2 {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
}
#cast h2 img {
width: 10%;
}
#cast .cast__prof {
width: 60%;
height: auto;
margin: 0 20% 3vw;
position: relative;
box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
z-index: 2;
}
#cast .cast__prof .prof-bg {
width: 100%;
height: auto;
}
#cast .cast__prof .name {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 7%;
left: 0;
}
#cast .cast__prof .name img {
width: auto;
height: 1.6vw;
}
#cast .cast__prof .photo {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 17%;
left: 0;
}
#cast .cast__prof .photo img {
width: 33%;
}
#cast .cast__prof p {
width: 86%;
height: auto;
position: absolute;
top: 57%;
left: 7%;
color: #000;
font-size: 1vw;
line-height: 2.0vw;
letter-spacing: 1.6px;
font-feature-settings: "palt";
}
#cast .cast__com {
width: 60%;
height: auto;
margin: 0 20% 6vw;
position: relative;
box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
transform: translate3d(0, -100%, 0);
opacity: 0;
}
@keyframes cast-com {
0% {transform: translate3d(0, -100%, 0);opacity: 0;}
100% {transform: translate3d(0, 0, 0);opacity: 1;}
}
.cast1com ,
.cast2com {
animation: cast-com 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1.0s forwards;
}
#cast .cast__com .prof-bg {
width: 100%;
height: auto;
}
#cast .cast__com .title {
width: 100%;
height: auto;
text-align: center;
position: absolute;
top: 7%;
left: 0;
}
#cast .cast__com .title2 {
top: 12%;
}
#cast .cast__com .title img {
width: 26%;
height: auto;
}
#cast .cast__com p {
width: 80%;
height: auto;
position: absolute;
top: 22.5%;
left: 11%;
color: #000;
font-family: "kinuta-shin-enpitsu-it-stdn", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.1vw;
line-height: 2.6vw;
letter-spacing: 1.0px;
font-feature-settings: "palt";
}
#cast .cast__com p.com2 {
top: 21.6%;
}
#cast .cast__com #yabuki-f1 ,
#cast .cast__com #yabuki-f2 {
display: none;
}
#cast #cast__tree-right {
width: 40%;
height: auto;
position: absolute;
top: 0;
right: 0;
}
#cast #cast__tree-left {
width: 50%;
height: auto;
position: absolute;
top: 40%;
left: 0;
}
#cast #cast__leaf-L1 {
width: 2%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 20s linear 1s infinite, leaf-rotate1 8s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-L2 {
width: 2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 22s linear 6s infinite, leaf-rotate2 6s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-L3 {
width: 2.5%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 18s linear 13s infinite, leaf-rotate1 5s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-L4 {
width: 2.5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 24s linear 20s infinite, leaf-rotate2 4s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-R1 {
width: 0.8%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 19s linear 6s infinite, leaf-rotate3 2.8s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-R2 {
width: 1.2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 20s linear 14s infinite, leaf-rotate4 2.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-R3 {
width: 1%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 22s linear 18s infinite, leaf-rotate4 3.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#cast {
width: 100%;
height: auto;
padding: 12vw 0;
background-color: #fff;
position: relative;
overflow: hidden;
}
#cast h2 {
width: 100%;
height: auto;
margin: 0 0 8vw;
text-align: center;
}
#cast h2 img {
width: 30%;
}
#cast .cast__prof {
width: 100%;
height: auto;
margin: 0 0 5vw;
position: relative;
box-shadow: none;
z-index: 1;
}
#cast .cast__prof .prof-bg ,
#cast .cast__prof .name {
display: none;
}
#cast .cast__prof .photo {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
position: static;
}
#cast .cast__prof .photo img {
width: 60%;
}
#cast .cast__prof p {
width: 90%;
height: auto;
margin: 0 5%;
position: static;
color: #000;
font-size: 1.1rem;
line-height: 2.0rem;
letter-spacing: 1.6px;
font-feature-settings: "palt";
}
#cast .cast__com {
width: 94%;
height: auto;
box-sizing: border-box;
margin: 0 3% 15vw;
padding: 15vw 5vw;
position: relative;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
transform: translate3d(0, 20%, 0);
opacity: 0;
}
@keyframes cast-com {
0% {transform: translate3d(0, 20%, 0);opacity: 0;}
100% {transform: translate3d(0, 0, 0);opacity: 1;}
}
.cast1com {
animation: cast-com 1.5s cubic-bezier(0.33, 1, 0.68, 1) 0s forwards;
background-color: #f3fccd;
}
.cast2com {
animation: cast-com 1.5s cubic-bezier(0.33, 1, 0.68, 1) 0s forwards;
background-color: #fbfbfb;
border: 1px solid #4a4a4a;
}
#cast .cast__com .com-bg {
display: none;
}
#cast .cast__com .title {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
position: static;
}
#cast .cast__com .title2 {
top: 100%;
}
#cast .cast__com .title img {
width: 60%;
height: auto;
}
#cast .cast__com p {
width: 100%;
height: auto;
position: static;
color: #000;
font-family: "kinuta-shin-enpitsu-it-stdn", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 1.1em;
letter-spacing: 1.0px;
font-feature-settings: "palt";
line-height: 2.5; /* 行の高さ（重要：便箋の幅を決定します） */
padding: 0; /* 左右の余白 */
background-size: 100% 1lh; /* 行の高さと合わせる */
/* 便箋の罫線（上から80%透明、下20%に線の色を指定） */
background-image: linear-gradient(transparent 98%, #919877 98%);
}
#cast #cast2com p {
background-image: linear-gradient(transparent 98%, #4a4a4a 98%);
}
body.is-iphone #cast .cast__com p {
/* ここにiPhone専用のCSSを記述 */
background-size: 100% 2.45em; /* 行の高さと合わせる */
}
#cast .cast__com #yabuki-f1 {
display: block;
width: 25%;
height: auto;
position: absolute;
top: 1%;
left: 2%;
}
#cast .cast__com #yabuki-f2 {
display: block;
width: 30%;
height: auto;
position: absolute;
bottom: 0;
right: 1%;
}
#cast .cast__com p.com2 {
top: 24.0%;
}
#cast #cast__tree-right ,
#cast #cast__tree-left {
display: none;
}
#cast #cast__leaf-L1 {
width: 8%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 20s linear 1s infinite, leaf-rotate1 8s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-L2 {
width: 6%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 22s linear 6s infinite, leaf-rotate2 6s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-L3 {
width: 8%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 18s linear 13s infinite, leaf-rotate1 5s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-L4 {
width: 10%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 24s linear 20s infinite, leaf-rotate2 4s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-R1 {
width: 5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 19s linear 6s infinite, leaf-rotate3 2.8s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-R2 {
width: 9%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 20s linear 14s infinite, leaf-rotate4 2.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
#cast #cast__leaf-R3 {
width: 7%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 22s linear 18s infinite, leaf-rotate4 3.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
}
/* ========================================
スタッフ
========================================== */
#staff {
width: 100%;
height: auto;
padding: 0 0 40vw;
background-color: #000;
position: relative;
overflow: hidden;
}
#staff #staff__bg {
width: 100%;
height: auto;
transition: 1.0s all;
}
#staff #staff__bg img {
width: 100%;
height: auto;
aspect-ratio: 1920 / 1080;
}
#staff #staff__contents {
width: 100%;
height: auto;
position: absolute;
top: 0;
}
#staff #staff__contents #staff__trg {
width: 100%;
height: 1px;
position: absolute;
top: 10vw;
}
#staff #staff__contents h2 {
width: 100%;
height: auto;
padding: 0;
margin: 25vw 0 3vw;
text-align: center;
}
#staff #staff__contents h2 img {
width: 11%;
height: auto;
}
#staff #staff__contents .name {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#staff #staff__contents .name img {
width: 18%;
height: auto;
}
#staff #staff__contents p {
width: 50%;
height: auto;
margin: 0 25% 0;
color: #fff;
font-size: 1vw;
line-height: 1.8vw;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
#staff #staff__contents #staff__com {
width: 50%;
height: auto;
box-sizing: border-box;
margin: 3vw 25% 0;
padding: 3vw 5vw;
background-color: rgba(42, 122, 37, 0.6);
}
#staff #staff__contents #staff__com h3 {
width: 100%;
height: auto;
margin: 0 0 2vw;
text-align: center;
}
#staff #staff__contents #staff__com h3 img {
width: 30%;
}
#staff #staff__contents #staff__com p {
width: 100%;
height: auto;
margin: 0;
color: #fff;
font-size: 1vw;
line-height: 2;
letter-spacing: 2px;
font-feature-settings: "palt";
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#staff {
width: 100%;
height: auto;
padding: 0 0 70vh;
background-color: #000;
position: relative;
overflow: hidden;
}
#staff #staff__bg img {
width: 100%;
height: auto;
aspect-ratio: 1215 / 1557;
}
#staff #staff__contents #staff__trg {
width: 100%;
height: 1px;
position: absolute;
top: 25vw;
}
#staff #staff__contents h2 {
width: 100%;
height: auto;
padding: 50vw 0 0;
margin: 0 0 5vw;
text-align: center;
}
#staff #staff__contents h2 img {
width: 30%;
height: auto;
}
#staff #staff__contents .name {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
}
#staff #staff__contents .name img {
width: 50%;
height: auto;
}
#staff #staff__contents p {
width: 70%;
height: auto;
margin: 0 15% 0;
color: #fff;
font-size: 1.1rem;
line-height: 1.8rem;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
#staff #staff__contents #staff__com {
width: 70%;
height: auto;
box-sizing: border-box;
margin: 10vw 15% 0;
padding: 7vw 7vw;
background-color: rgba(42, 122, 37, 0.6);
}
#staff #staff__contents #staff__com h3 {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
}
#staff #staff__contents #staff__com h3 img {
width: 50%;
}
#staff #staff__contents #staff__com p {
width: 100%;
height: auto;
margin: 0;
color: #fff;
font-size: 1.1rem;
line-height: 1.8rem;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
}
/* 以下タブレット・スマホ */
@media (max-width: 600px) {
#staff {
width: 100%;
height: auto;
padding: 0 0 180vh;
background-color: #000;
position: relative;
overflow: hidden;
}
#staff #staff__contents #staff__trg {
width: 100%;
height: 1px;
position: absolute;
top: 30vw;
}
#staff #staff__contents h2 {
width: 100%;
height: auto;
padding: 60vw 0 0;
margin: 0 0 15vw;
text-align: center;
}
#staff #staff__contents h2 img {
width: 35%;
height: auto;
}
#staff #staff__contents .name {
width: 100%;
height: auto;
margin: 0 0 10vw;
text-align: center;
}
#staff #staff__contents .name img {
width: 70%;
height: auto;
}
#staff #staff__contents p {
width: 90%;
height: auto;
margin: 0 5% 0;
color: #fff;
font-size: 1.1rem;
line-height: 2.5rem;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
#staff #staff__contents #staff__com {
width: 100%;
height: auto;
box-sizing: border-box;
margin: 10vw 0 0;
padding: 10vw 5vw;
background-color: rgba(42, 122, 37, 0.6);
}
#staff #staff__contents #staff__com h3 {
width: 100%;
height: auto;
margin: 0 0 5vw;
text-align: center;
}
#staff #staff__contents #staff__com h3 img {
width: 50%;
}
#staff #staff__contents #staff__com p {
width: 100%;
height: auto;
margin: 0;
color: #fff;
font-size: 1.1rem;
line-height: 2.5rem;
letter-spacing: 1.2px;
font-feature-settings: "palt";
}
}
/* 以下タブレット・スマホ */
@media (max-width: 375px) {
#staff {
width: 100%;
height: auto;
padding: 0 0 220vh;
background-color: #000;
position: relative;
overflow: hidden;
}
}
/* ========================================
コメント
========================================== */
#com-bg {
width: 100%;
height: 100%;
min-height: 100%;
position: fixed;
inset: 0;
pointer-events: none;
z-index: -15;
opacity: 0;
}
.com-bgs {
width: 100%;
height: 100%;
min-height: 100%;
background-size: cover;
background-position: center center;
position: absolute;
inset: 0;
pointer-events: none;
}
#com-bg0 {
background-color: #000;
z-index: -15;
}
.com-bgpic {
z-index: -14;
}
@keyframes com-bg1 {
0% {opacity: 1;}
15% {opacity: 1;}
25% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes com-bg2 {
0% {opacity: 0;}
15% {opacity: 0;}
25% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes com-bg3 {
0% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
65% {opacity: 1;}
75% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes com-bg4 {
0% {opacity: 0;}
65% {opacity: 0;}
75% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
#com-bg1 {
animation: com-bg1 12s ease-in-out infinite;
}
#com-bg2 {
animation: com-bg2 12s ease-in-out infinite;
}
#com-bg3 {
animation: com-bg3 12s ease-in-out infinite;
}
#com-bg4 {
animation: com-bg4 12s ease-in-out infinite;
}
#com-lights {
width: 100%;
height: 100%;
min-height: 100%;
position: fixed;
inset: 0;
pointer-events: none;
z-index: -10;
opacity: 0;
}
#com-light1 {
width: 2%;
height: auto;
position: absolute;
top: 80%;
left: -5%;
animation: hotaru1 10s linear 0s infinite, tateyure1 3.0s ease-in-out infinite alternate, tenmetsu 0.6s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light2 {
width: 2.2%;
height: auto;
position: absolute;
top: 40%;
left: 105%;
animation: hotaru2 10s linear 4s infinite, tateyure2 3.5s ease-in-out infinite alternate, tenmetsu 1.2s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light3 {
width: 2.2%;
height: auto;
position: absolute;
top: 105%;
left: 70%;
animation: hotaru3 12s linear 7s infinite, yokoyure1 3.0s ease-in-out infinite alternate, tenmetsu 0.5s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light4 {
width: 1.8%;
height: auto;
position: absolute;
top: -5%;
left: 70%;
animation: hotaru4 16s linear 9s infinite, yokoyure1 4.0s ease-in-out infinite alternate, tenmetsu 1.0s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light5 {
width: 1.2%;
height: auto;
position: absolute;
top: -5%;
left: 15%;
animation: hotaru5 18s linear 1s infinite, yokoyure1 4.5s ease-in-out infinite alternate, tenmetsu 1.5s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes hotaru1 {
0% {top: 80%;left: -5%;}
100% {top: 30%;left: 105%;}
}
@keyframes hotaru2 {
0% {top: 40%;left: 105%;}
100% {top: 70%;left: -5%;}
}
@keyframes hotaru3 {
0% {top: 105%;left: 70%;}
100% {top: -5%;left: 5%;}
}
@keyframes hotaru4 {
0% {top: -5%;left: 70%;}
100% {top: 105%;left: 30%;}
}
@keyframes hotaru5 {
0% {top: -5%;left: 15%;}
100% {top: 105%;left: 80%;}
}
@keyframes tateyure1 {
from {transform: translateY(100px);}
to {transform: translateY(-200px);}
}
@keyframes tateyure2 {
from {transform: translateY(50px);}
to {transform: translateY(-50px);}
}
@keyframes yokoyure1 {
from {transform: translateX(100px);}
to {transform: translateX(-60px);}
}
#comment {
width: 100%;
height: auto;
padding: 50vw 0;
position: relative;
z-index: -11;
}
#comment #com-tate {
width: 100%;
height: auto;
text-align: center;
}
#comment #com-tate img {
width: 3%;
}
/* 以下タブレット・スマホ */
@media (max-width: 1024px) {
#com-light1 {
width: 5%;
height: auto;
position: absolute;
top: 80%;
left: -5%;
animation: hotaru1 10s linear 0s infinite, tateyure1 3.0s ease-in-out infinite alternate, tenmetsu 0.6s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light2 {
width: 6%;
height: auto;
position: absolute;
top: 40%;
left: 105%;
animation: hotaru2 10s linear 4s infinite, tateyure2 3.5s ease-in-out infinite alternate, tenmetsu 1.2s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light3 {
width: 4%;
height: auto;
position: absolute;
top: 105%;
left: 70%;
animation: hotaru3 12s linear 7s infinite, yokoyure1 3.0s ease-in-out infinite alternate, tenmetsu 0.5s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light4 {
width: 3%;
height: auto;
position: absolute;
top: -5%;
left: 70%;
animation: hotaru4 16s linear 9s infinite, yokoyure1 4.0s ease-in-out infinite alternate, tenmetsu 1.0s ease-in-out infinite alternate;
pointer-events: none;
}
#com-light5 {
width: 3.5%;
height: auto;
position: absolute;
top: -5%;
left: 15%;
animation: hotaru5 18s linear 1s infinite, yokoyure1 4.5s ease-in-out infinite alternate, tenmetsu 1.5s ease-in-out infinite alternate;
pointer-events: none;
}
#comment {
width: 100%;
height: auto;
padding: 90vh 0;
position: relative;
z-index: -11;
}
#comment #com-tate {
width: 100%;
height: auto;
text-align: center;
}
#comment #com-tate img {
width: 10%;
}
}
/* ========================================
SNSボタンアリア
========================================== */
.fadeInButton {
animation-name:fadeIn;
animation-duration:1.8s;
animation-fill-mode:forwards;
animation-delay: 2.7s;
}
#button-area {
width:100%;
height:auto;
margin:0;
padding:1vw 0;
}
#button-area ul.social_sq_buttons {
width:100%;
height:auto;
padding:0;
margin:0;
list-style-type: none;
display:flex;
justify-content: center;
flex-wrap:wrap;
}
#button-area ul.social_sq_buttons li {
width:140px;
height: 20px;
margin:0 3px;
padding:0;
display: flex;
justify-content: center;
}
#button-area ul.social_sq_buttons li.tw {
background:#000;
}
#button-area ul.social_sq_buttons li.line {
background:#06C755;
}
#button-area ul.social_sq_buttons li.checkin {
background:#10519D;
}
#button-area ul.social_sq_buttons li.filmarks {
background:#FFE100;
text-align: center;
}
#button-area ul.social_sq_buttons li.filmarks img {
width: 60%;
}
#button-area ul.social_sq_buttons li.fb .fb_iframe_widget > span {
vertical-align: baseline !important;
}
/* 以下タブレット・スマホ */
@media (max-width: 800px) {
#button-area {
width:100%;
height:auto;
margin:0;
padding:10px 0 10px;
}
#button-area ul.social_sq_buttons {
width:100%;
height:auto;
padding:0;
margin:0;
list-style-type: none;
display:flex;
justify-content: center;
flex-wrap:wrap;
}
#button-area ul.social_sq_buttons li {
width:160px;
height: 20px;
margin:5px;
padding:3px 0;
display: flex;
justify-content: center;
}
}
/* ========================================
フッター
========================================== */
footer {
width:100%;
height:auto;
padding:0;
margin:0;
position: relative;
overflow: hidden;
}
footer #footer__bg {
width: 100%;
height: auto;
}
footer #footer__bg img {
width: 100%;
height: auto;
aspect-ratio: 1920 / 980;
}
footer #foot__komorebi {
width: 20%;
height: auto;
position: absolute;
top: 0;
right: 0;
animation: foot__komorebi 8s ease-in-out infinite;
}
footer #foot__komorebi img {
aspect-ratio: 410 / 289;
}
@keyframes foot__komorebi {
0% {opacity: 0;}
15% {opacity: 0;}
30% {opacity: 0.7;}
50% {opacity: 0.2;}
75% {opacity: 1;}
85% {opacity: 1;}
100% {opacity: 0;}
}
footer #footer__logo {
width: 35%;
height: auto;
position: absolute;
top: 42%;
left: 15%;
opacity: 0;
}
footer #footer__tate {
width: 8%;
height: auto;
position: absolute;
top: 28%;
left: 75%;
opacity: 0;
}
footer #footer__date {
width: 100%;
height: auto;
text-align: center;
position: absolute;
bottom: 10%;
left: 0;
opacity: 0;
}
footer #footer__date img {
width: 15%;
}
footer #button-area {
position: absolute;
bottom: 1%;
opacity: 0;
z-index: 5;
}
footer #footer__leaf {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
opacity: 0;
}
.footer__logo ,
.footer__tate ,
.footer__date ,
.button-area {
animation: fadeIn 1.5s ease-in forwards;
}
.footer__leaf {
animation: fadeIn 1.5s ease-in 0.8s forwards;
}
footer #Fleaf-L1 {
width: 2%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 6s linear 0s infinite, leaf-rotate1 4s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L2 {
width: 2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 8s linear 3s infinite, leaf-rotate2 4s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L3 {
width: 1.5%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 7s linear 6s infinite, leaf-rotate1 3.5s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L4 {
width: 2.5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 9s infinite, leaf-rotate2 4.2s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L5 {
width: 3.2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5s linear 11s infinite, leaf-rotate1 3.2s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-R1 {
width: 0.8%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5s linear 2s infinite, leaf-rotate3 2.8s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-R2 {
width: 1.2%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 5s infinite, leaf-rotate4 4.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-R3 {
width: 1%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 8s infinite, leaf-rotate4 3.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
@media (max-width: 1024px) {
footer #footer__bg img {
width: 100%;
height: auto;
aspect-ratio: 1170 / 2300;
}
footer #foot__komorebi {
width: 40%;
height: auto;
position: absolute;
top: 0;
right: 0;
animation: foot__komorebi 8s ease-in-out infinite;
}
footer #foot__komorebi img {
aspect-ratio: 356 / 542;
}
footer #footer__logo {
width: 70%;
height: auto;
position: absolute;
top: 72%;
left: 15%;
opacity: 0;
}
footer #footer__tate {
width: 20%;
height: auto;
position: absolute;
top: 40%;
left: 75%;
opacity: 0;
}
footer #footer__date {
width: 100%;
height: auto;
text-align: center;
position: absolute;
bottom: 15%;
left: 0;
opacity: 0;
}
footer #footer__date img {
width: 30%;
}
footer #button-area {
position: absolute;
bottom: 3%;
opacity: 0;
}
footer #Fleaf-L1 {
width: 8%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 6s linear 0s infinite, leaf-rotate1 4s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L2 {
width: 6%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 8s linear 3s infinite, leaf-rotate2 4s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L3 {
width: 6%;
height: auto;
position: absolute;
top: -10%;
left: 5%;
animation: fall-leaf 7s linear 6s infinite, leaf-rotate1 3.5s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L4 {
width: 5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 9s infinite, leaf-rotate2 4.2s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-L5 {
width: 5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5s linear 11s infinite, leaf-rotate1 3.2s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-R1 {
width: 5%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 5s linear 2s infinite, leaf-rotate3 2.8s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-R2 {
width: 6%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 5s infinite, leaf-rotate4 4.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
footer #Fleaf-R3 {
width: 4%;
height: auto;
position: absolute;
top: -10%;
left: 0%;
animation: fall-leaf 6s linear 8s infinite, leaf-rotate4 3.0s ease-in-out infinite alternate;
z-index: 1;
pointer-events: none;
}
}
@media (max-width: 600px) {
footer #footer__logo {
width: 80%;
height: auto;
position: absolute;
top: 68%;
left: 10%;
opacity: 0;
}
footer #footer__tate {
width: 25%;
height: auto;
position: absolute;
top: 18%;
left: 65%;
opacity: 0;
}
footer #footer__date {
width: 100%;
height: auto;
text-align: center;
position: absolute;
bottom: 18%;
left: 0;
opacity: 0;
}
footer #footer__date img {
width: 40%;
}
footer #button-area {
position: absolute;
bottom: 1%;
opacity: 0;
}
}
@media (max-width: 375px) {
}