@charset 'UTF-8';
/*smart_phone_config*/
/*共通パーツ化が困難だったため追記*/
/* *****************************
 *
 * INDEX file to Scss or Sass.
 *
 **************************** */
section#pageNavi
{
    margin: 2% 0 7% 0;
}

ul#firstTags
{
    float: left;

    width: 25%;
}
ul#firstTags li
{
    font-size: 138.5%;

    display: block;

    padding: 5% 5% 5% 18%;

    vertical-align: middle;

    color: #fff;
    background-color: #616262;
}
ul#firstTags li:hover
{
    cursor: pointer; 

    background-color: #3fa79e;
}
ul#firstTags li.spec
{
    border-bottom: solid 1px #fff; 
    background-image: url(../images/product/specIcon.png);
    background-repeat: no-repeat;
    background-position: 7% 45%;
}
ul#firstTags li.genre
{
    background-image: url(../images/product/specIcon.png);
    background-repeat: no-repeat; 
    background-position: 7% 45%;
}
ul#firstTags li.active
{
    border-bottom: 1px solid #fff; 
    background-color: #3fa79e;
    background-image: url(../images/product/releaseIcon.png);
    background-repeat: no-repeat;
    background-position: 7% 45%;
}
ul#firstTags li a
{
    color: #fff;
}

.selectBox
{
    font-size: 123.1%;

    float: right;

    width: 26%;
    padding: 2% 2% 3% 2%;

    border: 1px solid #3fa79e; 
    background: #e2e2e2;
}
.selectBox select
{
    font-size: 123.1%; 

    width: 100%;
    padding: 5px;

    border: 1px solid #3fa79e;
}

