@charset "utf-8";
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

  ■■■■                               ■
 ■   ■■                              ■
■        ■■■  ■■■■    ■■■  ■ ■ ■■■   ■
■       ■  ■  ■■  ■  ■  ■  ■■  ■  ■  ■
■   ■■■ ■   ■ ■   ■  ■   ■ ■    ■■■  ■
■     ■ ■■■■■ ■   ■  ■■■■■ ■  ■■  ■  ■
 ■    ■ ■     ■   ■  ■     ■  ■   ■  ■
  ■■■■   ■■■  ■   ■   ■■■  ■   ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
body{font-family:YakuHanMP,'Noto Serif JP', serif, sans-serif;}

/* ---- common style ---- */
a,a:visited {color: #0085ff;}
a:hover,a:active {color: #0032ae; }
a.ilink-fr{ color: #FFF; display: inline-block; padding: 5px; background: #7364AA; line-height: 0; margin-bottom: 10px; }
a.ilink-fr:hover{ color: #faaa00; background: #bb0000; }
.hv_fade{ opacity: 1; }
.hv_fade:hover{ opacity: 0.7; cursor: pointer; }

/* improve link */
.ilink{ display: inline-block; padding: 0.3em 0.5em 0.3em 0.5em ; border: #0085ff solid 1px ; text-decoration: none; border-radius: 0; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #0085ff; }
.ilink:hover{ border-color: #0032ae; color: #0032ae; }

.btn-bk{ min-width: 14em; display: inline-block; padding: 0.4em 0.5em 0.3em 0.5em ; background-color: #000; border: #796bae solid 1px ; text-decoration: none; border-radius: .2em; }
.btn-bk:before{ content:"> "; }
.btn-bk,
.btn-bk:visited,
.btn-bk:active{ color: #FFF; }
.btn-bk:hover{ border-color: #0085ff; color: #0085ff; }

.op0{ opacity: 0; }

/* font-color */
.ac-color1{color: #000; }/* base color */
.ac-color2{color: #286cc9; }/* blue */

/* title */
.ttl1 {display: flex;align-items: center;}
.ttl1:after{border-top: .222em solid;content: "";flex-grow: 1;}
.ttl1:after {margin-left: .5em;}

.ttl2{color: #286cc9; border-bottom: #286cc9 solid 1px;}
.ttl3{color: #FFF; background: #f16900; padding: .1em .3em;}
.ttl4{color: #601f10; background: #FFF; padding: .1em .3em;}

/* table */
.table-a{ border-collapse: separate; border-spacing: 2px;}
.table-a th{ padding:0.5em; background-color:rgba(0,0,0,.05); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a td{ padding:0.5em;  border: rgba(0,0,0,.05) solid 1px; vertical-align: top; }
tr.spc td{ line-height: 0; border: none; }

/* frame */
.frame-a{ background: #f8fcfd; box-sizing: border-box;}
.frame-b{ background: rgba(254,249,141,0.2); box-sizing: border-box;}
.frame-wp{ background: #FFF; border: #ff55be dotted 1px;}
.frame-k{ background: rgba(0,0,0,1); padding: .4em .5em;}
.frame-img{ display: inline-block; border: rgba(80,124,251,0.3) solid 3px; box-sizing: border-box; line-height: 0; }

.balloon1{ position: relative; display: inline-block; margin: 0 0 1em 0; padding: .2em .5em; min-width: 5em; max-width: 100%; color: #fff; /* font-size: 0.888em; */ background: #000;}
.balloon1:before { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -0.7em; border: 0.7em solid transparent; border-top: 0.7em solid #000;}
.balloon1 p{ margin: 0; padding: 0;}

/* h-line */
hr.sld-brwn{ border-color: #601f10; border-width: .222em 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */ }
hr.sld-wht{ border-color: #fff; border-width: .222em 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */ }

hr.ac-line1{border-width: 0 0 .46em;border-style: solid;border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(38, 100%, 50%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;width: 100%;}


/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

 ■■■  ■                    ■                   
■     ■                    ■                   
■    ■■■■ ■ ■ ■   ■   ■■■ ■■■■ ■   ■  ■ ■  ■■■ 
 ■■   ■   ■■  ■   ■  ■■ ■  ■   ■   ■  ■■  ■  ■ 
  ■■■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■   ■
    ■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■■■■■
■   ■ ■   ■   ■  ■■  ■■    ■   ■  ■■  ■   ■    
■■■■  ■■  ■    ■■ ■   ■■■  ■■   ■■ ■  ■    ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html{ height: 100%;}
body{ color: #000; height: 100%; background:#fff url(../images/teaser/common-background.png) repeat-y center top; background-size: inherit; } 
.wrapper{ width:100%; /* height: 100%; */ /* height: auto; */ position: relative; background:url(../images/common-bgkv2.png) no-repeat center top; background-size: 100%;}
header,article,section,footer{ position: relative;  }

header{ margin-bottom: 0; background-color: rgba(255,255,255,.5);}
header.on{ height: 100%; }
header > .inner{ width: 100%; max-width: 1200px; margin: 0 auto;  position: relative;}
.hd-spc{ width: 100%; height: 4em; }
.hd-spc{ display: none; }
article{ margin-bottom: 2em; }
article > .inner{ width: 100%; /* max-width: 1500px; */ margin: 0 auto;  position: relative;}

.page-title{ width: 100%; position: relative; text-align: center; padding: 3em 0 1em 0; }
.page-title .ttl{ width: 100%; max-width: 500px; margin: 0 auto; }

/* .sub-title{ width: 100%; max-width: 600px; display: block; padding: 1em; margin: 0 auto; } */

footer{ width:100%; position: relative; text-align: center; padding-bottom: 1em;}
footer > .inner{ width: 95%; max-width: 1140px; margin: 0 auto; position: relative;}
.ft-copyrihgt{ font-size: 0.611em; }
.ft-banner{ width: 100%; max-width: 900px; margin: 0 auto; margin-bottom: 1em; display: flex; justify-content: center;}
.ft-banner > div{ width: 23%; margin: .5%; position: relative; }
.ft-banner > div:nth-child(2){ display: none; }
#PageTop{ width: 3.5em; margin: 0 0 1em auto; position: fixed; bottom:1em; right:1em; display: none; }

/* navi */
nav.global-navi{ display: flex; width: 90%; /* max-width: 800px; */ padding: 1% 0; margin: 0 auto; position: relative; }
nav.global-navi .logo{ width: 17%; }
nav.global-navi .right{ width: 80%; margin-left:3%; }
nav.global-navi .onair{ width: 90%; padding-top: 1%; margin-bottom: 1.5%;}
nav.global-navi .navi-body{ display: flex; flex-wrap: wrap; }
nav.global-navi .navi-body > div.sep{ margin: 0 1.5%; }
nav.global-navi .navi-body > div.sep{ width:1px; height:calc( 28 * 0.095 * 1%); }
nav.global-navi .navi-body > div:nth-child(1){ width: calc( 89 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(3){ width: calc( 243 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(5){ width: calc( 98 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(7){ width: calc( 197 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(9){ width: calc( 200 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(11){ width: calc( 181 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(11) img{ top:.15em; position: relative;}
nav.global-navi .navi-body > div:nth-child(13){ width: calc( 101 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(15){ width: calc( 117 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(17){ width: calc( 144 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(19){ width: calc( 111 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(21){ width: calc( 150 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(23){ width: calc( 90 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(25){ width: calc( 102 * 0.095 * 1%);}
nav.global-navi .navi-body > div:nth-child(10){ display: none; }
nav.global-navi .navi-body > div:nth-child(22){ display: none; }


/* navi-sp */
nav.global-navi-sp{ display: flex; width: 100%; flex-wrap: wrap; padding:0; margin: 0 auto; position: relative; }
nav.global-navi-sp .logo{ width: 27.125%; }
nav.global-navi-sp .onair{ width: 57.03125%; }
nav.global-navi-sp .sp-btn{ width: 15.625%; }
nav.global-navi-sp .navi-body{ display: block; padding-bottom: .8em; }
nav.global-navi-sp .navi-body > div{ border-top: #eee solid 1px; }
nav.global-navi-sp .navi-body > div a{ display: block; padding: .7em 4em; }
nav.global-navi-sp .sp-navi-open{ display: block; }
nav.global-navi-sp .sp-navi-close{ display: block; }
nav.global-navi-sp .navi-body.off{ display: none; }
nav.global-navi-sp .sp-navi-open.off{ display: none; }
nav.global-navi-sp .sp-navi-close.off{ display: none; }
nav.global-navi-sp{ display: none; }


/*  entry */
.entry-container{ width: 100%; max-width: 830px; margin: 0 auto; }
.sc-content-entry{ margin-bottom: 0;}
.sc-content-entry:last-child{margin-bottom: 0;}
.sc-content-entry .entry-head{ width: 100%; padding: 2em 2em 0 2em; background: url(../images/common-entry-bg-16k.png) no-repeat center top; background-size: 100% auto; }
.sc-content-entry .entry-head > .inner{ width: 100%; position: relative; text-align: center; }
.sc-content-entry .entry-title{ width: 100%; font-weight: bold; word-break: break-all; margin-bottom: 1.5em; position: relative; }
.sc-content-entry .entry-ic{ width: 100%; font-size: .111em; height: .111em; background-color: #000; position: relative; }
.sc-content-entry .entry-date{ display: inline-block; background-color: #000; color: #FFF; font-size: 0.888em; padding: 0.1em 0.2em; position: relative; top:-0.8em; }
.sc-content-entry.nodate .entry-head{ padding: 2em 2em 1em 2em;}
.sc-content-entry.nodate .entry-title{ margin-bottom: 1.0em; }
.sc-content-entry.notitle .entry-head{ padding: 2em 2em 0 2em;}

.sc-content-entry .entry-body{ width: 100%; padding: 0 2em 2em 2em; background: url(../images/common-entry-bg-16k.png) no-repeat center bottom; background-size: 100% auto;}
.sc-content-entry .entry-body > .inner{ padding: 0 ; font-size: .888em; line-height: 1.5; }

.single-container{ width: 95%; max-width: 960px; margin: 0 auto; border: #fff solid .35em; background: rgba(255,255,255,.3) url(../images/common-entry-bg-16k.png) repeat-y center 20% ; background-size: 100% auto; border-radius: 0 1em 1em 1em; }
.sc-content-single{ padding: 1.6em; margin: 0 auto 1.6em auto; box-sizing: border-box; border-radius: 0 1em 1em 1em;}

.frame-entry-cop{ padding: 1.6em; background: rgba(255,255,255,.6); margin: 0 auto 1.6em auto; box-sizing: border-box; border-radius: 0 1em 1em 1em;}

.sc-blk-ttl{ display: block; width: 100%; margin-bottom: 1em; }
.sc-blk-ttl .max470{ display: block; max-width: 470px; margin: 0 auto; }


/* .invfadeIn{ opacity: 0; } */

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

              ■                 ■                
■             ■  ■       ■      ■               ■
■             ■                 ■               ■
■  ■■■■    ■■■■  ■ ■   ■ ■   ■■■■  ■   ■  ■■■   ■
■  ■■  ■  ■■ ■■  ■  ■  ■ ■  ■■ ■■  ■   ■  ■  ■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■   ■■■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■ ■■  ■  ■
■  ■   ■  ■■ ■■  ■   ■■  ■  ■■ ■■  ■  ■■ ■   ■  ■
■  ■   ■   ■■■■  ■   ■   ■   ■■■■   ■■ ■  ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/



/* Top */
#Page_Top .wrapper{  background-image:none;}
#Page_Top header{ position: absolute; width: 100%; z-index: 10; }
/*
#Page_Top header{ position: absolute; width: 100%; background: none; z-index: 10; }
#Page_Top.less-scrl nav.global-navi{ justify-content: center;  }
#Page_Top.less-scrl nav.global-navi .logo{ display: none; }
#Page_Top.less-scrl nav.global-navi .onair{ display: none; }
#Page_Top.less-scrl nav.global-navi .right{ width: 77%; margin-left:0; }
*/

.sc-main{ }
.sc-main > .inner{ position: relative; /* max-width: 2400px; */ margin: 0 auto; }
.sc-main .vis-grp{ position: relative; overflow: hidden; }
.sc-main .spc{ position: relative; background-color: #FFF; }
.sc-main .vis3{ position: absolute; top:0; }
.sc-main .mask{ position: absolute; top:0; }
.sc-main .vis{ position: absolute; top:0; }
.sc-main .spc img,.sc-main .mask img,.sc-main .vis img,.sc-main .vis3 img{ width: 100vw; height: auto;}

.sc-main .main-pc .vis3{ position: absolute; bottom:0; width: 90%; margin: 0 auto; left: 0; right: 0; -webkit-animation-name: main-pc-vis3; animation-name: main-pc-vis3; animation-delay: .5s; -webkit-animation-delay: .5s;  animation-duration: 6.0s; -webkit-animation-duration: 6.0s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}

@-webkit-keyframes main-pc-vis3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -98%, 0);
    transform: translate3d(0, -98%, 0);
  }
  25% {
    opacity: 1;
    -webkit-transform: translate3d(0, -98%, 0);
    transform: translate3d(0, -98%, 0);
  }
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -98%, 0);
    transform: translate3d(0, -98%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes main-pc-vis3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -98%, 0);
    transform: translate3d(0, -98%, 0);
  }
  25% {
    opacity: 1;
    -webkit-transform: translate3d(0, -98%, 0);
    transform: translate3d(0, -98%, 0);
  }
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -98%, 0);
    transform: translate3d(0, -98%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.sc-main .catch1{ width: calc( (35 / 2400) * 100% ); position: absolute; top:20%; left: 47%;}
.sc-main .catch1 > img{ /*  animation-delay: 0.5s; animation-duration: 2s; -webkit-animation-delay: 0.5s; -webkit-animation-duration: 2s; */}
.sc-main .catch2{ width: calc( (39 / 2400) * 100% ); position: absolute; top:26%; left: 45%;}
.sc-main .catch2 > img{ /*  animation-delay: 0.8s; animation-duration: 2s; -webkit-animation-delay: 0.8s; -webkit-animation-duration: 2s; */}


/* Movie */
.sc-movie{ width: 100%; position: relative; margin-bottom: 1em; background-color: rgba(255,255,255,.9); }
.sc-movie > .inner{ max-width: 1100px; margin: 0 auto; position: relative; }
.movie-container > div{ text-align: center; }
.movie-csr-l,.movie-csr-r{ display: block; width: 2.2em; position: absolute; top:0em; }
.movie-csr-r{ right: 0; }
/*
.movie-container{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding-top: .5em; }
.movie-container > div{ width: 31%; margin: 0 1%; text-align: center; }
.movie-container > div a{ display: block; padding: .4%;}
.movie-csr-l,.movie-csr-r{ display: none; }
*/
/*
.sc-movie .spc{ width: 100%; max-width: 800px; margin: 0 auto; }
.movie-container{ width: 100%; max-width: 800px; margin: 0 auto; text-align: center; position: absolute; top:-210%; left: 0; right: 0;}
*/

/* News Twitter */
.news-twitter{ background-color: rgba(255,255,255,.7); margin-bottom: 1em; }
.news-twitter > .inner{ width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.news-twitter a,
.news-twitter a:visited{ text-decoration: none;color: #000; }
.sc-news{ width: 60.0%; padding: 2em 1em; }
.sc-twitter{ width: 40.0%; padding: 2em 1em; }
/*
.news-container{ height: calc( 200px - 1.222em ); }
.twitter-container{ height: 200px; }
.news-headline { height: calc( 200px - 1.222em ); overflow-y: auto;}
*/
.news-headline dl{ font-size: 1.0em; margin: 0 0 .9em 0;}
.news-headline dl:last-child{ margin: 0;}
.news-headline dl dt{ font-size: 0.666em; font-weight: normal; margin-bottom: .1em; letter-spacing: 0.05em;  }
.news-headline dl dd{ font-size: 0.777em; line-height: 1.4; }
.news-headline dl dd a,
.news-headline dl dd a:visited{ text-decoration: none;color: #000; }
.news-headline dl dd a:hover{ text-decoration: underline; }
.news-more{ font-size: 0.666em; margin-bottom: 0;}

.intro-story-chara{}
.intro-story-chara .inner{ position: relative; }

/* Intro */
/*
.sc-intro{ width: 100%; position: relative; }
.sc-intro > .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 2em; }
.intro-container{ background: #fff url(../images/teaser/top-intro-bg.png) no-repeat center center; background-size: 100% auto; box-shadow:0px 0px 1.5em 0px #57a0c2; }
.intro-container .catch{ color: #508ad6; text-align: center; padding: 2em 0; margin: 0 auto; }
.intro-container .catch .dash{ letter-spacing: -.3em; }
.intro-container .body{ text-align: center; padding: 0 0 2em 0; margin: 0 auto; line-height: 2.5; }
*/
.intro-bg-l{ background: #fff url(../images/intro-bg-l.jpg) no-repeat left top; background-size: 33.33em auto; }
.intro-bg-r{ background: url(../images/intro-bg-r.jpg) no-repeat right bottom; background-size: 33.33em auto; }
.sc-intro{ width: 100%; position: relative; }
.sc-intro > .inner{ width: 100%; margin: 0 auto; padding:0 2em; }
.intro-container{ text-align: center; line-height: 2; padding: 2em 0 8vw 0; }
.intro-sep{ width: calc( (24 / 18) * 1em ); height: calc( (29 / 18) * 1em ); background: url(../images/intro-sep.png) no-repeat center center; background-size: contain; margin: 0 auto 1em auto; }

.icesep-upper{ position: relative; height: 0px;pointer-events: none;}
.icesep-upper .inner{  position: absolute; top:-14vw; z-index: 2;}
.icesep-upper .inner img{ width: 100vw; height: auto;}

/* Story */
.sc-story{ width: 100%; position: relative; background: #fff url(../images/story-bg.jpg) no-repeat center top; background-size: cover; }
.sc-story > .inner{ width: 100%; max-width: 1000px; margin: 0 auto; padding: 1em; }
.story-container{ padding: 2em 1em 8vw 1em; }
.story-copy{ color: #9485c7; font-size: 1.333em; text-shadow:1px 1px 2px #fff; text-align: center; margin-bottom: 2em; }
.story-text{ line-height: 2; font-size: 1.111em; text-shadow:1px 1px 0px #fff; text-align: center; letter-spacing: .1em; margin-bottom: 1.5em;}

.story-fig{ display: flex; flex-wrap: wrap; justify-content: center; }
.story-fig > div{ width: 24%; padding: .5% ; }

.icesep-mid{ position: relative; height: 0px;pointer-events: none;}
.icesep-mid .inner{  position: absolute; top:-16.1vw; z-index: 2;}
.icesep-mid .inner img{ width: 100vw; height: auto;}

/* Character */
.sc-character{ width: 100%; position: relative; background: #fff url(../images/character-bg.jpg) no-repeat center top; background-size: cover; }
.sc-character > .inner{ width: 100%; margin: 0 auto; padding: 1em; background: url(../images/character-bg-btm.png) no-repeat center bottom; background-size: contain; }
.character-container{ padding: 2em 1em 4vw 1em; position: relative; }
.chara-fig{ max-width: 1100px; margin: 0 auto; }
.chara-1{ width: 17em; position: absolute; top:8em; left: calc( 50vw - 17em - 12.0em ); }
.chara-2{ width: 17em; position: absolute; top:11.5em; left: calc( 50vw + 10em ); }
.character-container .name{ font-size: 1.222em; margin-bottom: .5em; text-align: center; }
.character-container .text{ font-size: 1.111em; text-shadow:1px 1px 0px #fff; }

.icesep-btm{ position: relative; height: 0px;pointer-events: none;}
.icesep-btm .inner{  position: absolute; top:-18.3vw; z-index: 2;}
.icesep-btm .inner img{ width: 100vw; height: auto;}

/* Staffcast */
.sc-staffcast{ width: 100%; background: rgba(255,255,255,.7) url(../images/staffcast-bg.png) no-repeat center top; background-size: cover; }
.sc-staffcast > .inner{ width: 100%; margin: 0 auto;  }
.staff-list{ display: flex; flex-wrap: wrap; width: 100%; max-width: 1100px; margin: 0 auto; }
.staff-list > .staff{ width: 66%; padding: 2em 1em; }
.staff-list > .cast{ width: 33%; padding: 2em 1em; }
.staff-list > .staff .staff-col{ display: flex; flex-wrap: wrap;}
.staff-list > .staff .staff-col > div{ width: 50%; }
.staff-list p{font-size: 0.666em; line-height: 2;}

/* Bddvd */
.sc-bddvd{ width: 100%; position: relative; }
.sc-bddvd > .inner{ width: 100%; margin: 0 auto;  }
.sc-bddvd > .nav-pad{  }
.bddvd-container{ width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; padding: 2em 0; display: flex; flex-wrap: wrap; justify-content: center;}
.bddvd-container > div{ width: 32%; margin-right: 2%; margin-bottom: 2%; }
.bddvd-container > div:nth-child(3){ margin-right: 0; }
.bddvd-container > div a{ display: block; padding: 1.0em .5em; background-color: rgba(255,255,255,1); }

.bddvd-container > div.cmpbtn{ padding: 0 1em; }
.bddvd-container > div.cmpbtn a{ border: #000 solid 2px; color: #000; font-weight: bold; }
.bddvd-container > div.cmpbtn p{ margin-bottom: 0; }
.bddvd-container > div.cmpbtn p:before{ content:"> "; }

/* Music */
.sc-music{ width: 100%; }
.sc-music > .inner{ width: 100%; margin: 0 auto; background-color: rgba(255,255,255,.7); }
.sc-music > .nav-pad{ background-color: rgba(255,255,255,.7); }
.music-container{ width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; padding: 2em 0;}

/* Ticket */
.sc-ticket{ width: 100%; position: relative; }
.sc-ticket > .inner{ width: 100%; margin: 0 auto; }
.ticket-list{ width: 100%; max-width: 1100px; margin: 0 auto; padding: 2em 0; background-color: rgba(255,255,255,.0); }
.ticket-list-thm{  }


/* Novelty */
.sc-novelty{ width: 100%; position: relative; }
.sc-novelty > .inner{ width: 100%; margin: 0 auto; background: rgba(178,215,237,.8) url(../images/common-ptn-snow.png) ;  background-size: 16em; }
.novelty-list{ width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; padding: 2em 0; }
.novelty-list-col > .inner{ background-color: #FFF; }
.novelty-list-thm{  }


/* Theater */
.sc-theater{ width: 100%;  }
.sc-theater > .inner{ width: 100%; margin: 0 auto; background-color: rgba(255,255,255,.7); }
.sc-theater > .nav-pad{ background-color: rgba(255,255,255,.7); }
.theater-container{ width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; padding: 2em 0; }


/* GOODS */
.goods-container{ width: 100%; max-width: 1100px; margin: 0 auto; }

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {

}
/* Custom 1440 ----------------------------------------------------------------------------- */
@media (max-width: 1439px) {

}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {

}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
.pc-dur1{ animation-duration: 1.0s;}


/* ---- Structure ---- */
body{  } 
.wrapper{ background:url(../images/common-bgkv2-sp.png) no-repeat center 2em; background-size: 100%;}
header{ position: fixed; z-index: 10; background-color: rgba(255,255,255,.9); }
.hd-spc{ display: block; }
.page-title{ padding: 2.5em 0 0 0; }
.ft-banner{ flex-wrap: wrap;}
.ft-banner > div{ width: 90%; margin: .5em 0; }

/* navi */
nav.global-navi{ display: none; }
nav.global-navi-sp{ display: flex; }


/*  entry */
.entry-container{ padding: 1em;}
.sc-content-entry{ margin-bottom: 1em; }
.single-container{ /* width: 90%; */ }
.sc-content-single{ padding: 1em; margin-bottom: 1em; }

/* Top */
#Page_Top header{ position: fixed; background-color: rgba(255,255,255,.95); z-index: 10; }
#Page_Top.less-scrl header{ background: none; }
#Page_Top.less-scrl nav.global-navi-sp{ justify-content: flex-end; }
#Page_Top.less-scrl nav.global-navi-sp .logo{ display: none; }
#Page_Top.less-scrl nav.global-navi-sp .onair{ display: none; }

#Page_Top.less-scrl header.on{ background-color: rgba(255,255,255,.95); }
#Page_Top.less-scrl header.on nav.global-navi-sp{ justify-content: flex-end; }
#Page_Top.less-scrl header.on nav.global-navi-sp .logo{ display: block; }
#Page_Top.less-scrl header.on nav.global-navi-sp .onair{ display: block; }



.sc-main{ }
.sc-main > .inner{ position: relative; }
.sc-main .vis-grp{ position: relative; overflow: hidden; }
.sc-main .spc{ position: relative; }
.sc-main .vis3{ position: absolute; top:0; }
.sc-main .vis{ position: absolute; top:0; }
.sc-main .catch1{ width: calc( (35 / 1200) * 100% ); position: absolute; top:2%; left: 49%;}
.sc-main .catch2{ width: calc( (39 / 1200) * 100% ); position: absolute; top:7.5%; left: 45%;}
.sc-main .onair{ width: 100%; position: absolute; bottom:0; }
.sc-main .logo{ width: 100%; position: absolute; bottom:10%; }


/* Movie */
.sc-movie{ width: 100%; position: relative; margin-bottom: 1em; background-color: rgba(255,255,255,.9); }
.sc-movie > .inner{ width: 100%; margin: 0 auto; position: relative; }

.movie-container{ display: block; /* width: calc( 100vw - 4em ); */  margin: 0 auto; padding-top: .5em; }
.movie-container > div{ width: inherit; margin: inherit; text-align: center; }
.movie-container > div a{ display: block; padding: .4%;}
.movie-csr-l,.movie-csr-r{ display: block; width: 2.2em; position: absolute; top:0.8em; }
.movie-csr-r{ right: 0; }
/* .movie-container > div{ width: 78%; margin: 0 1%; } */
/*
.sc-movie{ width: 90%; margin: 0 auto; position: relative; margin-bottom: 6em; }
.movie-container{  top:-130%; }
*/

/* News Twitter */
.sc-news{ width: 100.0%; padding: 2em 2em 0 2em; }
.sc-twitter{ width: 100.0%; padding: 2em 2em; }
.news-container{ height: inherit; }
.twitter-container{ height: inherit; }
.news-headline { height: inherit; overflow-y: inherit;}

.news-headline dl dt{ font-size: 0.777em; }
.news-headline dl dd{ font-size: 0.888em;}
.news-more{ font-size: 0.777em; }

.intro-story-chara{}
.intro-story-chara .inner{ position: relative; }

/* Intro */
/*
.sc-intro{ }
.sc-intro > .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.5em; }
.intro-container{ background-position: center bottom; background-size: auto 100%; }
*/
.sc-intro{ padding-top: 1em; }
.intro-bg-l{ background: #fff ; }
.intro-bg-r{ background: url(../images/intro-bg-sp.jpg) no-repeat left top; background-size: 100% auto; }
.intro-container{ text-align: center; line-height: 2; padding: 10.5em 1em 8vw 1em; }

/* Story */
.sc-story{ width: 100%; position: relative; background: #fff url(../images/story-bg-sp.jpg) no-repeat center top; background-size: cover; }

.story-container{ padding: 2em 1em 8vw 1em; }
.story-copy{ font-size: 1.111em; margin-bottom: 1em; }
.story-copy > span.c1{ display: block; padding-right: 4em; }
.story-copy > span.c2{ display: block; padding-left: 4em; }
.story-text{ line-height: 2; text-shadow:1px 1px 0px #fff; }

.story-fig > div{ width: 46%; padding: 2% ; }

/* Character */
.sc-character > .inner{ padding: 0 0 1em 0; }
.character-container{ padding: 1em 0 11vw 0; position: relative; }
.chara-fig{ max-width: 896px; margin: 0 auto; }
/*
.chara-1{ width:19.5em; position: absolute; text-align: left; top:16.5em; left: 6.0em; }
.chara-2{ width:14em; position: absolute; text-align: left; top:5.5em; left: 11.5em; }
*/
.chara-1{ width:20em; position: absolute; text-align: left; top:15.0em; left: 5.5em; }
.chara-2{ width:20em; position: absolute; text-align: left; top:5.5em; left: 5.5em; }
.character-container .name{ font-size: 1.222em; margin-bottom: 0; text-align: right; }
.character-container .text{ font-size: .888em; text-shadow:1px 1px 0px #fff; text-align: right; }

/* Staffcast */
.staff-list > .staff{ width: 100%; padding: 2em 2em 0 2em; }
.staff-list > .cast{ width: 100%; padding: 2em 2em; }
.staff-list > .staff .staff-col > div{ width: 100%; }
.staff-list p{ font-size: 0.888em; line-height: 2;}

/* Bddvd */

.bddvd-container{ width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; padding: 2em 0; display: flex; flex-wrap: wrap;}
.bddvd-container > div{ width: calc(100% - 4em ); margin-right: 0%; margin: 0 auto; margin-bottom: 1em; }
.bddvd-container > div:nth-child(3){ margin-right: auto; }
.bddvd-container > div a{ display: block; padding: 1.0em .5em; background-color: rgba(255,255,255,.8); }

/* Music */
.music-container{  padding: 2em 2em; }

/* Ticket */
.ticket-list{ width: 100%; padding: 1em; margin: 0 auto; }
.ticket-list-thm{  }

/* Novelty */
.novelty-list{ width: 100%; padding: 3em; margin: 0 auto; }
.novelty-list-thm{  }

/* Theater */
.theater-container{  padding: 2em 1em; }

/* GOODS */
.goods-container{ padding: 1em; }

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

   ■           ■                  ■   ■              
   ■                              ■                  
  ■ ■   ■■■■   ■  ■■■ ■■■   ■■■  ■■■■ ■   ■■■   ■■■■ 
  ■ ■   ■■  ■  ■  ■  ■■  ■  ■  ■  ■   ■  ■■ ■■  ■■  ■
 ■   ■  ■   ■  ■  ■  ■   ■   ■■■  ■   ■  ■   ■  ■   ■
 ■■■■■  ■   ■  ■  ■  ■   ■ ■■  ■  ■   ■  ■   ■  ■   ■
 ■   ■  ■   ■  ■  ■  ■   ■ ■   ■  ■   ■  ■■ ■■  ■   ■
■     ■ ■   ■  ■  ■  ■   ■  ■■■■  ■■  ■   ■■■   ■   ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/

@-webkit-keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownSM {
  -webkit-animation-name: fadeInDownSM;
  animation-name: fadeInDownSM;
}

@-webkit-keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSM {
  -webkit-animation-name: fadeInUpSM;
  animation-name: fadeInUpSM;
}