@charset "utf-8";
/* CSS Document */

* {
    margin: 0px;
    padding: 0px;
    /*color:#666666;*/
}

img {
    border: none;
}

body {
    text-align: center;
    -webkit-text-size-adjust: none;
    background-color: #FEFAFB;
}

h1 {
    color: #ffffff;
    background-color: #4C3D43;
    padding: 2px;
    font-size: 10px;
    font-family: HiraKakuProN-W3;
    font-weight: normal;
}

    h1 a:link, h1 a:visited, h1 a:hover {
        color: #333333;
    }

p {
    font-family: HiraKakuProN-W3;
    font-size: 12px;
}

ul#headnavi {
    background: #ffe6f0; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTZmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmNmZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjZmRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top, #ffe6f0 0%, #ffcfdd 100%, #ffcfdd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe6f0), color-stop(100%,#ffcfdd), color-stop(100%,#ffcfdd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffe6f0 0%,#ffcfdd 100%,#ffcfdd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffe6f0 0%,#ffcfdd 100%,#ffcfdd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffe6f0 0%,#ffcfdd 100%,#ffcfdd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffe6f0 0%,#ffcfdd 100%,#ffcfdd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe6f0', endColorstr='#ffcfdd',GradientType=0 ); /* IE6-8 */
    color: #FF7315;
    border-top: 1px solid #FFBBD7;
    border-bottom: 1px solid #FFB5D2;
    /*text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;*/
    font-family: HiraKakuProN-W6;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
}

    ul#headnavi li {
        border: none;
        padding: 0px;
        padding-top: 2px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 20%;
        height: 56px;
        float: left;
        font-size: 10px;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFBBD7;
        -webkit-box-sizing: border-box;
        　 /* Safari,Google Chrome用 */
        -moz-box-sizing: border-box;
        　 /* Firefox用 */
        -ms-box-sizing: border-box;
        　 /* Internet Explorer 8用 */
        box-sizing: border-box;
        　 /* Opera用 */
    }

        ul#headnavi li#first {
            border-left: none;
        }

        ul#headnavi li#last {
            border-right: none;
        }

        ul#headnavi li a {
            display: block;
            color: #FF7315;
            text-align: center;
        }

            ul#headnavi li a:link, ul#headnavi li a:hover, ul#headnavi li a:visited {
                color: #FF7315;
                text-decoration: none;
            }





.btn_tel {
    width: 90%;
    padding: 8px;
    margin: 5px auto;
    text-align: center;
    font-size: 18px;
    /*グラデ*/
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 47%, #f5f5f5 72%, #dfdfdf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,#ffffff), color-stop(72%,#f5f5f5), color-stop(100%,#dfdfdf));
    background: -webkit-linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
    background: -o-linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
    background: -ms-linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
    background: linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 );
    /*角丸*/
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #ccc;
}

    .btn_tel a:link,
    .btn_tel a:visited,
    .btn_tel a:hover {
        color: #000000;
        display: block;
    }



h3 {
    background-color: #ffffff;
    color: #FF7315;
    font-family: HiraKakuProN-W3;
    font-size: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding: 5px;
    margin-bottom: 4px;
    font-weight: normal;
}

    h3.bright {
        background-image: url(/smartphone/img/common/320.gif);
    }

h4.bright {
    background-image: url(/smartphone/img/common/320_190801.gif);
}

