@charset "UTF-8";
/* CSS Document */
*, *:before, *:after{margin:0;padding:0;border: 0;vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.pc-only{display: none;}
.for-cr{display: none;}
ol, ul {
list-style: none;
list-style-type: none;
}
a:focus, *:focus { outline:none; }
a{
text-decoration: none;
color:#333;
}
a:hover{
cursor: pointer;
}
@media (min-width: 768px) {
a:hover{
opacity:0.7;
transition: .4s opacity;
}
}
#nanka-fg img{
vertical-align:bottom;
}
img.w100{
width: 100%;
}


@media (min-width: 698px) {
.att_txt{
position: absolute;
right: 2%;
top: 22px;
font-size: 14px;
z-index: 101;
}
.for-sp{
display: none;
}
}


@media (min-width: 768px) {
.small-device{
display: none!important;
}


/*
header{
width: 100%;
height: 62px;
max-width: 1200px;
margin: 0 auto;
padding: 8px 16px;
position: relative;
}
#header_calbeeroot img {
width: 108px;
height: 46px;
}
.attention_txt{
position: absolute;
right: 16px;
top: 20px;
text-align: right;
}
#footer_calbeeroot {
border-top: 2px solid #fe0000;
background-color: #FFF;
margin-top: 0px;
padding: 0px;
padding-bottom: 10px;
}
#footer_calbeeroot .inner {
max-width: 1150px;
margin: 0 auto;
padding: 25px 12px 30px;
}
#footer_calbeeroot ul {
margin-bottom: -13px;
text-align: left;
}
#footer_calbeeroot ul li {
display: inline-block;
position: relative;
}
#footer_calbeeroot ul li:first-child {
margin-left: 1.5em;
}
#footer_calbeeroot ul li a {
font-size: 14px;
padding-right: 10px;
margin-right: 10px;
border-right: 1px solid #cbc9ca;
text-decoration: none;
color: #3c3c3c;
}
#footer_calbeeroot ul li:first-child a:before {
background: url(../images/icon_home.png) 0 0 / contain no-repeat;
position: absolute;
left: -1.5em;
top: 50%;
margin-top: -0.5em;
content: "";
width: 1em;
height: 1em;
}
*/


.main-kv{
background: url("../images/main-kv-bg_pc.jpg") no-repeat center bottom;
background-size: cover;
position: relative;
overflow: hidden;
}
.main-kv::after{
position: absolute;
content: '';
width: 120%;
height: 6px;
left: -10%;
bottom: -2px;
background: url("../images/bottom-line_pc.svg") repeat-x left bottom 1px;
background-size: auto 6px;
z-index: 10;
}
.main-kv .inner-ps{
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.main-kv .contents{
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.main-kv h1{
width: 34%;
position: absolute;
left: 4.15%;
top: 5.8%;
}
.main-kv-img{
position: relative;
width: 64.8%;
left:34.3%;
}
.main-kv-package{
position: absolute;
width: 26%;
left: 4.8%;
bottom: 7%;
}





.main-cont {
background: #EB0100;
padding: 0 0;
position: relative;
overflow: hidden;
}
.main-cont .inner-ps{
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.main-cont .contents{
padding: 0 0 3%;
}
.main-cont-ttl-box{
padding: 0 0 7%;
}
.period-box{
width: 74.8%;
margin: 0 auto;
padding: 5.6% 0 3%;
}
.period-box img{
position: relative;
left: 1%;
}
.main-cont-ttl{
position: relative;
width: 73.4%;
margin: 0 auto 3.4%;
}
.main-cont-btn-box{
width: 40%;
max-width: 294px;
margin: 0 auto;
}
.movie-ttl-wide{
text-align: center;
position: relative;
margin: 0 auto 7%;
}
.movie-ttl-wide img{
width: 78%;
}
.movie-ttl-narrow{
position: relative;
text-align: center;
margin: 0 auto 4%;
}
.movie-ttl-narrow img{
width: 52.5%;
}
.movie-thumb-box{
position: relative;
text-align: center;
}
.movie-thumb-box a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
}
.for07 {
width: 100%;
}

.movie01-speech{
display: none;
position: absolute;
width: 32.8%;
top: -7%;
right: -2%;
}
.movie02-speech{
display: none;
position: absolute;
width: 33.8%;
top: 13%;
left: -7%;
}
.movie-ill01{
position: absolute;
width: 19%;
top: 30%;
left: -18%;
}
.movie-ill01 img{
transform: rotate(-10deg);
}
.movie-ill02{
position: absolute;
width: 20%;
top: 529%;
right: -20%;
}
.movie-ill03{
position: absolute;
width: 22.5%;
top: -6%;
left: -20%;
}
.movie-ill03 img{
transform: rotate(70deg);
}
.movie-ill04{
position: absolute;
width: 16.2%;
top: 560%;
right: -17%;
}
.movie-ill04 img{
transform: rotate(20deg);
}
.movie-ill05{
position: absolute;
width: 17.4%;
top: 97%;
left: -24%;
}
.movie-ill06{
position: absolute;
width: 15%;
top: 600%;
right: -16%;
}
.web-movie-ttl-speech{
position: absolute;
width: 13.8%;
left: 20%;
top: 3%;
}
.making-ttl-ill{
position: absolute;
width: 8%;
left: 23%;
top: -24%;
}
.movie-ill01 img.w100,
.movie-ill02 img.w100,
.movie-ill03 img.w100,
.movie-ill04 img.w100,
.movie-ill05 img.w100,
.movie-ill06 img.w100,
.web-movie-ttl-speech img.w100,
.making-ttl-ill img.w100{
width: 100%;
}
.main-cont-cat-ttl{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 4%;
}
.type01{
width: 206px;
}
.type02{
width: 296px;
margin: 6% 0 0;
}
.type03{
width: 298px;
margin: 0 0 1%;
}
.movie-box{
display: block;
}
.movie-once{
width: 44%;
margin: 0 0 7%;
}
.movie-once:nth-child(odd){
}
.movie-once:nth-child(even){
}
.movies-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 2.6%;
}
.movies-box.for-making{
justify-content: center;
padding: 0 2.6%;
}








.statement{
background: url("../images/statement-bg_pc.jpg") no-repeat center bottom;
background-size: cover;
padding: 0 4%;
overflow:hidden;
}
.statement .inner-ps{
width: 100%;
max-width: 976px;
margin: 0 auto;
}
.statement .contens{
position: relative;
margin: 11.5% 0 13.5%;
}
.statement-frame{
position: relative;
z-index: 2;
}
.statement-ttl{
position: absolute;
width: 48%;
top: 8.7%;
left: 5.5%;
z-index: 1;
}
.statement .contens p{
position: absolute;
width: 34.2%;
bottom: 10%;
left: 5.5%;
z-index: 1;
}
.statement-package{
position: absolute;
width: 26%;
bottom: 8%;
left: 43%;
z-index: 1;
}
.statement-v{
position: absolute;
width: 73.5%;
top: -14%;
right: -17.6%;
z-index: 0;
}
.knowledge{
background: url("../images/knowledge-bg_pc.jpg") repeat center top;
background-size: 500px auto;
padding: 0 4%;
position: relative;
overflow: hidden;
}
.knowledge .inner-ps{
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.knowledge .contents{
padding: 10% 0 11%;
}
.knowledge-ttl{
width: 70%;
margin: 0 auto 4%;
}
.knowledge-cont{
position: relative;
width: 94.6%;
left: 5.4%;
}
.knowledge-cont-img{
position: relative;
width: 100%;
margin: 0 auto 2%;
}
.knowledge-cont p{
position: absolute;
width: 24.7%;
right: 1.5%;
bottom: 7%;
}
.foot-links-sec{
background: #EB0100;
position: relative;
padding: 0 5%;
}
.foot-links-sec .inner-ps{
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.foot-links-sec .contents{
padding: 7% 0 6%;
}

.foot-bnr-box{
width: 100%;
max-width: 488px;
margin: 0 auto;
}



.loop-image {
position: relative;
width: 136%;
left: -18%;
display: flex;
overflow: hidden;
margin: 0 0 6.4%;
}
.loop-image.for-pc-under{
margin: 3% 0 7%;
}
.loop_image-to-left,
.loop_image-to-right{
width: 100%;
max-width: none;
}
.loop_image-to-right:nth-child(odd) {
animation: loop1 50s -25s linear infinite;
}
.loop_image-to-right:nth-child(even) {
animation: loop2 50s linear infinite;
}
.loop_image-to-left:nth-child(odd) {
animation: loop3 50s -25s linear infinite;
}
.loop_image-to-left:nth-child(even) {
animation: loop4 50s linear infinite;
}
@keyframes loop1 {
0% {transform: translateX(-100%);}
to {transform: translateX(100%);}
}
@keyframes loop2 {
0% {transform: translateX(-200%);}
to {transform: translateX(0);}
}
@keyframes loop3 {
0% {transform: translateX(100%);}
to {transform: translateX(-100%);}
}
@keyframes loop4 {
0% {transform: translateX(0);}
to {transform: translateX(-200%);}
}


.main-kv h1{
opacity: 0;
transform: translateX(-80px);
}
.loaded .main-kv h1.ose{
opacity: 1;
transform: translateX(0);
transition:opacity 1s 0.3s,transform 0.8s 0.3s;
}
.main-kv-package{
opacity: 0;
transform: translateY(50px);
}
.loaded .main-kv-package.ose{
opacity: 1;
transform: translateY(0);
transition:opacity 1s 0.7s,transform 0.8s 0.7s;
}
.period-box img {
transform: scale(0.3);
opacity:0;
}
.loaded .period-box img.ose{
transform: scale(1);
opacity:1;
transition:transform 1s 1.1s,opacity 1s 1.1s;
}

.main-cont-ttl,
.main-cont-btn-box{
opacity: 0;
transform: translateY(50px);
}
.loaded .main-cont-ttl.ose,
.loaded .main-cont-btn-box.ose{
opacity: 1;
transform: translateY(0);
transition:opacity 1s 1.4s,transform 0.8s 1.4s;
}
.main-cont-box.ose{
opacity:0;
transition:opacity 1.2s 1.7s;
}
.loaded .main-cont-box.ose{
opacity:1;
transition:opacity 1.2s 1.7s;
}

.to-big{
transform: scale(0.2);
opacity:0;
}
.to-big.scrolled{
transform: scale(1);
opacity:1;
transition:transform 0.6s 0s,opacity 0.6s 0s;
}
.to-big-late{
transform: scale(0.2);
opacity:0;
}
.to-big-late.scrolled{
transform: scale(1);
opacity:1;
transition:transform 0.6s 0.3s,opacity 0.6s 0.3s;
}



.page-top{
position: fixed;
width: 50px;
height: 50px;
bottom: 64px;
right: 2%;
cursor: pointer;
display: none;
z-index: 1000;
}



.bg-ribbon01{
position: absolute;
width: 100%;
max-width: 1000px;
top: 0;
left: 0;
right: 0;
height: 300px;
margin: auto;
}
.bg-ribbon02{
position: absolute;
width: 100%;
max-width: 1000px;
top: 0px;
left: 0;
right: 0;
height: 300px;
margin: auto;
}
.bg-ribbon03{
position: absolute;
width: 100%;
max-width: 1000px;
top: 0;
left: 0;
right: 0;
height: 300px;
margin: auto;
}


.bg-ribbon01 img.bg-rb{
position: relative;
width: 260%;
max-width: 2700px;
left: -80%;
top: -780px;
transform: translate(-100%, 0);
}
.bg-ribbon02 img.bg-rb{
position: relative;
width: 260%;
max-width: 2700px;
left: -80%;
top: 100px;
transform: translate(100%, 0);
}
.bg-ribbon03 img.bg-rb{
position: relative;
width: 260%;
max-width: 2700px;
left: -140%;
top: 860px;
transform: translate(-100%, -100%);
}



.bg-ribbon01 img.bg-rb.start{
transform: translate(-100%, -160%);
animation: diagonal-to-left2 2.5s linear both;
}
.bg-ribbon02 img.bg-rb.start{
transform: translate(120%, -100%);
animation: diagonal-to-right2 2.5s linear both;
}
.bg-ribbon03 img.bg-rb.start{
transform: translate(-100%, -100%);
animation: diagonal-to-left-end2 2.5s linear both;
}

@keyframes diagonal-to-left2 {
0% {transform: translate(-100%, 0);opacity: 0;}
1% {transform: translate(-100%, -74%);opacity: 1;}
100% {transform: translate(0, 0);}
}
@keyframes diagonal-to-right2 {
0% {transform: translate(100%, 100%);opacity: 0;}
1% {transform: translate(100%, -74%);opacity: 1;}
100% {transform: translate(0, 0);}
}
@keyframes diagonal-to-left-end2 {
0% {transform: translate(-100%, -100%);opacity: 0;}
1% {transform: translate(-100%, -76%);opacity: 1;}
100% {transform: translate(0, 0);}
}





}


/*==============================================================================================*/

@media (max-width: 1200px) and (min-width: 768px) {
.movies-box {
max-width: 86%;
margin: 0 auto;
}
.movie-once {
width: 46%;
margin: 0 0 7%;
}
}
/*==============================================================================================*/

@media (max-width: 1200px) and (min-width: 768px) {
.bg-ribbon01{
max-width: 900px;
top: 0;
left: 0;
right: 0;
height: 300px;
margin: auto;
}
.bg-ribbon02{
max-width: 900px;
top: 0px;
left: 0;
right: 0;
height: 300px;
margin: auto;
}
.bg-ribbon03{
max-width: 900px;
top: 0;
left: 0;
right: 0;
height: 300px;
margin: auto;
}
.bg-ribbon01 img.bg-rb{
width: 240%;
left: -80%;
top: -580px;
transform: translate(-100%, 0);
}
.bg-ribbon02 img.bg-rb{
width: 240%;
left: -80%;
top: 320px;
transform: translate(100%, 0);
}
.bg-ribbon03 img.bg-rb{
width: 240%;
left: -140%;
top: 860px;
transform: translate(-100%, -100%);
}
.type01 {
width: 21%;
}
.type02,.type03 {
width: 29%;
}
}
/*==============================================================================================*/
@media (max-width: 1000px) and (min-width: 768px) {
.bg-ribbon01 img.bg-rb{
width: 240%;
left: -80%;
top: -580px;
}
.bg-ribbon02 img.bg-rb{
width: 240%;
left: -80%;
top: 340px;
}
.bg-ribbon03 img.bg-rb{
width: 240%;
left: -140%;
top: 720px;
}
}




@media (max-width: 697px) {
.att_txt{
position: absolute;
z-index: 101;
font-size: 2.2vw;
font-weight: 400;
top: 1.9em;
right: 1rem;
}
.for-sp{
display: block;
}
}

/*==============================================================================================*/
@media (max-width: 767px) {
.statement-v,
.wide-device{
display: none!important;
}
.small-device{
display: block;
}

/*
header {
position: relative;
z-index: 100;
width: 100%;
background-color: #FFF;
align-items: center;
height: 52px;
padding: 0;
border-bottom: 0;
}
header .logo {
font-size: 0px;
width: 25vw;
position: absolute;
left: .8rem;
top:1vw;
}
#header_calbeeroot .logo img {
width: 90px;
}
.attention_txt {
position: absolute;
right: .8rem;
top:8px;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0;
}




#footer_calbeeroot {
margin-top: 0px;
padding-bottom: 0px;
border-top: 2px solid #fe0000;
}
#footer_calbeeroot .inner {
max-width: 95%;
margin: 0 auto;
padding: 1.5rem 0 3rem 0;
}
#footer_calbeeroot ul {
padding-left: 10%;
margin-bottom: 3rem;
}
#footer_calbeeroot ul li {
margin-bottom: 2vw;
position: relative;
}
#footer_calbeeroot ul li a {
font-size: min(3.6vw, 16px);
line-height: 2.4;
}
#footer_calbeeroot ul li:first-child a:before {
background: url(../images/icon_home.png) 0 0 / contain no-repeat;
position: absolute;
left: -1.5em;
top: 50%;
margin-top: -0.5em;
content: "";
width: 1em;
height: 1em;
}
*/

.main-cont-wrap{
position: relative;
background: rgba(204,12,15,1.00);
}
.main-kv{
background: #f90a05;
}
.main-kv .inner-ps{
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.main-kv .contents{
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.main-kv .contents::after{
position: absolute;
content: '';
width: 100%;
height: 3px;
left: 0;
bottom: -2px;
background: url("../images/bottom-line.svg") no-repeat center bottom;
background-size: 120% auto;
}
.main-kv h1{
width: 40.4%;
position: absolute;
left: 2.5%;
top: 4%;
}
.main-kv-img{
position: relative;
width: 100%;
}
.main-kv-package{
position: absolute;
width: 30%;
left: 2.4%;
bottom: 5%;
}
.main-cont{
background: #EB0100;
padding: 0 0 5%;
position: relative;
overflow: hidden;
}
.bg-ribbon01{
position: absolute;
width: 100%;
top: -40vw;
left: 0;
height: 90vw;
}
.bg-ribbon02{
position: absolute;
top: 29vw;
left: 0;
width: 100%;
height: 90vw;
}
.bg-ribbon03{
position: absolute;
width: 100%;
top: 120vw;
left: 0;
height: 90vw;
}
.bg-ribbon04{
position: absolute;
width: 100%;
top: 195vw;
left: 0;
height: 90vw;
}
.bg-ribbon05{
position: absolute;
width: 100%;
top: 274vw;
left: 0;
height: 90vw;
}
.bg-ribbon06{
position: absolute;
width: 100%;
top: 350vw;
left: 0;
height: 90vw;
}
.bg-ribbon07{
position: absolute;
width: 100%;
top: 438vw;
left: 0;
height: 90vw;
}
.bg-ribbon08{
position: absolute;
width: 100%;
top: 510vw;
left: 0;
height: 90vw;
}
.bg-ribbon09{
position: absolute;
width: 100%;
top: 580vw;
left: 0;
height: 90vw;
}

.bg-ribbon01 img.bg-rb,
.bg-ribbon03 img.bg-rb,
.bg-ribbon05 img.bg-rb,
.bg-ribbon07 img.bg-rb,
.bg-ribbon09 img.bg-rb{
position: relative;
width: 155%;
max-width: none;
left: -10%;
top: -15%;
transform: translate(-100%, 0%);
}
.bg-ribbon02 img.bg-rb,
.bg-ribbon04 img.bg-rb,
.bg-ribbon06 img.bg-rb,
.bg-ribbon08 img.bg-rb{
position: relative;
width: 155%;
max-width: none;
top: -15%;
right: 0%;
transform: translate(120%, 0%);
}
.bg-ribbon01 img.bg-rb.run,
.bg-ribbon03 img.bg-rb.run,
.bg-ribbon05 img.bg-rb.run,
.bg-ribbon07 img.bg-rb.run{
transform: translate(-100%, 0%);
animation: diagonal-to-left 1.9s linear both;
}
.bg-ribbon02 img.bg-rb.run,
.bg-ribbon04 img.bg-rb.run,
.bg-ribbon06 img.bg-rb.run,
.bg-ribbon08 img.bg-rb.run{
transform: translate(120%, 0%);
animation: diagonal-to-right 1.9s linear both;
}
.bg-ribbon09 img.bg-rb.run{
position: relative;
width: 155%;
max-width: none;
left: -10%;
top: -15%;
transform: translate(-100%, -60%);
animation: diagonal-to-left-end 1.2s linear both;
}
@keyframes diagonal-to-left {
0% {transform: translate(-100%, -66%);}
100% {transform: translate(0, 0);}
}
@keyframes diagonal-to-right {
0% {transform: translate(120%, -95%);}
100% {transform: translate(-20%, 0);}
}
@keyframes diagonal-to-left-end {
0% {transform: translate(-100%, -45%);}
100% {transform: translate(-37%, -5%);}
}


.main-cont .inner-ps{
}
.main-cont .contents{
}
.main-cont-ttl-box{
padding: 0 0 10%;
}
.period-box{
width: 79%;
margin: 0 auto;
padding: 8% 0 3%;
}
.period-box img{
position: relative;
left: 1%;
}
.main-cont-ttl{
position: relative;
width: 81%;
margin: 0 auto 3.4%;
}
.main-cont-btn-box{
width: 42.4%;
margin: 0 auto;
}
.movie-ttl-wide{
text-align: center;
position: relative;
margin: 0 auto 5%;
}
.movie-ttl-wide img{
width: 58.6%;
}
.movie-ttl-narrow{
position: relative;
text-align: center;
margin: 0 auto 4%;
}
.movie-ttl-narrow img{
width: 44.2%;
}
.movie-thumb-box{
position: relative;
text-align: center;
margin: 0 0 10%;
}
.movie-thumb-box a{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: block;
}
.for07{
width: 82.6%
}
.movie01-speech{
display: none;
position: absolute;
width: 28.2%;
top: -7%;
right: 6%;
}
.movie02-speech{
display: none;
position: absolute;
width: 29%;
top: 14%;
left: 3%;
}
.movie-ill01{
position: absolute;
width: 13%;
top: 40%;
left: 2%;
}
.movie-ill02{
position: absolute;
width: 13%;
top: 35%;
right: -1%;
}
.movie-ill03{
position: absolute;
width: 14.5%;
top: 2%;
left: -2%;
}
.movie-ill04{
position: absolute;
width: 12.2%;
top: 10%;
right: 0.2%;
}
.movie-ill05{
position: absolute;
width: 11.8%;
top: 19%;
left: 3.4%;
}
.movie-ill06{
position: absolute;
width: 11%;
top: 13%;
right: 6.5%;
}
.web-movie-ttl-speech{
position: absolute;
width: 21.3%;
left: 5%;
top: -2%;
}
.making-ttl-ill{
position: absolute;
width: 11.2%;
left: 12%;
top: 0;
}
.movie-ill01 img.w100,
.movie-ill02 img.w100,
.movie-ill03 img.w100,
.movie-ill04 img.w100,
.movie-ill05 img.w100,
.movie-ill06 img.w100,
.web-movie-ttl-speech img.w100,
.making-ttl-ill img.w100{
width: 100%;
}
.main-cont-cat-ttl{
width: 100%;
text-align: center;
position: relative;
margin: 0 0 3%;
}
.type01{
width: 32.2%;
}
.type02{
width: 46.4%;
margin: 8% 0 2%;
}
.type03{
width: 47%;
margin: 0 0 1%;
}
.movie-box{
display: block;
}
.movie-once{
width: 100%;
}
.statement{
background: url("../images/statement-bg.jpg") no-repeat center top;
background-size: 100% auto;
padding: 12.4% 5.4% 13%;
}
.statement .inner-ps{
width: 100%;
max-width: 100%;
}
.statement .contens{
position: relative;
}
.statement-ttl{
position: absolute;
width: 75.8%;
top: 3%;
left: 0;
right: 0;
margin: 0 auto;
}
.statement .contens p{
position: absolute;
width: 72%;
bottom: 21.8%;
left: 7.4%;
}
.statement-package{
position: absolute;
width: 58.8%;
bottom: 2%;
left: 0;
right: 0;
margin: 0 auto;
}
.knowledge{
background: url("../images/knowledge-bg.png") repeat-y center top;
background-size: 100% auto;
padding: 16% 0 8.4%;
position: relative;
}
.knowledge .inner-ps{
width: 100%;
max-width: 100%;
}
.knowledge .contents{
}
.knowledge-ttl{
width: 86%;
margin: 0 auto 5%;
}
.knowledge-cont{
position: relative;
padding: 0 0;
}
.knowledge-cont-img{
position: relative;
width: 100%;
margin: 0 auto 2%;
}
.knowledge-cont p{
margin: 0 auto 0;
padding: 0 5.4%;
}
.foot-links-sec{
background: #EB0100;
position: relative;
padding: 7.4% 5.4%;
}
.foot-links-sec .inner-ps{
width: 100%;
max-width: 100%;
}

.foot-bnr-box{
width: 100%;
}




.loop-image {
position: relative;
left: -5%;
width: 110%;
display: flex;
overflow: hidden;
margin: 0 0 9%;
}
.loop_image-to-left,
.loop_image-to-right{
width: 100%;
max-width: none;
}
.loop_image-to-right:nth-child(odd) {
animation: loop1 30s -15s linear infinite;
}
.loop_image-to-right:nth-child(even) {
animation: loop2 30s linear infinite;
}
.loop_image-to-left:nth-child(odd) {
animation: loop3 30s -15s linear infinite;
}
.loop_image-to-left:nth-child(even) {
animation: loop4 30s linear infinite;
}
@keyframes loop1 {
0% {transform: translateX(-100%);}
to {transform: translateX(100%);}
}
@keyframes loop2 {
0% {transform: translateX(-200%);}
to {transform: translateX(0);}
}
@keyframes loop3 {
0% {transform: translateX(100%);}
to {transform: translateX(-100%);}
}
@keyframes loop4 {
0% {transform: translateX(0);}
to {transform: translateX(-200%);}
}


.main-kv h1{
opacity: 0;
transform: translateX(-80px);
}
.loaded .main-kv h1.ose{
opacity: 1;
transform: translateX(0);
transition:opacity 1s 0.3s,transform 0.8s 0.3s;
}
.main-kv-package{
opacity: 0;
transform: translateY(50px);
}
.loaded .main-kv-package.ose{
opacity: 1;
transform: translateY(0);
transition:opacity 1s 0.7s,transform 0.8s 0.7s;
}
.period-box img {
transform: scale(0.3);
opacity:0;
}
.loaded .period-box img.ose{
transform: scale(1);
opacity:1;
transition:transform 1s 1.1s,opacity 1s 1.1s;
}

.main-cont-ttl,
.main-cont-btn-box{
opacity: 0;
transform: translateY(50px);
}
.loaded .main-cont-ttl.ose,
.loaded .main-cont-btn-box.ose{
opacity: 1;
transform: translateY(0);
transition:opacity 1s 1.4s,transform 0.8s 1.4s;
}
.main-cont-box.ose{
opacity:0;
transition:opacity 1.2s 1.7s;
}
.loaded .main-cont-box.ose{
opacity:1;
transition:opacity 1.2s 1.7s;
}

.to-big,.to-big-late{
transform: scale(0.2);
opacity:0;
}
.to-big.scrolled,.to-big-late.scrolled{
transform: scale(1);
opacity:1;
transition:transform 0.6s 0s,opacity 0.6s 0s;
}




.page-top{
position: fixed;
width: 34px;
height: 34px;
bottom: 44px;
right: 3%;
cursor: pointer;
display: none;
z-index: 1000;
}

}





/*==============================================================================================*/
@media (max-width: 617px) {
/*
header {
height: 15vw;
padding: 3vw 0;
border-bottom: 0;
}

#header_calbeeroot .logo img {
width: 25vw;
}
header .logo {
font-size: 0px;
width: 25vw;
position: absolute;
left: .8rem;
top: 2.3vw;
}
*/
.attention_txt {
top: 4vw;
font-size: 2.5vw;
}
}




.swing01 {animation:swing01 2.9s infinite linear;}
.swing02 {animation:swing02 3.7s infinite linear;}
.swing03 {animation:swing03 5.7s infinite ease-in-out;}
.swing04 {animation:swing04 2.7s infinite ease-in-out;}
.up-down01 {animation:up-down01 3.9s infinite ease-in-out;}
.up-down02 {animation:up-down02 3.4s infinite ease-in-out;}
@keyframes swing01 {
0% {transform:translate(0, 0) rotate(0deg);}
20% {transform:translate(0, 0) rotate(0deg);}
24% {transform:translate(0, 0) rotate(-8deg);}
28% {transform:translate(0, 0) rotate(8deg);}
32% {transform:translate(0, 0) rotate(-8deg);}
36% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
@keyframes swing02 {
0% {transform:translate(0, 0) rotate(0deg);}
40% {transform:translate(0, 0) rotate(0deg);}
44% {transform:translate(0, 0) rotate(-5deg);}
48% {transform:translate(0, 0) rotate(5deg);}
52% {transform:translate(0, 0) rotate(-5deg);}
56% {transform:translate(0, 0) rotate(5deg);}
62% {transform:translate(0, 0) rotate(-5deg);}
66% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
@keyframes swing03 {
0% {transform:translate(0, 0) rotate(0deg);}
60% {transform:translate(0, 0) rotate(0deg);}
64% {transform:translate(0, 0) rotate(-11deg);}
68% {transform:translate(0, 0) rotate(12deg);}
72% {transform:translate(0, 0) rotate(-11deg);}
76% {transform:translate(0, 0) rotate(11deg);}
82% {transform:translate(0, 0) rotate(-11deg);}
86% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
@keyframes swing04 {
0% {transform:translate(0, 0) rotate(0deg);}
60% {transform:translate(0, 0) rotate(0deg);}
64% {transform:translate(0, 0) rotate(-10deg);}
68% {transform:translate(0, 0) rotate(10deg);}
72% {transform:translate(0, 0) rotate(-10deg);}
76% {transform:translate(0, 0) rotate(10deg);}
82% {transform:translate(0, 0) rotate(-10deg);}
86% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}
@keyframes up-down01 {
0% {transform:translate(0, 0) ;}
60% {transform:translate(0, 0) ;}
64% {transform:translate(-5%, 0) ;}
68% {transform:translate(5%, 0) ;}
72% {transform:translate(-5%, 0) ;}
76% {transform:translate(5%, 0) ;}
82% {transform:translate(0, 0) ;}
86% {transform:translate(0, 0) ;}
100% {transform:translate(0, 0) ;}
}
@keyframes up-down02 {
0% {transform:translate(0, 0) ;}
52% {transform:translate(0, 0) ;}
56% {transform:translate(0, -4%) ;}
60% {transform:translate(0, 4%) ;}
64% {transform:translate(0, -4%) ;}
68% {transform:translate(0, 4%) ;}
72% {transform:translate(0, -4%) ;}
76% {transform:translate(0, 4%) ;}
82% {transform:translate(0, 0) ;}
86% {transform:translate(0, 0) ;}
100% {transform:translate(0, 0) ;}
}


.main-kv,
.main-kv-img,
.movie-thumb-box img,
.statement-v img{
pointer-events: none;
}



@media print {
  body {
    display: none !important;
  }
}