@charset "UTF-8";
@media screen and (max-width: 640px) {
    .countWrap {
        background-color: rgba(0, 53, 125, 0.93);
        position: fixed;
        width: 100%;
        height: 110%;
        z-index: 10010;
        top: 0px;
        left: 0px;
    }
    .countLogo {
        width: 40%;
        margin: 0 auto;
        padding: 16px 0 0;
    }
    .countLogo img {
        width: 100%
    }
    .countMain {
        position: relative;
        margin: 27px 0 0;
        background-position: 220px 46px;
        width: 100%;
        background-size: 180%;
    }
    .countMain .count {
      margin: -10px 5.25% 0 5.25%;
      padding: 2% 0;
    }
    .countMain .count img,
    .countMain .countChara img {
        width: 100%;
    }
    .countMain .countChara {
        /*position: absolute;*/
        /*top: -33px;*/
        /*left: 48%;*/
        /*width: 46%;*/
        margin: -40px 16% 0;
    }
    .countMain .countChara a:hover {
        opacity: 1.0 !important;
    }
    .countLink {
      margin: 0 12.5% 0 9.5%;
      width: 75%;
      font-size: 1.05em;
      line-height: 1.5em;
      background-repeat: no-repeat;
      background-size: 5%;
      background-position: 94% 75%;
      padding-top: 3%;
    }
    .countLink a {
        position:relative;
        display: block;
        width: auto;
        color: #FFF;
        overflow: visible;
        text-shadow: 0px 0px 8px rgba(0, 130, 255, 1), 0px 0px 8px rgba(0, 130, 255, 1), 0px 0px 16px rgba(0, 130, 255, 1), 0px 0px 16px rgba(0, 130, 255, 1), 0px 0px 24px rgba(0, 130, 255, 1), 0px 0px 24px rgba(0, 130, 255, 1), 0px 0px 32px rgba(0, 130, 255, 1);
        text-decoration: none;
    }
    .countLinkAnchor{
      display: table;
      position: absolute;
      right: -56px;
      top: 8px;
      bottom: 0;
      margin: auto 0;
    }
    .countLinkAnchor:after{
      content: url(../images/top/countdown_anchor_right.png);
    }
    .countCloseBtn {
        margin: 0 auto 0;
        width: 35%;
        font-size: 1.125em !important;
        padding-top: 7%;
    }
    .countCloseBtn a {
        width: auto;
        text-align: center;
        padding: 10px 30px;
        color: #FFF !important;
        border-radius: 30px !important;
        font-weight: 700 !important;
        display: block;
        background-color: #0072e1;
        cursor: pointer;
        text-decoration: none;
    }
    .countCloseBtn a:before{
      content: '×';
      padding: 0 5px;
      transform: scale(1.125);
      display: inline-block;
      line-height: 1;
    }
    .countNavi{
      padding-top:40px;
    }
    .countNavi ul{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .countNavi ul li a{
      pointer-events: none;
      cursor: default;
      opacity: .4;
    }
    .countNavi ul li a.active{
      pointer-events: auto;
      cursor: pointer;
      opacity: 1;
    }
}
@media screen and (min-width: 641px) {
    .countWrap {
        background-color: rgba(0, 53, 125, 0.93);
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 10010;
        top: 0px;
        left: 0px;
    }
    .countLogo {
        width: 214px;
        margin: 0 auto;
        padding: 33px 0 0;
    }
    .countMain {
        position: relative;
        margin: 40px 0 auto 0;
        height: 222px;
        background-position: 90% top;
    }
    .countMain .count {
        margin: 0 auto 0;
        width: 600px;
        padding: 22px 0 0;
        text-align: center;
    }
    .countMain .countChara {
        /*position: absolute;*/
        /*top: -49px;*/
        /*left: 51%;*/
        margin: -30px auto 0;
        width: 600px;
        text-align: center;
    }
    .countMain .countChara img a:hover {
        opacity: 1.0 !important;
    }
    .countLink {
      margin: 10px auto 0;
      width: 515px;
      font-size: 1.25em;
      line-height: 2.0em;
      background-repeat: no-repeat;
      background-size: 6%;
      background-position: 236px center;
    }
    .countLink a {
      position:relative;
        display: block;
        width: auto;
        color: #FFF;
        overflow: visible;
        /*background-image: url(../images/top/countdown_anchor_right.png);*/
        /*background-repeat: no-repeat;*/
        background-position: right -30px center;
        text-shadow: 0px 0px 8px rgba(0, 130, 255, 1), 0px 0px 8px rgba(0, 130, 255, 1), 0px 0px 16px rgba(0, 130, 255, 1), 0px 0px 16px rgba(0, 130, 255, 1), 0px 0px 24px rgba(0, 130, 255, 1), 0px 0px 24px rgba(0, 130, 255, 1), 0px 0px 32px rgba(0, 130, 255, 1);
    }
    .countLink a:hover {
        opacity: 0.75;
        text-decoration: none;
    }
    .countLinkAnchor{
      display: table;
      position: absolute;
      right: -65px;
      top: 8px;
      bottom: 0;
      margin: auto 0;
    }
    .countLinkAnchor:after{
      content: url(../images/top/countdown_anchor_right.png);
      /* left: 0; */
    }
    .countCloseBtn {
        margin: 70px auto 0;
        width: 165px;
        font-size: 1.375em !important;
    }
    .countCloseBtn a {
        width: auto;
        text-align: center;
        padding: 10px 30px;
        color: #FFF !important;
        border-radius: 30px !important;
        font-weight: 700 !important;
        display: block;
        background-color: #0072e1;
        cursor: pointer;
        text-decoration: none;
    }
    .countCloseBtn a:before{
      content: '×';
      padding: 0 5px;
      transform: scale(1.125);
      display: inline-block;
      line-height: 1;
    }
    .countNavi{
      padding-top:40px;
    }
    .countNavi ul{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .countNavi ul li a{
      pointer-events: none;
      cursor: default;
      opacity: .4;
    }
    .countNavi ul li a.active{
      pointer-events: auto;
      cursor: pointer;
      opacity: 1;
    }
}

.countChara{
    cursor: pointer;
}