ul#navi {
    list-style-type: none;
    /*width:100%;*/
    margin: 0px;
}

    ul#navi li {
        border-bottom: dotted 1px #FFB5D2;
        padding: 8px;
        font-family: HiraKakuProN-W3;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        font-weight: normal;
        text-align: left;
    }



        ul#navi li a:link, ul#navi li a:visited {
            text-decoration: none;
            color: #FF7315;
        }

        ul#navi li a:hover {
            color: #666;
        }


        /*-----------------------------SNSボタンスペース--------------------------*/

        ul#navi li.sns {
            background-image: none;
        }

        ul#navi li .sns_box {
            display: block;
            margin: 0 auto;
            position: relative;
            width: auto;
        }

        ul#navi li.sns img {
            float: left;
            margin: 0 2px 0;
        }

        ul#navi li.sns #fb_like {
            margin: 5px 0 0;
        }
        /*-----------------------------SNSボタンスペース--------------------------*/

        ul#navi li.telbt {
            font-size: 24px;
            -webkit-border-radius: 8px;
            padding: 15px;
            margin: 4px auto;
            width: 85%;
            text-align: center;
            /*グラデ*/
            background: #ffffff;
            background: -moz-linear-gradient(top, #ffffff 47%, #f5f5f5 72%, #dfdfdf 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,#ffffff), color-stop(72%,#f5f5f5), color-stop(100%,#dfdfdf));
            background: -webkit-linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
            background: -o-linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
            background: -ms-linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
            background: linear-gradient(top, #ffffff 47%,#f5f5f5 72%,#dfdfdf 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 );
            /*角丸*/
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border: 2px solid #ccc;
        }

        ul#navi li span {
            color: #EB5788;
            display: inline;
        }

li a {
    display: block;
}

a:link, a:visited, a:hover {
    text-decoration: none;
    color: #666;
}





#spswitch {
    font-size: 16px;
    font-family: HiraKakuProN-W3;
    background-color: #cccccc;
}

    #spswitch ul {
        list-style-type: none;
        padding: 15px;
    }

    #spswitch li {
        display: inline-block;
        color: #999999;
        background-image: none;
    }

        #spswitch li:first-child {
            color: #222222;
        }

        #spswitch li.last:before {
            content: " | ";
        }

    #spswitch li {
    }

        #spswitch li a {
            color: #000000;
            display: inline;
        }

address {
    background-color: #FF7315;
    font-size: 10px;
    font-style: normal;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
}

    address a,
    address a:link,
    address a:visited,
    address a:hover {
        color: #ffffff;
    }
/*回り込み解除用*/
.clearfix:after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0;
    clear: both;
}

.clr {
    clear: both;
}




h1 {
    color: #FF7315;
    background-color: #ffffff;
}

h2 img {
    margin: auto;
    max-width: 100%;
}

#header {
    position: relative;
    max-width: 100%;
/*    max-height: 150px;*/
    margin: 0 auto;
    background-image: none;
    background-color: #ffffff;
}

header p {
    text-align: right;
    color: #FF7315;
    padding: 0 5px;
    height: 30px;
}

#floatIcon {
    position: fixed;
    bottom: 54px;
    right: 4px;
    z-index: 102;
}

    #floatIcon a {
    }

        #floatIcon a img {
            display: block;
            width: 98px;
            height: auto;
        }

#backToTop {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 103;
}

    #backToTop span {
        display: inline-block;
        border-radius: 50%;
        background-color: rgba(233,191,144,0.95);
        font-size: 40px;
        width: 1em;
        height: 1em;
        color: #ffffff;
    }

        #backToTop span i {
            line-height: 0.9;
        }


#footNavi {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 101;
}

#footNavi {
    background: rgba(233,191,144,0.95);
}

    #footNavi ul {
    }

        #footNavi ul li {
            display: inline-block;
            width: calc(100%/3 - 10px);
            font-size: 10px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,.6);
            color: #ffffff;
            /*text-shadow:0px 0px 2px #6c261d;*/
            vertical-align: top;
            font-weight: bold;
            padding: 6px 0;
        }

            #footNavi ul li:last-child {
                border: none;
            }

li#callMenu a {
    padding: 16px !important;
}

#footNavi ul li span,
#footNavi ul li a:visited,
#footNavi ul li a:hover,
#footNavi ul li a {
    display: inline-block;
    padding: 5px;
    color: #ffffff;
}

#footNavi ul li i {
    font-size: 20px;
    display: block;
    margin-bottom: 2px;
}