.center
{
    background-color: #f1f1ea;
}
@media screen and (max-width: 768px)
{
    .center
    {
        margin-bottom: 7%;
    }
}
.center h1
{
    font-size: 272%;
    font-weight: normal;

    box-sizing: border-box;
    width: 350px;
    margin: 0 auto;
    padding: 2.5%;
    padding-left: 6%; 

    text-align: center;

    color: #29a297;
    background-image: url(../images/fan/TVIcon1.png);
    background-repeat: no-repeat;
    background-position: 16% 45%;
}
@media screen and (max-width: 768px)
{
    .center h1
    {
        font-size: 200%;

        width: 100%;
        margin: 0;
        padding: 8%;
        padding-left: 20%; 

        background-position: 24% 55%;
        background-size: 10%;
    }
}
.center #contents
{
    display: flex; 

    max-width: 1120px;
    margin: 2%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (max-width: 768px)
{
    .center #contents
    {
        position: relative;

        flex-direction: column-reverse; 

        margin-bottom: 0;
    }
}
.center #contents #left
{
    width: 300px;
    height: 500px;

    background-color: #fff;
}
@media screen and (max-width: 768px)
{
    .center #contents #left
    {
        position: relative;

        display: block; 

        width: 100%;
        height: auto;
    }
    .center #contents #left img#thumbnail
    {
        width: 300px;
    }
}
@media screen and (max-width: 768px) and (max-width: 768px)
{
    .center #contents #left img#thumbnail
    {
        float: left; 

        width: 50%;
    }
}
@media screen and (max-width: 768px) and (max-width: 768px)
{
    .center #contents #left
    {
        margin: 0 auto;
    }
}

.center #contents #left p
{
    font-size: 138.5%;
    line-height: 138.5%;

    padding: 4% 2% 4%; 

    text-align: center;

    color: #3fa79e;
}
@media screen and (max-width: 768px)
{
    .center #contents #left p
    {
        font-size: 15px; 

        padding: 8% 2% 4%;
    }
}
.center #contents #left #sns
{
    padding: 0 5% 2%;
}
@media screen and (max-width: 768px)
{
    .center #contents #left #sns
    {
        display: none;
    }
}
.center #contents #left #sns li.twitter
{
    float: right;
}
.center #contents #left .btnRed
{
    font-size: 20px;
    line-height: 100%;

    display: block;
    display: block;

    box-sizing: border-box;
    width: 90%;
    margin: 0 auto;
    padding: 3% 0;
    padding-left: 3%;

    text-align: center;
    text-align: center;
    vertical-align: middle;

    color: #fff;
    background-image: url(../images/hallpage/daiichiYazirushiRed.png);
    background-repeat: no-repeat;
    background-position: 14% 55%;
}
@media screen and (max-width: 768px)
{
    .center #contents #left .btnRed
    {
        font-size: 125%;

        position: absolute;
        right: 0;
        bottom: 0;

        display: block;
        display: block;
        float: left;

        width: 50%;
        margin: 0 auto;
        padding: 5% 0;

        text-align: center;
        vertical-align: middle;

        background-image: none;
    }
}
.center #contents #right
{
    float: left;

    width: 820px;
}
@media screen and (max-width: 768px)
{
    .center #contents #right
    {
        width: 100%;
    }
}
.center #contents #right video,
.center #contents #right iframe
{
    z-index: 100;

    width: 820px; 
    height: 500px;

    background-color: #000;
}
@media screen and (max-width: 768px)
{
    .center #contents #right video,
    .center #contents #right iframe
    {
        top: 0; 

        width: 100%;
        height: 250px;
    }
}

#news
{
    display: block;

    background-color: #3fa79e;
}
@media screen and (max-width: 768px)
{
    #news
    {
        margin-bottom: 2%;
    }
}
#news h1
{
    font-size: 28px;
    font-weight: normal;

    width: 500px;
    margin: 0 auto; 
    padding: 3% 0 3% 3%;

    text-align: center;

    color: #fff;
    background-image: url(../images/fan/TVIcon2.png);
    background-repeat: no-repeat;
    background-position: 20% 45%;
}
@media screen and (max-width: 768px)
{
    #news h1
    {
        font-size: 153.9%;

        box-sizing: border-box;
        width: 100%;
        padding-left: 15%;

        background-position: 16% 45%;
        background-size: 11%;
    }
}

#list
{
    width: 100%; 
    max-width: 1140px;
    margin-top: 1.5%;
    margin-right: auto;
    margin-left: auto;
}
#list .nothingText
{
    font-size: 26px;

    padding: 9% 0 12% 0; 

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #list .nothingText
    {
        font-size: 18px;
    }
}
@media screen and (max-width: 768px)
{
    #list
    {
        width: 100%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 380px)
{
    #list
    {
        width: 95%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 350px)
{
    #list
    {
        width: 320px;
        margin: 0 auto;
    }
}
#list ul#tvList
{
    font-size: 0;

    width: 100%;

    text-align: center;
}
#list ul#tvList li
{
    font-size: 14px;

    position: relative;

    display: inline-block;
    overflow: hidden;

    width: 25%;
    max-width: 265px;
    margin: 0 10px 20px 10px;

    text-align: left;
}
@media screen and (max-width: 768px)
{
    #list ul#tvList li
    {
        font-size: 12px;
        line-height: 1.2; 

        width: 48%;
        margin: 0 1% 2% 1%;
    }
}
#list ul#tvList li .on
{
    position: absolute;
    top: 263px;
    left: 0;

    display: inline-block;

    width: 100%;
    height: 265px;

    vertical-align: middle;

    background-image: url(../images/fan/onBlack.png);
    background-size: cover;
}
#list ul#tvList li .on img
{
    width: 45%;
    margin: 0 auto;
    margin-top: 40%;
    margin-bottom: 10px; 

    vertical-align: middle;
}
#list ul#tvList li .on .tvTitle
{
    padding: 0 10px; 

    color: #fff;
}
#list ul#tvList li .off
{
    display: block;
}
#list ul#tvList li .off img.icon
{
    position: absolute;
    top: 3%;
    left: 2%;
}
@media screen and (max-width: 768px)
{
    #list ul#tvList li .off img.icon
    {
        width: 30%;
    }
}

@media screen and (max-width: 768px)
{
    #clear img#thumbnail
    {
        float: left; 

        width: 50%;
    }
}
#clear #number ul li.int a
{
    box-sizing: border-box;
    padding: 10% 18%;

    border: solid 1px #3fa79e;
}
#clear #number ul li.int
{
    font-size: 176.9%;
    font-weight: bold;
    line-height: 176.9%;

    width: 40px;
    height: 153.9%;
    margin: 0 6px; 

    text-align: center;
    vertical-align: middle;

    color: #3fa79e;
}
#clear #number ul li.int a
{
    box-sizing: border-box;
    padding: 8.5% 17.5%;

    border: solid 1px #3fa79e;
}
@media screen and (max-width: 768px)
{
    #clear #number ul li.int
    {
        font-size: 141%;
        line-height: 138.1%;

        height: 121.1%;
        margin: 0;
    }
    #clear #number ul li.int a
    {
        display: block; 

        box-sizing: border-box;
        width: 41px;
        padding: 2% 1%;
    }
}

.popular ul
{
    margin-top: 4px;
}
@media screen and (max-width: 768px)
{
    .popular ul
    {
        margin-top: 0;
    }
}

@media screen and (max-width: 768px)
{
    .popular
    {
        overflow: hidden;

        width: 100%;
        margin-bottom: 0; 
        padding-bottom: 15%;
    }
}
#news .green
{
    margin-bottom: 0; 
    padding-top: 40px;

    background-color: #3fa79e;
}

@media screen and (max-width: 768px)
{
    #news
    {
        background-color: #fff;
    }
    #news .green
    {
        margin-bottom: 2%;
        padding-top: 0;

        background-color: #fff;
    }
}