@charset 'UTF-8';
/*
============================================================

キャンペーンページ PC用

============================================================
*/
/* ベースレイアウト PC
------------------------------------------------------------ */
body#kod000001 .cpnInfo {
    color: #333;
    background-color: #fff;
}

body#kod000001 footer {
    margin-top: 0;
    background-color: #fff;
}

body#kod000001 .container {
    width: 100%;
    margin: 0 auto;
}

body#kod000001.sp .container {
    width: 100%;
}

body#kod000001.sp {
    width: 100%;
    background-size: 20%;
}

.pc article.contents div.wrapper {
    width: 970px;
    padding: 0;
    color: #333;
}
.clearfix:before,
.clearfix:after {
    display: block;
    visibility: hidden;
    height: 0;
    content: '\0020';
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}
.pc .trailermovie img {
    width: 100%;
}
/*------------------------------------------------
トレーラー100%表示用追加css
---------------------------*/
.fitWindows article.contents section#story {
    display: block;
}

.fitWindows section.story h2 {
    display: none;
}
.fitWindows section.story h2 {
    display: none;
}
/*------------------------------------------------
/ トレーラー100%表示用追加css
---------------------------*/
/*-----------------------------------------------------------------
section.main_bnr
-------------------------------------------------------------------*/
section.main_bnr {
    width: 100%;
    height: 816px;
    margin: 0 auto;
    text-align: center;
}

section.main_bnr h1 {
    width: 970px;
    height: 751px;
    margin: -2px auto 0;
}

section.main_bnr p {
    width: 100%;
    height: 67px;
    text-align: center;
    background: url(/static/cpn/kod000001/img/headBase_sp.png) repeat;
}

section.main_bnr nav {
    position: relative;
    width: 970px;
    margin: 0 auto;
}

ul.gnav_list {
    position: absolute;
    right: 30px;
    bottom: 0;
    width: 265px;
    height: 265px;
}

ul.gnav_list a {
    display: block;
    height: 40px;
    margin-bottom: 5px;
}

ul.gnav_list a:hover {
    background: rgba(0, 50, 237, .8);
    -webkit-box-shadow: 0 0 19px 2px rgba(255,255,255,.86);
    -moz-box-shadow: 0 0 19px 2px rgba(255,255,255,.86);
    box-shadow: 0 0 19px 2px rgba(255,255,255,.86);
}

/*-----------------------------------------------------------------
section.story
-------------------------------------------------------------------*/
section.story {
    padding: 0 30px 10px;
    background: url(/static/cpn/kod000001/img/main.jpg) no-repeat;
}

section.story p.digest {
    font-size: 16px;
    line-height: 1.3;
    width: 890px;
    padding: 20px 10px;
    color: #fff;
    background: rgba(44, 116, 161, .4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.22) inset,1px 1px 2px rgba(0, 0, 0, 0.22);
}

section.story .storyTxt {
    /* display: inline-block; */
    width: 465px;
    margin: 25px 0 20px;
}
section.story h2 {
    margin-bottom: 20px;
    padding-top: 100px;
}