#hiddenMenu {
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
}

    #hiddenMenu.visible {
        display: block;
    }

        #hiddenMenu.visible ul {
            padding: 20px 5px 30px;
            overflow: auto;
            height: calc(100vh - 100px);
        }

            #hiddenMenu.visible ul li {
                font-size: 20px;
                text-align: center;
                border: 1px solid rgba(255,84,140,1);
                border-radius: 3px;
                background: #ff548c;
                background: -moz-linear-gradient(top, rgba(255,100,81,0.8) 15%, rgba(255,84,140,1) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,rgba(255,100,81,0.8)), color-stop(100%,rgba(255,84,140,1)));
                background: -webkit-linear-gradient(top, rgba(255,100,81,0.8) 15%,rgba(255,84,140,1) 100%);
                background: -o-linear-gradient(top, rgba(255,100,81,0.8) 15%,rgba(255,84,140,1) 100%);
                background: -ms-linear-gradient(top, rgba(255,100,81,0.8) 15%,rgba(255,84,140,1) 100%);
                background: linear-gradient(top, rgba(255,100,81,0.8) 15%,rgba(255,84,140,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(255,100,81,0.8)', endColorstr='rgba(255,84,140,.8)',GradientType=0 );
                margin: 3px;
            }

                #hiddenMenu.visible ul li a {
                    display: block;
                    padding: 5px;
                    color: #ffffff;
                }

            #hiddenMenu.visible ul:before {
                content: '× 閉じる';
                display: block;
                font-size: 20px;
                text-align: center;
                border: 1px solid rgba(255,84,140,1);
                border-radius: 3px;
                padding: 5px;
                background-color: #ffffff;
                color: #ff548c;
            }

#spFloat {
    display: block;
    background-color: rgba(0,0,0,0);
    width: calc(100% - 40px);
    height: 110%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    opacity: 0;
    transition: all .4s;
    z-index: -1;
}

    #spFloat.visible {
        display: block;
        background-color: rgba(0,0,0,.9);
        width: calc(100% - 40px);
        height: 110%;
        position: fixed;
        top: 0;
        left: 0px;
        padding: 20px;
        opacity: 1;
        z-index: 100;
    }

    #spFloat ul {
        display: block;
        /*background-color:rgba(255,255,255,.9);*/
        width: auto;
        margin: auto;
        max-height: calc(90vh - 40px);
        overflow: auto;
        padding: 10px 0;
        border-radius: 3px;
        position: relative;
        top: 0;
        left: -100vw;
        transition: all .4s;
    }

    #spFloat.visible ul {
        position: relative;
        top: 0;
        left: 0;
    }

    #spFloat ul li {
        display: block;
        padding: 5px 10px;
        text-align: left;
        font-weight: bold;
    }

        #spFloat ul li:first-child {
            text-align: center;
        }

        #spFloat ul li a:link,
        #spFloat ul li a:hover,
        #spFloat ul li a:visited {
            color: #ffffff;
            /*	text-shadow:1px 1px 3px rgba(0,0,0,.3);*/
            padding: 5px 0;
        }

        #spFloat ul li:first-child a {
            /*	border:1px solid rgba(106,116,227,.7);*/
            border-radius: 3px;
            background-color: #ffffff;
            color: #000000 !important;
            box-shadow: -1px -1px 2px rgba(0,0,0,.3) inset, 1px 1px 2px rgba(255,255,255,.3) inset;
            text-shadow: 1px 1px 1px rgba(0,0,0,.3);
        }

        #spFloat ul li:after {
        }

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

.menu-trigger {
    position: relative;
    width: 24px;
    height: 24px;
}

#callMenu em {
    display: block;
    text-align: center;
    font-style: normal;
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 2px !important;
    /*  box-shadow:0px 0px 2px #6c261d;*/
}

    .menu-trigger span:nth-of-type(1) {
        top: 3px;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 13px;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 5px;
    }

.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(20px) rotate(-315deg);
    transform: translateY(10px) rotate(-315deg);
    background-color: #fff;
    z-index: 1000;
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-20px) rotate(315deg);
    transform: translateY(-10px) rotate(315deg);
    background-color: #fff;
    z-index: 1000;
}


#spFloat ul {
    max-height: calc(90vh - 120px);
    margin-top: 0px;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}


address {
    padding-bottom: 120px;
}


/* ランク表示 */

.rankBlock span:first-letter {
    font-size: 17px;
}

