@charset "utf-8";

/*------------------------------------------

sample

-------------------------------------------*/

@media screen and (max-width:768px) {

.pc { display:none; }
.sp { display:block; }

* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html,
body {
height:100%;
width:100%;
}

#wrap {
display: flex;
height:100%;
width:100%;
overflow:hidden;
}

#main {
display: flex;
flex-direction: column;
height: 100%;
align-items: start;
justify-content: flex-start;
position:relative;
width:100%;
}

#contents {
background-size:cover;
background-position:center right;
padding:0;
overflow-y: scroll;
display: flex;
flex-direction: column;
height: 100%;
align-items: start;
justify-content: flex-start;
width:100%;
}

#contents #scene {
flex: 0 0 50%;
width: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 0px;
height: 100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
}

#contents #scene_menu_menu {
align-items: center;
flex-grow: 0;
flex-basis: auto;
 width: 100%; 
}

#contents_footer {
background-color: rgba(0,0,0,1);
bottom:0;
display:flex;
flex-grow:0;
flex-basis:auto;
justify-content:space-between;
position:relative;
z-index:2;
}
#contents_footer > a {
display:block;
vertical-align:bottom;
position:fixed;
left:10px;
top:10px;
z-index:2;
}
#contents_footer > a img {
height:30px;
opacity:1;
vertical-align:bottom;
width:auto;
}
#contents_footer p {
font-size:0.9rem;
opacity:0.5;
text-align:center;
line-height:1.9rem;
width:100%;
flex:0 0 100%;
position:relative;
z-index:2;
}
#contents_footer button {
align-items:center;
background-color:#999;
display:flex;
flex:0 0 36px;
justify-content:start;
line-height:1;
padding:5px 10px;
position:fixed;
right:0;
top:0;
}
#contents_footer button:hover {
cursor:pointer;
}

#next_page_link {
display:none;
}

#contents #menu {
flex-direction:column;
width:100%;
}
#contents #menu h1 {
display:flex;
justify-content:center;
padding:50px 0 30px;
}

#contents #menu #contents_menu {
padding:0;
}
#contents #menu #contents_menu:before {
content:none;
}

#contents #menu #contents_menu ol {
border-top-style:solid;
border-top-width:1px;
border-top-color: rgba(255,255,255,0.5);
flex-direction:column;
justify-content:start;
}
#contents #menu #contents_menu ol li {
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color: rgba(255,255,255,0.5);
flex:0 1 100%;
height:auto;
}
#contents #menu #contents_menu ol li a {
height:auto;
padding:15px;
}
#contents #menu #contents_menu ol li a:after {
font-family: var(--icon);
content: "\f054";
height:100%;
right:15px;
margin-top:-3px;
top:50%;
position:absolute;
}
#contents #menu #contents_menu ol li a:hover:before {
width:100%;
}

#contents #menu #contents_menu ol li a dl {
display:flex;
flex-direction:inherit;
min-height:70px;
padding:0;
width:100%;
}
#contents #menu #contents_menu ol li a dl:before {
content:none;
}

#contents #menu #contents_menu ol li a dl dt {
align-items:center;
flex:0 0 30px;
min-height:0;
}
#contents #menu #contents_menu ol li a dl dt img {
width:30px;
height:auto;
}

#contents #menu #contents_menu ol li a dl dd {
flex:1;
font-size:1.2rem;
justify-content:start;
padding-top:0;
padding-left:20px;
text-align:left;
-ms-writing-mode:inherit;
writing-mode:inherit;
}
#contents #menu #contents_menu ol.selected li a {
opacity:1.0;
}


/*------------------------------------------
scene
-------------------------------------------*/
#scene {
position: relative;
width:100%;
height: auto;
}
#scene:before {
content: "";#scene:before
display:block;
padding-top:100%;
}

#scene_menu {
animation:none;
transform:none;
transition:unset;
height:auto;
margin-top:0;
top:auto;
right:auto;
bottom:0;
width:100%;
align-items: center;
position:relative;
flex-grow: 0;
flex-basis: auto;
width: 100%; 
order:2;
z-index:20;
}
#scene_menu:hover {
animation:none;
transform:none;
transition:unset;
}
#scene_menu dl {
padding:0;
}
#scene_menu dl dt {
position:absolute;
right:10px;
bottom:110px;
}
#scene_menu dl dt span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
white-space:nowrap;
font-size:1.2rem;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}
#scene_menu dl dt img {
}
#scene_menu dl dd ol {
flex-direction:row;
flex-wrap:wrap;
}
#scene_menu dl dd ol li {
height:auto;
flex:0 0 25%;
}
#scene_menu dl dd ol li:before {
width:100%;
}
#scene_menu dl dd ol li:after {
background-color: rgba(255,255,255,0.5);
content:" ";
height:100%;
left:0;
position:absolute;
bottom:0;
width:1px;
}
#scene_menu dl dd ol li:first-child:after,
#scene_menu dl dd ol li:nth-child(4n + 1):after {
content:none;
}
#scene_menu dl dd ol li a {
padding:15px;
text-align: center;
justify-content: center;
}
#scene_menu dl dd ol li a span {
display:block;
font-size:1.4rem;
}
#scene_menu dl dd ol li a img {
display:none;
}