div.trailerBox {
    width: 440px;
    vertical-align: top;
}
div.trailerBox p.st1st a {
    font-weight: bold;
    display: block;
    margin: 1em 0;
    text-align: center;
    letter-spacing: 1px;
    color: rgb(1, 75, 121);
    border-bottom: 4px dotted rgb(245, 155, 179);
}
div.trailerBox p.st1st {
    position: relative;
    width: 210px;
    margin: 0 auto;
}
div.trailerBox p.st1st span.star {
    position: absolute;
    top: -2px;
    left: -1.5em;
}
div.trailerBox p.st1st a:hover,
p.st1st a:active {
    text-align: center;
    text-decoration: none;
    color: #ff529d;
    border-bottom: 4px dotted rgb(220, 3, 75);
}
/*-----------------------------------------------------------------
section.trailer
-------------------------------------------------------------------*/
section.trailer li.videoBox.snapshot.active img {
    width: 440px;
    height: auto;
    vertical-align: bottom;
}
/*-----------------------------------------------------------------
section.mainCast
-------------------------------------------------------------------*/
section.mainCast dl {
    line-height: 1.5;
    display: inline-block;
    width: 303px;
    height: 551px;
    padding: 417px 10px 0 10px;
    vertical-align: top;
    letter-spacing: 0;
}
section.mainCast dl.kim {
    background: url(/static/cpn/kod000001/img/kim.jpg) no-repeat;
}
section.mainCast dl.paku {
    width: 303px;
    background: url(/static/cpn/kod000001/img/paku.jpg) no-repeat;
}
section.mainCast dl.che {
    background: url(/static/cpn/kod000001/img/che.jpg) no-repeat;
}
section.mainCast dt {
    font-size: 15px;
    font-weight: bold;
    padding: 15px 25px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .5);
}
section.mainCast dd {
    height: 448px;
    padding: 0 25px 25px 25px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
}
section.mainCast {
    position: relative;
}
section.mainCast h2 {
    position: absolute;
    top: 55px;
    width: 970px;
    height: 41px;
    text-align: center;
}
section.mainCast .castList {
    letter-spacing: -.4em;
    background: #edecea;
}
span.castPosition {
    font-size: 115%;
    font-weight: bold;
    display: block;
    margin-bottom: .5em;
}
section.point div {
    display: inline-block;
    width: 470px;
    height: 560px;
    margin: 0 4px 7px 0;
    vertical-align: top;
    background: #f17b9e;
}
section.point h3 {
    font-size: 25px;
    line-height: 40px;
    text-align: center;
    color: rgb(248, 224, 181);
    border: 1px solid rgba(0, 0, 0, .1);
    background: #f17b9e;
    text-shadow: 0 1px 0 rgba(145, 27, 62, .6);
}
section.point ul {
    padding: 15px 0 0;
    background: #fec3d4;
}
section.point ul li {
    font-size: 16px;
    line-height: 1.3;
    padding: 0 30px 5px;
}
/*-----------------------------------------------------------------
section.introduction
-------------------------------------------------------------------*/
section.introduction {
    height: 957px;
}
/*-----------------------------------------------------------------
section.point
-------------------------------------------------------------------*/
section.point {
    padding: 0 8px 80px;
    color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    background: #ffeef4;
}
section.point ul li.star {
    font-weight: bold;
    line-height: 1.5;
    line-height: 30px;
    letter-spacing: .5px;
    background: #f49ab5;
    text-shadow: 0 1px 0 rgba(178, 57, 93, .6);
}
section.point ul li.star a {
    font-weight: bold;
    color: #fff;
}
section.point ul li.sceneTtl {
    font-weight: bold;
    padding: 10px 26px;
    background: #f17b9e;
    text-shadow: 0 1px 2px rgba(246, 0, 0, .8);
}
section.point ul li.sceneTxt {
    padding: 5px 30px;
    background: #f17b9e;
}
section.point h2 {
    padding: 50px;
    text-align: center;
}
section.presentInfo .present {
    position: relative;
    display: inline-block;
    width: 500px;
    padding: 50px 0 10px 0;
    text-align: center;
}
section.presentInfo .fil:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(172, 172, 172, .46);
}
.pc section.presentInfo .present p.fin {
    font-size: 18px;
    font-weight: bold;
    line-height: 2;
    position: absolute;
    top: 120px;
    left: 24px;
    width: 360px;
    height: 100px;
    padding: 50px;
    text-align: center;
    color: #ffc900;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: rgba(83, 106, 120, .7);
    box-shadow: 1px 2px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
section.presentInfo .present p.topi {
    font-size: 18px;
    line-height: 1.3;
    width: 435px;
    margin: 0 auto;
    padding: 0  0 25px 0;
}
section.presentInfo .present p {
    text-align: center;
}
section.presentInfo .present p a {
    cursor: not-allowed;
    pointer-events: none;
}
section.presentInfo .info {
    display: inline-block;
    width: 465px;
    margin-bottom: 1em;
    padding-top: 94px;
    text-align: center;
    vertical-align: top;
}
section.presentInfo .info > img {
    border: 3px ridge #b1b1b1;
}
section.presentInfo .info p.topi {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    padding: 58px 0 33px;
}
section.copyRight {
    margin: 2em 0 0;
}
div.top {
    position: fixed;
    right: 0;
    bottom: 100px;
    margin: -3em 0 1em 0;
    text-align: right;
}
/*----sp-------------------------------------------------------*/
.sp img {
    width: 100%;
}
.sp section.main_bnr {
    height: auto;
}

.sp body#kod000001 .container {
    width: 100%;
}
.sp article.contents div.wrapper {
    width: 100%;
    padding: 0;
    color: #fff;
}
.sp article.contents div.wrapper {
    width: 100%;
    margin-top: -2%;
    padding: 0;
    color: #333;
}
/*-----------------------------------------------------------------
section.main_bnr
-------------------------------------------------------------------*/
.sp section.main_bnr {
    width: 100%;
    height: 78%;
    margin: 0 auto;
    text-align: center;
}
.sp section.main_bnr h1 {
    width: 100%;
    height: 77.5%;
    margin: -2px auto 0;
}
.sp section.main_bnr p {
    width: 100%;
    height: auto;
    text-align: center;
    background: url(/static/cpn/kod000001/img/headBase.png) repeat;
}