.rankBlock span.beginner {
    background: #ffce9e;
    background: -moz-linear-gradient(-45deg, #ffce9e 0%, #feeded 35%, #ffce9e 100%);
    background: -webkit-linear-gradient(-45deg, #ffce9e 0%,#feeded 35%,#ffce9e 100%);
    background: linear-gradient(135deg, #ffce9e 0%,#feeded 35%,#f9cc00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffce9e', endColorstr='#ffce9e',GradientType=1 );
    color: #9a0d08;
}

.rankBlock span.clover {
    background: #8bb4b9;
    background: -moz-linear-gradient(-45deg, #e9f2ff 0%, #ffffff 35%, #8bb4b9 100%);
    background: -webkit-linear-gradient(-45deg, #e9f2ff 0%,#ffffff 35%,#8bb4b9 100%);
    background: linear-gradient(135deg, #e9f2ff 0%,#ffffff 35%,#8bb4b9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f2ff', endColorstr='#8bb4b9',GradientType=1 );
    color: #8b765c;
}

.rankBlock span.platinum {
    background: #d3d3d4;
    background: -moz-linear-gradient(-45deg, #caccc2 0%, #ffffff 35%, #d3d3d4 100%);
    background: -webkit-linear-gradient(-45deg, #caccc2 0%,#ffffff 35%,#d3d3d4 100%);
    background: linear-gradient(135deg, #caccc2 0%,#ffffff 35%,#d3d3d4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#caccc2', endColorstr='#d3d3d4',GradientType=1 );
    color: #532e02;
}

.rankBlock span.gold {
    background: #e0b53d;
    background: -moz-linear-gradient(-45deg, #e6be3c 0%, #fffac3 35%, #e0b53d 100%);
    background: -webkit-linear-gradient(-45deg, #e6be3c 0%,#fffac3 35%,#e0b53d 100%);
    background: linear-gradient(135deg, #e6be3c 0%,#fffac3 35%,#e0b53d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6be3c', endColorstr='#e0b53d',GradientType=1 );
    color: #532e02;
}

.rankBlock span.silver {
    background: #8e8e8e;
    background: -moz-linear-gradient(-45deg, #8e8e8e 0%, #dedddd 35%, #8e8e8e 100%);
    background: -webkit-linear-gradient(-45deg, #8e8e8e 0%,#dedddd 35%,#8e8e8e 100%);
    background: linear-gradient(135deg, #8e8e8e 0%,#dedddd 35%,#8e8e8e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#8e8e8e',GradientType=1 );
    color: #2f2f2f;
}

.rankBlock span.regular {
    background: #f674ad;
    background: -moz-linear-gradient(-45deg, #f87aab 0%, #fed6e0 35%, #f674ad 100%);
    background: -webkit-linear-gradient(-45deg, #f87aab 0%,#fed6e0 35%,#f674ad 100%);
    background: linear-gradient(135deg, #f87aab 0%,#fed6e0 35%,#f674ad 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87aab', endColorstr='#f674ad',GradientType=1 );
    color: #850236;
}

.rankBlock span.Postergirl {
    background: #cdbe00;
    background: -moz-linear-gradient(-45deg, #e9f2ff 0%, #ffffff 35%, #8bb4b9 100%);
    background: -webkit-linear-gradient(-45deg, #e9f2ff 0%,#ffffff 35%,#8bb4b9 100%);
    background: linear-gradient(to bottom, #e3ef42 0%, #e3ef42 50%, #cdbe00 51%, #feff9b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f2ff', endColorstr='#8bb4b9',GradientType=1 );
    color: #8b765c;
}

/* 231006マイページ */

.floatmypage {
    font-size:18px;
    padding:6px 5px;
    color:#fff;
}

    .floatmypage i {
        margin:0 10px;
    }


.blink {
    position: relative;
    overflow: hidden;
}

    .blink::before {
        content: "";
        width: 20px;
        height: 100%;
        background: rgba(255,255,255,.8);
        position: absolute;
        top: -100px;
        left: 0;
        opacity: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation: blink 2s ease-in-out infinite;
        animation: blink 2s ease-in-out infinite;
    }

@-webkit-keyframes blink {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: .5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

@keyframes blink {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
        opacity: .5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}