#scene_menu dl dd ol li.selected a {
background-color: rgba(255,255,255,0.3);
}

/*------------------------------------------
scene05
-------------------------------------------*/
#scene #scene05_title {

}
#scene #scene05_title img:first-child {
top:60px;
left:30px;
z-index:5;
height:100px;
}
#scene #scene05_title img:nth-child(2) {
top:115px;
left:130px;
z-index:5;
height:60px;
}
#scene #scene05_title img:nth-child(3) {
display:none;
}
#scene #scene05_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
display:block;
filter: blur(2px);
font-size:1.4rem;
color:#1a1a1a;
opacity: 0;
position: absolute;
top: 180px;
left: 35px;
white-space:nowrap;
z-index:5;
}
#scene #scene05_txt {
position:absolute;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
color:#1a1a1a;
font-size:1.3rem;
top:40px;
right:30px;
white-space:nowrap;
}
#scene #scene05_bg {
}
#scene #scene05_bg img:first-child {
position:fixed;
bottom:20%;
}
#scene #scene05_bg img:nth-child(2) {
position:fixed;
bottom:20%;
}
#scene #scene05_bg img:nth-child(3) {
position:fixed;
bottom:20%;
}

/*------------------------------------------
scene06
-------------------------------------------*/
#scene #scene06_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene06_title img:nth-child(2) {
top:115px;
left:130px;
z-index:5;
height:60px;
}
#scene #scene06_bg { padding:50px 0; } 
#scene #scene06_bg img:first-child { object-fit:cover; width:100%; height:50%; bottom:0; position:fixed; }
#scene #scene06_bg img:nth-child(2) { object-fit:cover; width:100%; height:50%; top:0; position:fixed; }
#scene #scene06_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}

/*------------------------------------------
scene07
-------------------------------------------*/
#scene #scene07_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene07_title img:nth-child(2) {
top:115px;
left:130px;
z-index:5;
height:60px;
 }
#scene #scene07_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}
#scene #scene07_bg img:first-child { object-fit:cover; top:0; left:auto; right:0; }
#scene #scene07_bg .bg2 { background-size:cover; background-position:center top; height:100%; width:100%; }

@keyframes fadeIn_move {
 0% {
 }
 100% {
  background-position:center bottom;
  opacity: 1;
  filter: blur(0);
 }
}

/*------------------------------------------
scene08
-------------------------------------------*/
#scene #scene08_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene08_title img:nth-child(2) {
top:115px;
left:130px;
z-index:5;
height:60px;
 }
#scene #scene08_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}
#scene #scene08_bg { height:100%; width:100%; }
#scene #scene08_bg .bg1 { background-size:cover; background-position:center top; height:100%; width:100%; position:fixed; }
#scene #scene08_bg .bg1 img { object-fit:cover; height:100%; width:auto; }
#scene #scene08_bg .bg2 { background-size:cover; background-position:center top; height:100%; width:100%; position:fixed; } 

/*------------------------------------------
scene09
-------------------------------------------*/
#scene #scene09_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene09_title img:nth-child(2) {
top:115px;
left:130px;
z-index:5;
height:60px;
 }
#scene #scene09_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}

/*------------------------------------------
scene10
-------------------------------------------*/
#scene #scene10_title {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#scene #scene10_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene10_title img:nth-child(2) {
top:135px;
left:130px;
z-index:5;
height:50px;
 }
#scene #scene10_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}

#scene #scene10_bg {
height:100%;
width:100%;
overflow:hidden;
position:absolute;
}
#scene #scene10_bg .bg1 {
background-size:cover;
background-position:center top;
height:100%; 
width:100%;
overflow:hidden;
}
#scene #scene10_bg .bg1 img {
object-fit:cover;
height:100%;
width:100%;
}

@keyframes fadeIn_Out_move_top_down {
 0% {
  opacity: 0;
  filter: blur(0);
 }
 50% {
  opacity: 1;
  filter: blur(0);
 }
 100% {
  opacity: 0;
  filter: blur(0);
  transform:translateY(0);
 }
}

