*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
}
body{
text-size-adjust: none;/*iOS用*/
background:url(images/bg.png) #AC1920;
}
a img{
border:none;
}
img{
vertical-align:bottom;
}
li{
list-style-type: none;
}
.responsive{
width:100%;
}

#curtain{
position:fixed;
top:0;
left:0;
width:100vw;
height:100lvh;
background:url(images/bg.png) #AC1920;
z-index:10;
}
#curtain .loading{
position:absolute;
top:36%;
left:42%;
width:135px;
 animation-name:dance;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-duration: 1s;
 transform-origin:50% 100%;
}
@keyframes dance {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}

#coutainer{
position:relative;
z-index:0;
}

#menuOpen {
position: fixed;
top: 1vw;
right: 1%;
width: 7%;
cursor:pointer;
opacity:0;
z-index:11;
}
#menuClose {
position: fixed;
top:1vw;
right: 1%;
width: 7%;
cursor:pointer;
display:none;
z-index:12;
}
#menu{
position: fixed;
top: 0;
padding:40px 0 0 0;
width: 100%;
height:100dvh;
background-color:rgba(0,0,0,0.8);
display:none;
z-index:10;
}
#menu .logo{
margin:1% auto 0 auto;
width:45%;
}
#menu .btn{
margin:1% auto 0 auto;
width:50%;
}
#menu .btn img{
margin:-5% -2.5% 0 -2.5%;
width:45%;
}

header{
display: flex;
}
header #l{
position:relative;
width:60%;
overflow: hidden;
}
header #r{
width:40%;
opacity:0;
}
header #l .sticky {
position: -webkit-sticky;
position: sticky;
top:0;
}
header .bg{
position:relative;
}
header .bochan{
position:absolute;
top:0;
left:0;
width:100%;
}
header .chara, header .shinnosuke {
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
}
header .catch{
position:absolute;
top: -1.5%;
left: -1.5%;
width: 24%;
opacity:0;
}
header .icon{
position:absolute;
bottom:2%;
right:2%;
width:20%;
opacity:0;
}

header .logo{
margin:8% auto 0 auto;
width:100%;
}
header .roadshow{
margin:-6% auto 0 auto;
width:50%;
}

header .sns{
margin:0 auto;
width:90%;
}
header .sns div{
display:inline-block;
vertical-align: middle;
margin: 0 -1% 0 -1%;
width: 18%;
}
header .banner{
margin:0 auto;
width: 70%;
}
header .banner img{
margin-top:10px;
}
p.credit{
margin-top:4%;
width: 100%;
/*font-size:0.9rem;*/
font-size:1.1vw;
line-height:1.6;
color:#ff0;
}
p.credit a{
color:#ff0;
}
p .small{
/*font-size:0.7rem;*/
font-size:0.9vw;
}
#mvtk{
}
#mvtk div{
display:inline-block;
margin: 4% 2% 0 2%;
width: 42%;
}

#content{
overflow: hidden;
}

#eizo{
padding:2% 1%;
}
#eizo .lineArea{
padding:7% 0;
background-image:url(images/eizo_line_top_pc.png),url(images/eizo_line_bottom_pc.png);
background-repeat:no-repeat,no-repeat;
background-position:0% 0%,0% 100%;
background-size:contain,contain;
}
#eizo .midashi{
margin:0 auto;
width: 20%;
}
#eizo .eizoFrame{
margin:2% auto 0 auto;
width:80%;
}
#eizo .eizo{
position: relative;
width: 100%;
padding-top: 56.25%;/*16:9=100:x*/
}
#eizo .eizo iframe{
position: absolute;
border:3px solid #ff0;
border-radius:12px;
top: 0;
left: 0;
width: 99%;
height: 99%;
}
#eizo .btn{
margin:0 auto 0 auto;
width:82%;
}
#eizo .btn img{
margin:1% auto 0 auto;
display:inline-block;
width:24%;
}

#shinchan_bochan{
position:relative;
z-index:1;
}
#shinchan_bochan .catch{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
}
#shinchan_bochan .photo_2{
position:absolute;
bottom: -42%;
left: 0%;
width: 38%;
}
#shinchan_bochan .icon{
position:absolute;
bottom: -36%;
right: 2%;
width: 14%;
}

#ohanashi{
position:relative;
padding:5% 0 6% 0;
background:url(images/ohanashi_bg_pc.jpg) 100% 100%;
background-size: cover;
z-index:0;
}
#ohanashi .midashi{
margin:0 auto;
width: 20%;
}
#scene{
margin-top:2%;
}
#ohanashi .photo_3{
width: 63%;
}
#ohanashi .text{
margin:40px auto 0 auto;
width:90%;
}

/*blur*/
#ohanashi .text picture{
opacity: 0;
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.img-blur {
-webkit-animation-name: imageBlur;
animation-name: imageBlur;
opacity: 1;
transition: 5s;
}

@-webkit-keyframes imageBlur {
from {
opacity: 0;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-ms-filter: blur(15px);
-o-filter: blur(15px);
filter: blur(15px);
}

to {
opacity: 1;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
}
}
@keyframes imageBlur {
from {
opacity: 0;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-ms-filter: blur(15px);
-o-filter: blur(15px);
filter: blur(15px);
}

to {
opacity: 1;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-ms-filter: blur(0px);
-o-filter: blur(0px);
filter: blur(0px);
}
}

