@charset 'UTF-8';
/*smart_phone_config*/
/*共通パーツ化が困難だったため追記*/
/* *****************************
 *
 * INDEX file to Scss or Sass.
 *
 **************************** */
.wrap
{
    background-image: url(../images/fan/bgFanContents.jpg);
    background-repeat: repeat-x;
}
@media screen and (max-width: 768px)
{
    .wrap
    {
        background-position: 0 -200px;
    }
}

#head
{
    width: 1120px;
    margin-right: auto;
    margin-left: auto;
    padding: 30px 0 30px 0;

    text-align: center;
}
@media screen and (max-width: 768px)
{
    #head
    {
        overflow: hidden;

        width: 100%;
        padding: 15px 0 15px 0;
    }
}
#head img
{
    display: block;
    float: left;

    margin-top: .5%;
    margin-left: 10%;
}
#head h1
{
    font-size: 227%;

    display: block;

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

    text-align: center;

    color: #3fa79e;
    background-color: rgba(255, 255, 255, .7);
}
#head h1 span
{
    padding-left: 20%;

    background-image: url(../images/fan/fanIcon.png);
    background-repeat: no-repeat;
}
@media screen and (max-width: 768px)
{
    #head h1
    {
        font-size: 21px;

        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 8%;

        background-position: 15% 53%;
        background-size: 15%;
    }
    #head h1 span
    {
        padding: 3%;
        padding-left: 24%;
    }
}
#head p
{
    font-size: 243%;
    line-height: 167%;

    padding-top: 1%;

    text-align: center;

    color: #fff;
}

#contents
{
    max-width: 1122px;
    margin: 0 auto;
}
#contents ul#imglist
{
    font-size: 0;

    width: 100%;

    text-align: center;
    margin-bottom: 90px;
}
@media screen and (max-width: 768px)
{
    #contents ul#imglist
    {
        text-align: left;
    }
}
#contents ul#imglist li
{
    font-size: 16px;

    display: inline-block;

    width: calc( 50% - 20px );
    max-width: 360px;
    margin: 10px;
}
@media screen and (max-width: 768px)
{
    #contents ul#imglist li
    {
        display: block;

        width: 100%;
        max-width: 100%;
        margin: 0 0 10px;

        color: #606060;
        background: #fafafa;
    }
    #contents ul#imglist li a
    {
        display: block;

        width: 100%;
        padding: 3%;
    }
    #contents ul#imglist li a:link,
    #contents ul#imglist li a:visited,
    #contents ul#imglist li a:hover,
    #contents ul#imglist li a:active
    {
        color: #606060;
    }
    #contents ul#imglist li .thumb
    {
        width: 100%;
    }
}
@media screen and (max-width: 768px) and (max-width: 768px)
{
    #contents ul#imglist li .thumb
    {
        display: inline-block;

        width: 36%;
    }
}
@media screen and (max-width: 768px)
{
    #contents ul#imglist li .sp
    {
        display: inline-block;

        width: 62%;
        padding: 0 3%;
    }
}
#contents #service
{
    width: 100%;
    margin: 4% 0;
}
@media screen and (max-width: 768px)
{
    #contents #service
    {
        overflow: hidden;

        width: 100%;
    }
}
#contents #service h2
{
    font-size: 28px;
    font-weight: normal;

    margin-bottom: 3%;
    padding-top: 1%;

    text-align: center;

    color: #3fa79e;
}
@media screen and (max-width: 768px)
{
    #contents #service h2
    {
        font-size: 22px;
    }
}
#contents #service ul#backNumber
{
    font-size: 0;

    width: 100%;

    text-align: center;
}
#contents #service ul#backNumber li
{
    display: inline-block;

    width: calc( 33.3333% - 20px );
    max-width: 360px;
    margin: 10px;
}
@media screen and (max-width: 768px)
{
    #contents #service ul#backNumber li
    {
        display: block;

        width: 90%;
        max-width: auto;
        margin: 0 auto 3% auto;
    }
}
#contents #service .appli
{
    position: relative;

    float: left;

    width: 50%;
}
@media screen and (max-width: 768px)
{
    #contents #service .appli
    {
        float: none;

        width: 100%;
        margin-bottom: 3px;
    }
}
#contents #service .appli p
{
    font-size: 22px;

    position: absolute;
    bottom: 0;

    width: 550px;
    height: 40px;
    padding-top: 24px;
    padding-left: 25px;

    color: #fff;
    background-color: rgba(0, 0, 0, .6);
}
@media screen and (max-width: 768px)
{
    #contents #service .appli p
    {
        font-size: 19px;

        box-sizing: border-box;
        width: 100%;
        height: 52px;
        padding: 4%;
    }
}
#contents #service .goodsshop
{
    position: relative;

    float: left;

    width: 50%;
}
@media screen and (max-width: 768px)
{
    #contents #service .goodsshop
    {
        float: none;

        width: 100%;
    }
}
#contents #service .goodsshop p
{
    font-size: 182%;

    position: absolute;
    bottom: 0;

    width: 535px;
    height: 40px;
    margin: auto;
    padding-top: 24px;
    padding-left: 25px;

    color: #fff;
    background-color: rgba(0, 0, 0, .6);
    background-image: url(../images/company/corporateIcon.png);
    background-repeat: no-repeat;
    background-position: 63% 55%;
}
@media screen and (max-width: 768px)
{
    #contents #service .goodsshop p
    {
        font-size: 19px;

        box-sizing: border-box;
        width: 100%;
        height: 52px;
        padding: 4%;

        text-align: left;
    }
}

#other
{
    width: 100%;
    margin: 5% 0;
}
@media screen and (max-width: 768px)
{
    #other
    {
        overflow: hidden;

        width: 100%;
    }
}
#other h2
{
    font-size: 182%;

    padding-top: 3%;
    padding-bottom: 2%;

    text-align: center;

    color: #3fa79e;
    background-image: url(../images/product/icon_jikkiInfo.png);
    background-repeat: no-repeat;
    background-position: 29% 60%;
}
@media screen and (max-width: 768px)
{
    #other h2
    {
        font-size: 153.9%;
    }
}
#other ul
{
    text-align: center;
}
#other ul a
{
    display: inline;

    margin: .5%;

    color: #606060;
    background-color: #fff;
}
#other ul a li
{
    display: inline-block;

    width: 261px;

    text-align: center;

    box-shadow: 0 0 4px rgba(0, 0, 0, .4);
}
#other ul a li img
{
    margin: 1em;
}
#other ul a li p
{
    height: 4em;
}

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

        width: 100%;
        margin-bottom: 0;
        padding-bottom: 15%;
    }
}