@charset 'UTF-8';
/*============================================================キャンペーンページ PC用============================================================*/
/*----------変数----------*/
/*----------フォント----------*/
/* ゴシック */
section,
section.related h3 div.date,
section.glovalNavi ul li p.menu-jp {
    font-family: 'Noto Sans JP', sans-serif;
}

/* 明朝 */
section.main-header div.ttl,
section h3,
section.character ul li.cha-box p.main-name,
section.character ul li.cha-box p.sub-name {
    font-family: ‘游明朝’, YuMincho, ‘ヒラギノ明朝 ProN W3’, ‘HiraMinProN-W3’, ”メイリオ”, Meiryo, serif;
}

/* セリフ */
section.glovalNavi ul li p.menu-en {
    font-family: 'Taviraj', serif;
}

/*----------アンカーの微調整----------*/ 
 section#trailer,
 section#intro,
 section#story,
 section#character,
 section#related {
     margin-top: -10px;
     padding-top: 10px;
 }
 
 p.btnHonpen a {
     font-size: 33px;
     line-height: 84px;
     position: relative;
     display: block;
     box-sizing: border-box;
     width: 633px;
     margin: 0 auto;
     margin-bottom: 30px;
     padding-right: 32px;
     text-align: center;
     color: #fff;
     border-radius: 9px;
     background-color: #ac1e25;
     box-shadow: 0 8px 0 0 #86161c;
 }
 
 p.btnHonpen a:hover {
     -webkit-transform: translateY(3px);
     transform: translateY(3px);
     box-shadow: 0 5px 0 #40332c;
 }
 
 p.btnHonpen a:before {
     position: absolute;
     top: 32px;
     right: 30px;
     display: inline-block;
     width: 18px;
     height: 18px;
     content: '';
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     border-top: 4px solid #fff;
     border-right: 4px solid #fff;
 }
 
 .sp p.btnHonpen a {
     width: 80%;
     margin-bottom: 3%;
     padding-right: 1em;
     font-size: 5vw;
     line-height: 3;
     box-shadow: 0 3px 0 0 #86161c;
     margin: 3% auto 2%;
 }
 
 .sp p.btnHonpen a:before {
     position: absolute;
     top: 6vw;
     right: 5vw;
     display: inline-block;
     width: 10px;
     height: 10px;
     content: '';
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     border-top: 2px solid #fff;
     border-right: 2px solid #fff;
     letter-spacing: 2px;
 }
 
 .sp p.btnHonpen a:hover {
     -webkit-transform: translateY(2px);
     transform: translateY(2px);
     box-shadow: 0 1px 0 #40332c;
 }
 
 .sp img {
     width: 100%;
 }
 /*----------body----------*/
 
 body .container {
     padding-bottom: 3%;
     background: #fef6f5 url(/static/cpn/ffm000035/img/bg-img.jpg) center 0 repeat;
 }
 
 body .container a:hover,
 body .container a:active {
     text-decoration: none;
     -webkit-filter: brightness(110%);
     filter: brightness(110%);
 }
 /*----------main-header----------*/
 
 section.main-header {
     margin: 0 auto;
     text-align: center;
 }
 
 section.main-header div.ttl {
     font-size: 30px;
     padding: 10px;
     color: #fff;
     border-bottom: solid 5px #b28936;
     background: #ac1e25;
 }
 
 .sp section.main-header {
     margin: 0 auto;
     text-align: center;
 }
 
 .sp section.main-header div.ttl {
     font-size: 6vw;
     padding: 10px;
     color: #fff;
     border-bottom: solid 5px #b28936;
     background: #ac1e25;
 }
 /*----------glovalNavi----------*/
 
 section.glovalNavi {
     /* /ul */
 }
 
 section.glovalNavi ul {
     width: 970px;
     margin: 20px auto 50px;
     margin-top: 20px;
     text-align: center;
     /* /li */
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-pack: distribute;
     justify-content: space-around;
 }
 
 section.glovalNavi ul li {
     font-size: 25px;
     display: inline-block;
     margin: 0 15px;
     /* /color */
 }
 
 section.glovalNavi ul li p.menu-en {
     font-size: 25px;
     border-bottom: #b28936 3px solid;
 }
 
 section.glovalNavi ul li p.menu-jp {
     font-size: 14px;
     margin-top: 5px;
 }
 
 section.glovalNavi ul li p.menu-jp span {
     margin-left: 5px;
 }
 
 section.glovalNavi ul li a {
     text-decoration: none;
     color: #b28936;
     /* /hover */
 }
 
 section.glovalNavi ul li a:hover {
     text-decoration: none;
     color: rgba(178, 137, 54, .5);
 }
 
 section.glovalNavi ul li a:hover p.menu-en {
     font-size: 25px;
     border-bottom: rgba(178, 137, 54, .5) 3px solid;
 }
 
 section.glovalNavi ul li a:hover p.menu-jp {
     font-size: 14px;
     margin-top: 5px;
 }
 
 section.glovalNavi ul li a:hover p.menu-jp span {
     margin-left: 5px;
 }
 /* /section */
 /*----------ttl----------*/
 
 section h2 {
     width: 970px;
     margin: 0 auto;
     margin: 40px auto 50px;
     text-align: left;
     color: #b28936;
     border-bottom: #b28936 5px solid;
 }
 
 section h2 img {
     margin-bottom: -10px;
 }
 
 section h2 .large-ttl {
     font-family: 'Taviraj', serif;
     font-size: 30px;
     display: inline-block;
 }
 
 section h2 .small-ttl {
     font-size: 14px;
     display: inline-block;
 }
 
 .sp section h2 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 100%;
     margin: 6% auto 4%;
     padding-bottom: 1vw;
     text-align: center;
     border-bottom: #b28936 5px solid;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }
 
 .sp section h2 img {
     width: 16vw;
     margin-bottom: 0;
 }
 
 .sp section h2 .large-ttl {
     font-family: 'Taviraj', serif;
     font-size: 5vw;
     line-height: 1.5;
     display: inline-block;
     display: block;
     padding: 0 2vw;
 }
 
 .sp section h2 .small-ttl {
     font-size: 3vw;
     line-height: 2;
     display: inline-block;
     margin-bottom: 0;
 }
 
 section h3 {
     font-size: 32px;
     width: 970px;
     margin: 0 auto 30px;
     text-align: center;
     color: #fff;
 }
 
 .pc section#intro h3 br {
     display: none;
 }
 
 .sp section h3 {
     font-size: 4.4vw;
     width: 100%;
     margin: 0 auto 4%;
     text-align: center;
     color: #fff;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(7) .flame p.main-name {
     padding-top: 6vw;
 }
 
 section div.sub-img {
     margin: 0 3% 0;
     text-align: center;
 }
 
 .sp section div.sub-img img {
     width: 100%;
     margin: 0 auto 0;
     text-align: center;
 }
 
 .sp section.present h3 br {
     display: none;
 }
 
 .sp section.present p.atten {
     font-size: 4vw;
     padding: 1%;
     margin-bottom: 3vw;
 }
 
 .sp p.redBtn a {
     font-size: 5vw;
     line-height: 2.6;
     display: block;
     box-sizing: border-box;
     width: 86%;
     margin: 0 auto 6%;
     text-align: center;
     letter-spacing: 1px;
     color: #fff;
     border-width: 3px;
     border-style: solid;
     border-color: #b28936;
     background-color: #ac1e25;
 }
 
 .sp ul.pre {
     width: 98%;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }
 
 .sp ul.pre li {
     font-size: 3.2vw;
     font-weight: 700;
     position: relative;
     width: 49vw;
     margin-bottom: 4%;
     text-align: left;
     letter-spacing: .8px;
     color: #fefefe;
 }
 
 .sp span.imgflame {
     display: inline-block;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 39vw;
     height: 46vw;
     margin: 0 auto 10%;
     text-align: center;
     background: #fff;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }
 
 .sp ul.pre li:last-of-type span.imgflame img {
     width: auto;
     height: 18vmax;
 }
 
 .sp ul.pre li small {
     font-size: 3vw;
     position: absolute;
     top: 0;
     right: 5vw;
     width: 4em;
     border-width: 2px;
 }
 
 section div.read-text {
     font-size: 14px;
     line-height: 2;
     width: 920px;
     margin: 25px auto;
     text-align: center;
     text-align: left;
     color: #fff;
 }
 
 section div.read-text p {
     margin-bottom: 15px;
 }
 
 .sp section div.read-text {
     font-size: 4.2vw;
     line-height: 1.5;
     width: 94%;
     margin: 25px auto;
     text-align: center;
     text-align: left;
     color: #fff;
 }
 
 .sp section div.read-text p {
     margin-bottom: 2vw;
 }
 /*----------CHARACTER & CAST----------*/
 
 section.character {
     width: 970px;
     margin: 0 auto;
     /* /ul */
 }
 
 section.character ul {
     display: inline-block;
     /* /li.cha-box */
 }
 
 section.character ul li.cha-box {
     position: relative;
     display: inline-block;
     overflow: hidden;
     box-sizing: border-box;
     box-sizing: border-box;
     width: 900px;
     margin-bottom: 30px;
     border-radius: 5px;
     background: #fff;
     background: #fff url(/static/cpn/ffm000035/img/flame.png) 98% 28% no-repeat;
 }
 
 section.character ul li.cha-box:before {
     position: absolute;
     z-index: 10;
     top: -3px;
     left: 3px;
     display: inline-block;
     width: 25px;
     height: 73px;
     content: '';
     -webkit-transform: skew(-47deg);
     -moz-transform: skew(-47deg);
     -o-transform: skew(-47deg);
     background: #ac1e25;
 }
 
 section.character ul li.cha-box .flame {
     min-height: 146px;
     padding: 25px 35px 25px 207px;
     border: solid 3px #b28936;
     background: url(/static/cpn/ffm000035/img/bell.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-of-type(2) .flame {
     background: url(/static/cpn/ffm000035/img/beast.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-of-type(3) .flame {
     background: url(/static/cpn/ffm000035/img/gaston.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-of-type(4) .flame {
     background: url(/static/cpn/ffm000035/img/lefou.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-of-type(5) .flame {
     background: url(/static/cpn/ffm000035/img/lumiere.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-of-type(6) .flame {
     background: url(/static/cpn/ffm000035/img/cogsworth.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-of-type(7) .flame {
     background: url(/static/cpn/ffm000035/img/potts_and_chip.png) 35px center no-repeat;
 }
 
 section.character ul li.cha-box:nth-child(odd) {
     /* margin-right: 30px; */
     /* margin-left: 20px; */
 }
 
 section.character ul li.cha-box p.main-name {
     font-size: 18px;
     line-height: 1.5;
     color: #575757;
 }
 
 section.character ul li.cha-box p.main-name span {
     font-size: 26px;
     letter-spacing: 2px;
 }
 
 section.character ul li.cha-box p.sub-name {
     font-size: 18px;
     font-weight: bold;
     line-height: 1.5;
     margin-bottom: 20px;
     color: #575757;
 }
 
 section.character ul li.cha-box:nth-of-type(7) .flame p.sub-name {
     margin-bottom: 0;
 }
 
 section.character ul li.cha-box p.sub-name span {
     font-weight: normal;
 }
 
 section.character ul li.cha-box p.read {
     font-size: 14px;
     line-height: 1.8;
     padding-bottom: 10px;
     letter-spacing: -1px;
     color: #575757;
 }
 
 section.character ul li.cha-box a {
     font-size: 18px;
     text-decoration: underline;
     letter-spacing: 1.35px;
     color: #b28936;
 }
 
 section.character ul li.cha-box a:hover {
     text-decoration: none;
 }
 
 section.present h3 {
     line-height: 1.8;
 }
 
 section.present p.limi {
     font-size: 21px;
     line-height: 45px;
     width: 572px;
     margin: 0 auto 36px;
     text-align: center;
     letter-spacing: 1px;
     color: #b28936;
     border-top: 3px solid #b28936;
     border-bottom: 3px solid #b28936;
 }
 
 .pc section.present p.limi br {
     display: none;
 }
 
 .sp section#character .large-ttl {
     font-size: 4vw;
     padding: 0 1vw;
 }
 
 .sp section.present p.limi {
     font-size: 5vw;
     line-height: 2;
     width: 90%;
     margin: 0 auto 3%;
     text-align: center;
     color: #b28936;
     border-top: 1px solid #b28936;
     border-bottom: 1px solid #b28936;
 }
 
 section.present p.atten {
     font-size: 16px;
     font-weight: 400;
     line-height: 1.25;
     margin-bottom: 19px;
     text-align: center;
     letter-spacing: 1px;
     color: #fff;
 }
 
 p.redBtn a {
     font-size: 30px;
     line-height: 64px;
     display: block;
     box-sizing: border-box;
     width: 766px;
     margin: 0 auto 44px;
     text-align: center;
     color: #fff;
     border-width: 3px;
     border-style: solid;
     border-color: #b28936;
     background-color: #ac1e25;
 }
 
 ul.pre {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 902px;
     margin: 0 auto;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
 }
 
 ul.pre li {
     font-size: 16px;
     font-weight: 700;
     position: relative;
     width: 428px;
     margin-bottom: 22px;
     text-align: left;
     letter-spacing: .8px;
     color: #fefefe;
 }
 
 ul.pre li small {
     font-size: 13.99px;
     font-weight: 700;
     line-height: 1.5;
     position: absolute;
     right: 0;
     display: inline-block;
     width: 98px;
     text-align: center;
     letter-spacing: .7px;
     color: #b28936;
     border-width: 2px;
     border-style: solid;
     border-color: #b28936;
 }
 
 span.imgflame {
     display: inline-block;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 428px;
     height: 364px;
     margin-bottom: 17px;
     text-align: center;
     background: #fff;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }
 
 p.copyright {
     padding-top: 4%;
     text-align: center;
     color: #ddd;
 }
 /* /section.character */
 
 .sp section.character {
     width: 100%;
     margin: 0 auto;
     /* /ul */
 }
 
 .sp section.character ul {
     display: inline-block;
     text-align: center;
     /* /li.cha-box */
 }
 
 .sp section.character ul li.cha-box {
     width: 94%;
     margin-bottom: 5%;
     text-align: left;
 }
 
 .sp section.character ul li {
     background: #fff url(/static/cpn/ffm000035/img/flame.png) 98% 2% no-repeat;
     background-size: 22vw;
 }
 
 .sp section.character ul li.cha-box:before {
     position: absolute;
     z-index: 10;
     top: -3px;
     left: 3px;
     display: inline-block;
     width: 7vw;
     height: 14vw;
     content: '';
     -webkit-transform: skew(-47deg);
     -moz-transform: skew(-47deg);
     -o-transform: skew(-47deg);
     background: rgba(172, 30, 37, .83);
 }
 
 .sp section.character ul li.cha-box p.deco {
     position: absolute;
     top: -3px;
     left: -10px;
     width: 25px;
     height: 73px;
     -webkit-transform: skew(-47deg);
     -moz-transform: skew(-47deg);
     -o-transform: skew(-47deg);
     background: #ac1e25;
 }
 
 .sp section.character ul li.cha-box p.main-name {
     font-size: 5vw;
     font-weight: bold;
     line-height: 1.5;
     padding-left: 33vw;
     color: #575757;
 }
 
 .sp section.character ul li.cha-box p.main-name span {
     font-size: 6vw;
     display: block;
     letter-spacing: 2px;
 }
 
 .sp section.character ul li.cha-box p.sub-name {
     font-size: 18px;
     font-weight: bold;
     line-height: 1.5;
     margin-bottom: 2vw;
     padding-left: 33vw;
     color: #575757;
 }
 
 .sp section.character ul li.cha-box p.sub-name br {
     display: none;
 }
 
 .sp section.character ul li.cha-box a {
     font-size: 5.2vw;
     display: block;
     text-decoration: underline;
     letter-spacing: 0;
     color: #b28936;
 }
 
 .sp section.character ul li.cha-box p.sub-name span {
     font-size: 4vw;
     font-weight: normal;
 }
 
 .sp section.character ul li.cha-box p.read {
     font-size: 14px;
     line-height: 1.8;
     color: #575757;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(7) .flame p.sub-name {
     font-size: 5vw;
     margin-top: 10vw;
     padding-left: 1vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(7) .flame p.sub-name:nth-of-type(4) {
     margin-top: 0;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(7) .flame p.sub-name br {
     display: none;
 }
 /* /section.character */
 /*----------------------------------------------
    related
----------------------------------------------*/
 
 section.related {
     overflow: hidden;
     width: 970px;
     margin: 0 auto;
     /* /h3 */
     /* /ul */
 }
 
 section.related h3 {
     margin-bottom: 30px;
     /* /div.date */
 }
 
 section.related h3 p.ttl {
     display: inline-block;
     margin-top: 30px;
     text-align: left;
     vertical-align: top;
 }
 
section.related h3 p.ttl span.off {
    color: #fff;
    text-shadow: 0px 3px 1px #ac1e25, 0px 2px 1px #ac1e25, 1px 2px 1px #ac1e25, 2px 2px 1px #ac1e25, 2px 1px 1px #ac1e25, 2px 0px 1px #ac1e25, 3px 0px 1px #ac1e25, 2px -1px 1px #ac1e25, 2px -2px 1px #ac1e25, 2px -3px 1px #ac1e25, 1px -3px 1px #ac1e25, 0px -3px 1px #ac1e25, -1px -3px 1px #ac1e25, -2px -3px 1px #ac1e25, -3px -3px 1px #ac1e25, -3px -2px 1px #ac1e25, -3px -1px 1px #ac1e25, -3px 0px 1px #ac1e25, -3px 1px 1px #ac1e25, -3px 2px 1px #ac1e25, -2px 2px 1px #ac1e25, -1px 2px 1px #ac1e25;
    -webkit-filter: dropshadow(color=#ac1e25,offx=0,offy=3,positive=1),dropshadow(color=#ac1e25,offx=2,offy=1,positive=1),dropshadow(color=#ac1e25,offx=2,offy=-1,positive=1),dropshadow(color=#ac1e25,offx=1,offy=-3,positive=1),dropshadow(color=#ac1e25,offx=-2,offy=-3,positive=1),dropshadow(color=#ac1e25,offx=-3,offy=-2,positive=1),dropshadow(color=#ac1e25,offx=-3,offy=1,positive=1),dropshadow(color=#ac1e25,offx=-1,offy=2,positive=1);
    filter: dropshadow(color=#ac1e25,offx=0,offy=3,positive=1),dropshadow(color=#ac1e25,offx=2,offy=1,positive=1),dropshadow(color=#ac1e25,offx=2,offy=-1,positive=1),dropshadow(color=#ac1e25,offx=1,offy=-3,positive=1),dropshadow(color=#ac1e25,offx=-2,offy=-3,positive=1),dropshadow(color=#ac1e25,offx=-3,offy=-2,positive=1),dropshadow(color=#ac1e25,offx=-3,offy=1,positive=1),dropshadow(color=#ac1e25,offx=-1,offy=2,positive=1);
    font-weight: bold;
    font-size: 42px;
    font-size: 50px;
}
 
 section.related h3 div.date {
     position: relative;
     display: inline-block;
     width: 133px;
     height: 133px;
     border: 3px solid #b28936;
     border-radius: 170px;
     background: #ac1e25;
     /* /p.posi */
 }
 
 section.related h3 div.date p.posi {
     line-height: .8;
     position: absolute;
     top: 40px;
     left: 4px;
 }
 
 section.related h3 div.date p.posi span {
     font-size: 20px;
 }
 
 section.related ul {
     margin-bottom: 60px;
     /* /li */
 }
 
 section.related ul li {
     display: inline-block;
     width: 200px;
     height: 340px;
     margin: 10px 40px 20px 0;
     text-align: center;
     vertical-align: top;
     /* /a */
 }
 
 section.related ul li a img {
     margin-bottom: 10px;
 }
 
 section.related ul li a span {
     font-size: 16px;
     color: #fff;
 }
 
 section.related ul li a:hover {
     text-decoration: none;
     opacity: .6;
 }
 
 section.related ul li:nth-child(1),
 section.related ul li:nth-child(5),
 section.related ul li:nth-child(9),
 section.related ul li:nth-child(13),
 section.related ul li:nth-child(17),
 section.related ul li:nth-child(21),
 section.related ul li:nth-child(25),
 section.related ul li:nth-child(29) {
     margin-left: 20px;
 }
 
 section.related ul li:nth-child(4),
 section.related ul li:nth-child(8),
 section.related ul li:nth-child(12),
 section.related ul li:nth-child(16),
 section.related ul li:nth-child(20),
 section.related ul li:nth-child(24),
 section.related ul li:nth-child(28),
 section.related ul li:nth-child(32) {
     margin-right: 0;
 }
 
 section.related p.copyright {
     font-size: 12px;
     line-height: 1.5;
     margin: 0 auto 60px;
     text-align: center;
     color: #fff;
 }
 /* /section.related */
 
 .sp section.related {
     width: 100%;
     /* /h3 */
     /* /ul */
 }
 
 .sp section.related h3 {
     margin-bottom: 10%;
     /* /div.date */
 }
 
 .sp section.related h3 p.ttl {
     font-size: 24px;
     margin-top: 0;
     font-size: 6vw;
     text-align: center;
 }
 
 .sp section.related h3 div.date {
     font-size: 22px;
     width: 100px;
     height: 100px;
     /* /p.posi */
 }
 
 .sp section.related h3 div.date p.posi {
     line-height: 1;
     top: 7vw;
     left: 0;
     /* font-weight: normal; */
     font-size: 20px;
     width: 100px;
     height: 100px;
     text-align: center;
 }
 
 .sp section.related h3 div.date p.posi span {
     font-size: 80%;
 }
 
 .sp section.related ul {
     margin-bottom: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
 }
 
 .snapshot .control.active {
     opacity: .3;
 }
 
 .sp section.related ul li {
     display: inline-block;
     width: 31%;
     height: 100%;
     margin: 0 1% 10% 1%;
     text-align: center;
     vertical-align: top;
     /* /a */
 }
 
 .sp section.related ul li a img {
     margin-bottom: 10%;
 }
 
 .sp section.related ul li a span {
     font-size: 16px;
     font-size: 3.2vw;
     color: #fff;
 }
 
 .sp section.related ul li a:hover {
     text-decoration: none;
     opacity: .6;
 }
.sp section.related ul li:nth-child(odd) {
     margin-left: 0;
 }
 
 .sp section.related p.copyright {
     width: 94%;
 }
 
 .sp section.character ul li.cha-box .flame {
     min-height: 14vw;
     padding: 2vw 3vw 2vw 3vw;
     border: solid 3px #b28936;
     background: url(/static/cpn/ffm000035/img/bell.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(2) .flame {
     background: url(/static/cpn/ffm000035/img/beast.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(3) .flame {
     background: url(/static/cpn/ffm000035/img/gaston.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(4) .flame {
     background: url(/static/cpn/ffm000035/img/lefou.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(5) .flame {
     background: url(/static/cpn/ffm000035/img/lumiere.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(6) .flame {
     background: url(/static/cpn/ffm000035/img/cogsworth.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 
 .sp section.character ul li.cha-box:nth-of-type(7) .flame {
     background: url(/static/cpn/ffm000035/img/potts_and_chip.png) 3vw 2vw no-repeat;
     background-size: 30vw;
 }
 /* /section.related */
 /*----------------------------------------------
    section.trailer
----------------------------------------------*/
 
 div#movieInfo {
     width: 970px;
     margin: 0 auto;
     margin-bottom: 2vw;
     text-align: center;
 }
 
 .sp div#movieInfo {
     width: 100%;
     margin: 0 auto;
     margin-bottom: 2vw;
     text-align: center;
 }
 
 .trailermovie.video.h360 ul {
     width: 100%;
     margin: 0 auto 50px;
     text-align: center;
 }
 
 .movieInfo {
     font-size: 98%;
     font-weight: 400;
     line-height: 1.5;
     width: 96%;
     margin: 0 auto;
     text-align: left;
     letter-spacing: 1.5px;
 }
 /*-------------------------------
TOPへもどる
--------------------------------*/
 
 div.top {
     position: fixed;
     z-index: 200;
     right: 20px;
     bottom: 20px;
     margin: -3em 0 1em 0;
     text-align: right;
 }
 
 .anqure {
     display: none;
 }
 /*============================================================キャンペーンページ SP用============================================================*/
 /*============================================================
player fit
============================================================*/
 
 .fitWindows header {
     display: none;
 }
 
 .fitWindows #globalNavi {
     display: none;
 }
 
 .fitWindows #headerUtility {
     display: none;
 }
 
 .fitWindows footer {
     display: none;
 }
 
 .fitWindows article.contents section {
     display: none;
     margin: 0;
 }
 
 .fitWindows article.contents section div#movieInfo .trailTTL {
     display: none;
     margin: 0;
 }
 
 .fitWindows article.contents section.trailer {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: auto;
 }
 
 .fitWindows article.contents section.trailer h2,
 .fitWindows div.container section.trailer div.txt,
 .fitWindows div.container section.trailer div.notice {
     display: none !important;
 }
 
 .fitWindows article.contents section.trailer {
     margin: 0;
     padding: 0;
     background: none;
 }
 
 .fitWindows article.contents section.trailer div.trailermovie,
 .fitWindows article.contents section.trailer li.player {
     display: block;
 }
 
 .fitWindows article.contents section.trailer div.trailermovie,
 .fitWindows article.contents section.trailer li.player,
 .fitWindows article.contents section.trailer div#silverlightControlHost {
     display: block;
     overflow: hidden;
     width: 100%;
     height: auto;
 }
 
 .fitWindows .container div#movieInfo {
     display: block;
     width: 100%;
 }
 
 .fitWindows #Rak_Showtime_Top_FBanner {
     display: none;
 }
 
 .snapshot .control.active {
     display: block;
     opacity: .53;
 }
 /* cpnInfo
------------------------------------------------------------*/
 
 .cpnInfo {
     width: 970px;
     margin: 0 auto 20px;
     background: #fff;
 }
 
 .cpnInfo .header {
     margin-bottom: 1em;
 }
 
 .cpnInfo .header img {
     width: 100%;
 }
 
 .cpnInfo div.img {
     width: 100%;
     max-width: 970px;
     margin: 0 auto;
 }
 
 .cpnInfo div.img div {
     background: #edecec;
 }
 
 .cpnInfo div.img div a {
     display: block;
     width: 80%;
     max-width: 790px;
     margin: 0 auto 2em;
 }
 
 .cpnInfo div.img img {
     width: 100%;
     margin-bottom: 1em;
 }
 
 .cpnInfo table {
     width: 100%;
     max-width: 970px;
     margin: 0 auto;
 }
 
 .cpnInfo th {
     width: 20%;
     background: #eee;
 }
 
 .cpnInfo .title {
     font-size: 130%;
     padding: 10px 0 7px;
     text-align: center;
     color: #fff;
     background: #c01920;
 }
 
 .cpnInfo td {
     width: 80%;
 }
 
 .cpnInfo table,
 .cpnInfo td,
 .cpnInfo th {
     line-height: 1.5;
     padding: 15px;
     text-align: left;
     vertical-align: middle;
     border: 1px solid #ccc;
 }
 
 .cpnInfo table strong,
 .cpnInfo td strong,
 .cpnInfo th strong {
     display: block;
 }
 
 .cpnInfo table p,
 .cpnInfo td p,
 .cpnInfo th p {
     margin-bottom: 1em;
 }
 
 @media screen and (max-width:641px) {
     .cpnInfo {
         width: 100%;
         background: transparent;
     }
     .cpnInfo table,
     .cpnInfo td,
     .cpnInfo th {
         box-sizing: border-box;
         width: 94%;
         padding: 5px;
         border: none;
         background: rgba(255, 255, 255, .7);
     }
     .cpnInfo td,
     .cpnInfo th {
         display: block;
         width: 100%;
     }
     .cpnInfo td {
         margin-bottom: 1em;
     }
     .cpnInfo .title {
         font-size: 100%;
         margin: 0 auto 2%;
     }
 }
 
 p.copyright {
     padding-top: 3%;
     text-align: center;
     color: #bdbdbd;
 }