.sp section.main_bnr nav {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.sp ul.gnav_list {
    position: absolute;
    right: 3%;
    bottom: 0;
    width: 265px;
    height: 265px;
}
/*-----------------------------------------------------------------
section.story
-------------------------------------------------------------------*/
.sp section.story {
    padding: 0;
    background: url(/static/cpn/kod000001/img/main_sp.jpg) no-repeat;
    background-size: contain;
}

.sp section.story p.digest {
    font-size: 100%;
    line-height: 1.3;
    width: 96%;
    padding: 2%;
    color: #fff;
    background: rgba(46, 110, 150, .6);
}

.sp section.story .storyTxt {
    /* display: inline-block; */
    width: 100%;
    margin: 0 0 2%;
}

.sp section.story h2 {
    margin-bottom: 0;
    padding-top: 58%;
}

.sp div.trailerBox {
    /* display: inline-block; */
    width: 94%;
    margin-top: -2%;
    padding: 3% 3% 1%;
    vertical-align: top;
    background: #000;
}

.sp div.trailerBox p.st1st a {
    font-weight: bold;
    display: block;
    margin: 1em 0;
    text-align: center;
    letter-spacing: 1px;
    color: rgb(254, 131, 0);
    border-bottom: 4px dotted rgb(245, 155, 179);
}

.sp div.trailerBox p.st1st {
    width: 17em;
    margin: 0 auto;
}

.sp div.trailerBox p.st1st a:hover,
p.st1st a:active {
    text-align: center;
    text-decoration: none;
    color: #ff529d;
    border-bottom: 4px dotted rgb(220, 3, 75);
}
/*-----------------------------------------------------------------
section.trailer
-------------------------------------------------------------------*/
.sp section.trailer li.videoBox.snapshot.active img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
/*-----------------------------------------------------------------
section.mainCast
-------------------------------------------------------------------*/
.sp section.mainCast dl {
    line-height: 1.5;
    display: inline-block;
    width: 77%;
    height: 7em;
    margin: 2% 0;
    padding: 0;
    padding-left: 23%;
    vertical-align: top;
    letter-spacing: 0;
}

.sp section.mainCast dl.kim {
    background: url(/static/cpn/kod000001/img/kim.jpg) no-repeat 0 16%;
    background-size: 25%;
}

.sp section.mainCast dl.paku {
    width: 77%;
    background: url(/static/cpn/kod000001/img/paku.jpg) no-repeat 0 18%;
    background-size: 25%;
}

.sp section.mainCast dl.che {
    background: url(/static/cpn/kod000001/img/che.jpg) no-repeat 0 16%;
    background-size: 25%;
}

.sp section.mainCast dt {
    font-size: 100%;
    font-weight: bold;
    line-height: 3em;
    width: 100%;
    height: 3em;
    padding: 0;
    text-align: center;
    letter-spacing: -1px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
}

.sp section.mainCast dd {
    height: 4em;
    padding: 0 3%;
    color: #fff;
    background: rgba(0, 0, 0, .5);
}

.sp section.mainCast {
    position: static;
    padding: 1em;
    background: #edecea;
}

.sp section.mainCast h2 {
    position: static;
    top: 0;
    width: 50%;
    height: 7.3%;
    text-align: center;
}

.sp section.mainCast .castList {
    padding-top: 4%;
    letter-spacing: -.4em;
    background: #edecea;
}

.sp span.castPosition {
    font-size: 100%;
    font-weight: bold;
    display: block;
    margin-bottom: .5em;
}

.sp section.point div {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0;
    margin: 3% 0;
    vertical-align: top;
    background: #f17b9e;
}

.sp section.point h3 {
    font-size: 120%;
    line-height: 2;
    text-align: center;
    color: gold;
    background: #f17b9e;
}

.sp section.point ul {
    padding: 15px 0 0;
    background: #fec3d4;
}

.sp section.point ul li {
    font-size: 16px;
    line-height: 1.3;
    padding: 0 3% 5px;
}

/*-----------------------------------------------------------------
section.point
-------------------------------------------------------------------*/
.sp section.point {
    padding: 0 8px 8%;
    color: #fff;
    background: #ffeef4;
}

.sp section.point ul li.star {
    line-height: 30px;
    padding: 0 3%;
    background: #f49ab5;
}

.sp section.point ul li.star:nth-of-type(2):hover {
    color: rgb(202, 99, 117);
    background: rgba(255, 0, 138, .9);
}

.sp section.point ul li.sceneTtl {
    font-weight: normal;
    padding: 1% 3%;
    background: #f17b9e;
}

.sp section.point ul li.sceneTxt {
    display: none;
    padding: 5px 3%;
    background: #f17b9e;
}

.sp section.point h2 {
    padding: 5%;
    text-align: center;
}

.sp section.presentInfo .present {
    display: inline-block;
    width: 100%;
    padding: 5% 0;
    text-align: center;
}

.sp section.presentInfo .present p.fin {
    font-size: 126%;
    font-weight: bold;
    line-height: 1.5;
    position: absolute;
    top: 35%;
    left: 18px;
    display: inline-block;
    width: 80%;
    padding: 1.5em 5%;
    color: #ffc900;
    border: 1px solid #fff;
    background-color: rgba(83, 106, 120, .85);
    box-shadow: 1px 2px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.sp section.presentInfo .present img {
    width: 45%;
}

.sp section.presentInfo .present p.topi {
    font-size: 100%;
    line-height: 1.3;
    width: 80%;
    margin: 0 auto;
    padding: 0  6% 1em 3%;
    padding-bottom: 1em;
}

.sp section.presentInfo .present p {
    text-align: left;
}

.sp section.presentInfo .info {
    display: inline-block;
    width: 94%;
    margin: 0 2% 1em;
    padding-top: 10%;
    text-align: center;
    vertical-align: top;
}

.sp section.presentInfo .info p.topi {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.3;
    padding: 5% 2%;
    padding-bottom: 1em;
}

.sp section.copyRight {
    margin: 2em 0 0;
}

.sp div.top {
    margin: -3em 0 1em 0;
    text-align: right;
}

span.allow {
    display: inline-block;
    width: 1.2em;
    padding: 0;
    padding-bottom: 1%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    vertical-align: bottom;
}

span.star {
    -webkit-animation: starL 2s ease-in-out infinite;
    -moz-animation: starL 2s ease-in-out infinite;
    -ms-animation: starL 1s ease-in-out infinite;
    -o-animation: starL 1s ease-in-out infinite;
    animation: starL 1s ease-in-out infinite;
    text-shadow: 0 1px 4px rgba(255, 221, 3, .7);
}

@keyframes starL {
    0% { font-size: 18px; color: gold; }
    50% { font-size: 16px; color: rgba(158, 136, 53, .8); }
    100% { font-size: 18px; color: rgb(243, 255, 1); }
}

@-webkit-keyframes starL {
    0% { font-size: 18px; color: gold; }
    50% { font-size: 16px; color: rgba(158, 136, 53, .8); }
    100% { font-size: 18px; color: rgb(243, 255, 1); }
}

@-moz-keyframes starL {
    0% { font-size: 18px; color: gold; }
    50% { font-size: 16px; color: rgba(158, 136, 53, .8); }
    100% { font-size: 18px; color: rgb(243, 255, 1); }
}

@-o-keyframes starL {
    0% { color: gold; }
    50% { color: rgba(158, 136, 53, .8); }
    100% { color: rgb(243, 255, 1); }
}
@-ms-keyframes starL {
    0% { color: gold; }
    50% { color: rgba(158, 136, 53, .8); }
    100% { color: rgb(243, 255, 1); }
}
/*-----------------------------------------------------------------
section.presentInfo .info
-------------------------------------------------------------------*/
.sp section.presentInfo .info p a {
    font-size: 120%;
    line-height: 35px;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 2%;
    text-align: center;
    color: #fff;
    border: solid 1px #ce8d0f;
    border-radius: 25px;
    background-image: -webkit-linear-gradient(bottom, #db9303, #fcc559 89%);
    background-image: -moz-linear-gradient(bottom, #db9303, #fcc559 89%);
    background-image: -o-linear-gradient(bottom, #db9303, #fcc559 89%);
    background-image: -ms-linear-gradient(bottom, #db9303, #fcc559 89%);
    background-image: linear-gradient(to top, #db9303, #fcc559 89%);
    -webkit-box-shadow: inset 0 0 3px #fff;
    -moz-box-shadow: inset 0 0 3px #fff;
    box-shadow: inset 0 0 3px #fff;
}

.sp section.presentInfo .info p a:hover {
    text-decoration: none;
}

.sp section.presentInfo .present p a {
    font-size: 120%;
    line-height: 35px;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 2%;
    text-align: center;
    color: #fff;
    border: solid 1px #ba0000;
    border-radius: 25px;
    background-image: -webkit-linear-gradient(bottom,#f94747, #c00 49%, #f94747);
    background-image: -moz-linear-gradient(bottom, #f94747, #c00 49%, #f94747);
    background-image: -o-linear-gradient(bottom, #f94747, #c00 49%, #f94747);
    background-image: -ms-linear-gradient(bottom, #f94747, #c00 49%, #f94747);
    background-image: linear-gradient(to top, #f94747, #c00 49%, #f94747);
    -webkit-box-shadow: inset 0 0 3px #fff;
    -moz-box-shadow: inset 0 0 3px #fff;
    box-shadow: inset 0 0 3px #fff;
}

.sp section.presentInfo .present p a:hover {
    text-decoration: none;
}
/*============================================================

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.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;
}



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

cpnInfo

============================================================*/
.cpnInfo {
    margin: 0 auto;
}

.cpnInfo .header {
    margin-bottom: 1em;
}

.cpnInfo .header img {
    width: 100%;
}

.cpnInfo div.img {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.cpnInfo div.img div {
    background: #edecec;
}

.cpnInfo div.img div a {
    display: block;
    width: 80%;
    max-width: 790px;
    margin: 0 auto;
    margin-bottom: 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  th.title {
    font-size: 150%;
    padding: 10px 0 7px 0;
    text-align: center;
    color: #fff;
    background: #c01920;
}

.cpnInfo td {
    width: 80%;
}

.cpnInfo table,
.cpnInfo th,
.cpnInfo td {
    line-height: 1.5;
    padding: 15px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #ccc;
}

.cpnInfo table strong,
.cpnInfo th strong,
.cpnInfo td strong {
    display: block;
}

.cpnInfo table p,
.cpnInfo th p,
.cpnInfo td p {
    margin-bottom: 1em;
}

@media screen and (max-width: 641px) {
    .cpnInfo table,
    .cpnInfo th,
    .cpnInfo td {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 94%;
        padding: 5px;
        border: none;
    }

    .cpnInfo th,
    .cpnInfo td {
        display: block;
        width: 100%;
    }

    .cpnInfo td {
        margin-bottom: 1em;
    }

    .cpnInfo  th.title {
        font-size: 100%;
    }
}