#scene #scene10_bg .bg2 {
background-size:cover;
background-position:center top;
height:100%;
width:100%;
}
#scene #scene10_bg .bg2 img {
object-fit:cover;
height:100%;
width:100%;
transform:translateX(0);
transform: scale(1.0,1.0);
}

@keyframes fadeIn_Out_move_right_left {
 0% {
  opacity: 0;
  filter: blur(0);
 }
 50% {
  background-position:center 30%;
  opacity: 1;
  filter: blur(0);
 }
 100% {
  background-position:center 30%;
  opacity: 0;
  filter: blur(0);
  transform:translateX(-40px);
  transform: scale(1.2,1.2);
 }
}

#scene #scene10_bg .bg3 {
background-size:cover;
background-position:center top;
height:100%;
width:100%;
overflow:hidden;
}

#scene #scene10_bg .bg3 img {
object-fit:cover;
height:100%;
width:100%;
transform:translateY(-50px); 
}

@keyframes fadeIn_move_bottom_top {
 0% {
  opacity: 0;
  filter: blur(0);
 }
 100% {
  opacity: 1;
  filter: blur(0);
  transform:translateY(0);
 }
}

/*------------------------------------------
scene11
-------------------------------------------*/
#scene #scene11_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene11_title img:nth-child(2) {
top:115px;
left:130px;
z-index:5;
height:60px;
 }
#scene #scene11_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}

#scene #scene11_bg {
height:100%;
width:100%;
overflow:hidden;
position:absolute;
}
#scene #scene11_bg .bg1 { background-size:cover; background-position:center top; height:100%; width:100%; overflow:hidden; }
#scene #scene11_bg .bg1 img { object-fit:cover; height:100%; width:auto; }
#scene #scene11_bg .bg2 { background-size:cover; background-position:center top; height:100%; width:100%; overflow:hidden; }
#scene #scene11_bg .bg2 img { object-fit:cover; height:100%; width:auto; }
#scene #scene11_bg .bg3 { background-size:cover; background-position:center top; height:100%; width:100%; overflow:hidden; }
#scene #scene11_bg .bg3 img { object-fit:cover; height:100%; width:auto; }

/*------------------------------------------
scene12
-------------------------------------------*/
#scene #scene12_title img:first-child {
top:60px;
margin-left:0;
left:30px;
z-index:5;
height:100px;
}
#scene #scene12_title img:nth-child(2) {
top:130px;
left:135px;
z-index:5;
height:60px;
 }
#scene #scene12_title span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
animation-name: fadeIn;
animation-delay: 2.5s;
animation-duration: 1.5s;
animation-fill-mode: forwards;
color:#fff;
display:block;
filter: blur(2px);
font-size:1.4rem;
opacity: 0;
position: absolute;
top:60px;
right: 40px;
white-space:nowrap;
z-index:5;
text-shadow: 
1px  1px 2px #000,
1px  0px 2px #000,
0px  1px 2px #000,
1px -1px 2px #000,
-1px  1px 2px #000,
-1px -1px 2px #000,
-1px -0px 2px #000,
-0px -1px 2px #000;
}

#scene #scene12_bg .bg1 { width:50%; height:25%; top:50%; left:0; }
#scene #scene12_bg .bg2 { width:50%; height:25%; top:50%; left:auto; right:0; }
#scene #scene12_bg .bg3 { width:50%; height:25%; top:75%; left:0; }
#scene #scene12_bg .bg4 { width:50%; height:25%; top:75%; right:0; }


/*------------------------------------------
animation(common)
-------------------------------------------*/
@keyframes fadeIn {
 0% {
 }
 100% {
  opacity: 1;
  filter: blur(0);
 }
}

@keyframes fadeOut {
 0% {
 }
 100% {
  opacity: 0;
  filter: blur(0);
 }
}

@keyframes fadeIn_Out {
 0% {
  opacity: 0;
  filter: blur(0);
 }
 25% {
  opacity: 1;
  filter: blur(0);
 }
 75% {
  opacity: 1;
  filter: blur(0);
 }
 100% {
  opacity: 0;
  filter: blur(0);
 }
}


/*------------------------------------------
opning
-------------------------------------------*/
#poster {
width:100%;
height:100%;
overflow:hidden;
}
#poster:after {
background-image:url(../img/t_thumb.png);
background-size:137px 181px;
background-repeat:no-repeat;
content: " ";
margin-top:-120px;
margin-right:-68px;
right:50%;
top:50%;
position:absolute;
z-index:12;
width:137px;
height:181px;
}
#poster > img {
width:100%;
height:100%; 
object-fit:cover;
object-position:center right;
}
#poster #skip {
top:auto;
bottom:10vw;
}
#video-btn {
display:none;
}