footer{
position:relative;
margin-top: -12%;
}
footer .logo{
position:absolute;
left:1%;
top:14%;
width:38%;
}
footer .btn{
position:absolute;
right:-1%;
top:16%;
width:36%;
}
footer .btn img{
display:inline-block;
margin:-5% -5% 0 0;
width:45%;
}
footer .toho{
position:absolute;
left:50%;
bottom:3%;
transform: translateX(-50%);
width:7%;
}
footer .copyright{
position:absolute;
left:50%;
bottom:1%;
transform: translateX(-50%);
width:100%;
}
footer .copyright p{
font-size:0.6rem;
color:#fff;
}

#footer2{
padding:2% 0;
}
#footer2 .policy {
font-size: 0.7rem;
color: #fff;
}
#footer2 .policy a {
color: #fff;
}
#footer2 .banner div {
display: inline-block;
margin: 2% 0.5% 0 0.5%;
width: 12%;
}

.mobile{
display:none;
}
.mobile_inline{
display:none;
}

/*simply-scroll*/
.simply-scroll-container {
  position: relative;
}
.simply-scroll-clip {
  position: relative;
  overflow: hidden;
}
.simply-scroll-list {
  margin: 0;
  padding: 0;
  height: ; /*画像の高さ（崩れる場合にはこちらも設定 */
}
.simply-scroll-list li {
  float: left;
  width: 300px;
  margin: 0;
  padding: 0;
}
.simply-scroll-list li img {
  display: block;
}

/*colorbox*/
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 1%;
right:1%;
width: 100px;
height: 123px;
background: url(images/menu_close.png) no-repeat 0 0;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}
#cboxOverlay {
opacity: 0.8 !important;
}


@media (max-width: 639px) {
#curtain .loading{
top:40%;
left:40%;
width:20%;
}

#coutainer {
}

#menuOpen {
width: 16%;
}
#menuClose {
width: 16%;
}
#menu .logo{
width:90%;
}
#menu .btn{
width:90%;
}

header{
display: unset;
}
header #l{
width:100%;
}
header #r{
width:100%;
opacity:1;
}
header .logo{
position:absolute;
bottom:20%;
left:50%;
transform: translateX(-50%);
margin:0% auto 0 auto;
width:70%;
opacity:0;
}
header .roadshow{
position:absolute;
bottom:1%;
left:50%;
transform: translateX(-50%);
margin:0 auto 0 auto;
width:50%;
opacity:0;
}
header .icon{
bottom:0%;
right:0%;
width:22%;
}

header .sns{
opacity:0;
}
header .banner{
opacity:0;
}

p.credit{
font-size:0.8rem;
}
p .small{
font-size:0.6rem;
}

#eizo{
padding:8% 4%;
}
#eizo .lineArea{
padding:16% 0;
background-image:url(images/eizo_line_top.png),url(images/eizo_line_bottom.png);
background-repeat:no-repeat,no-repeat;
background-position:0% 0%,0% 100%;
background-size:contain,contain;
}
#eizo .midashi{
width:34%;
}
#eizo .eizoFrame{
margin:4% auto 0 auto;
width:98%;
}
#eizo .btn{
margin:2% auto 0 auto;
width:99%;
}
#eizo .btn img{
width:49%;
}

#shinchan_bochan .catch{
width: 90%;
}
#shinchan_bochan .photo_2{
bottom: -15%;
left: 0%;
width: 70%;
}
#shinchan_bochan .icon{
bottom: -13%;
right: 2%;
width: 26%;
}

#ohanashi{
padding:22% 0 88% 0;
background:url(images/ohanashi_bg.jpg) 100% 100%;
background-size: cover;
}
#ohanashi .midashi{
width:34%;
}
#scene{
margin-top:4%;
}
#ohanashi .icon{
top: 1%;
right: 2%;
width:18%;
}
#ohanashi .text{
margin:6% auto 0 auto;
width:90%;
}
#ohanashi .photo_3{
margin-left:-12%;
width: 130%;
}

footer{
margin-top: -17%;
}
footer .logo{
left:50%;
top:48%;
transform: translateX(-50%);
width:70%;
}
footer .btn{
right:unset;
left:50%;
top:68%;
transform: translateX(-50%);
width:100%;
}
footer .btn img{
display:inline-block;
margin: -4% -3% 0 -3%;
width: 36%;
}
footer .toho{
position:absolute;
left:50%;
bottom:3.5%;
transform: translateX(-50%);
width:20%;
}
footer .copyright p{
font-size:0.5rem;
}

#footer2{
padding:4% 0;
}
#footer2 .banner div {
margin: 4% 0.5% 0 0.5%;
width: 30%;
}

.pc{
display:none;
}
.mobile{
display:block;
}
.mobile_inline{
display:inline;
}

.simply-scroll-list {
height: ; /*画像の高さ（崩れる場合にはこちらも設定 */
}
.simply-scroll-list li {
  width:;
}

/*colorbox*/
#cboxClose {
width: 15%;
/*height: 40px;*/
}
}