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

/* =============================================================================
   Link
   ========================================================================== */

#footer a::after,
.texteffect a::after {
    background-color: #FFF;
}

a:link,
a:hover,
a:visited {
    color: #222;
}

/* =============================================================================
   Base
   ========================================================================== */

body {
    color: #1E1E13;
    background-color: #222;
}

.btn_more span {
    color: #FFFFFF;
}

.btn_more a {
    color: #FFF;
    background-color: #c20c22;
    border: 1px solid #c20c22;
}

.btn_more a:hover {
    background-color: rgba(1, 1, 1, 0);
    color: #be5a66;
    border: 1px solid #be5a66;
}

.btn_more a:hover span {
    color: #c20c22;
}

/* =============================================================================
   Header
   ========================================================================== */

#header {
    background-color: rgba(255, 255, 255, 1);
}

@media screen and (max-width: 768px) {
    #header {
        background-color: rgba(0, 0, 0, 1);
    }
}

/* =============================================================================
   Navi
   ========================================================================== */

#gnavi {
    background: #F5F3EF;
}

/*店舗版*/

#gnavi li a {
    color: #555;
}

#gnavi li a:hover {
    color: #000;
}

/*カレント*/

#gnavi li a.current {
    color: #000;
}

#gnavi li.contact a {
    background-color: #FF59AB;
    color: #FFF;
}

#gnavi li.shophp a {
    background-color: #19bd7f;
    color: #FFF;
}

#gnavi li.contact a:hover,
#gnavi li.shophp a:hover {
    background-color: #41B6E6;
    color: #FFF;
}

#gnavi .texteffect a::after {
    background-color: #c20c22;
}

/* Overlay style */

.overlay {
    background-color: rgba(1, 1, 1, 0.9);
}

/* Menu style */

.overlay ul li a {
    color: #fff;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
    color: #f0f0f0;
}

#navi span {
    background-color: #FFF;
}

#navi .menu {
    color: #FFF;
}

#nav-menu {
    background-color: rgba(255, 0, 177, 0.8);
    color: #FFF;
}

#nav-menu a:link {
    color: #FFF;
}

/* =============================================================================
   Effect
   ========================================================================== */

/*ホバーでアンダーライン*/

.button {
    color: #fff;
}

.button--border {
    background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%), linear-gradient(to bottom, #6AF0DB 0%, #6AF0DB 100%), linear-gradient(to right, #5FB4F0 0%, #6AF0DB 100%), linear-gradient(to top, #5FB4F0 0%, #5FB4F0 100%);
}

.button--border.in:after {
    background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%), linear-gradient(to bottom, #6AF0DB 0%, #6AF0DB 100%), linear-gradient(to right, #5FB4F0 0%, #6AF0DB 100%), linear-gradient(to top, #5FB4F0 0%, #5FB4F0 100%);
}

.button--border:before {
    background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%);
}

.button--svg {
    color: #fff;
}

/*ホバーで拡大・モーション*/

.moved figure {
    background: #000;
}

.moved {
    color: #fff;
}

.moved a {
    color: #fff !important;
}

/* =============================================================================
   Footer
   ========================================================================== */

#footer {
    background-color: rgba(1, 1, 1, .75);
}

#footer a {
    color: #FFF;
}

@media screen and (max-width: 768px) {
    #footer li {
        border-bottom: 1px solid #333;
    }
    #bottomNavi {
        background-color: rgba(242, 242, 242, 0.9);
        color: #111;
    }
    #bottomNavi li a {
        color: #333;
    }
}

/*TITLE*/

.ttl:after {
    background: #c20c22 none repeat scroll 0 0;
}

/* =============================================================================
   #contitle
   ========================================================================== */

#contitle {
    color: #333;
}

#contitle h2 .jp {
    color: #333;
}

@media screen and (max-device-width: 768px) {
    #footer {
        background-color: rgba(1, 1, 1, 1);
    }
}

/* =============================================================================
   #main
   ========================================================================== */

/*RANKING*/

#ranking .ttl {
    color: #c20c22;
}

.ranks {
    color: #c20c22;
}

#ranking .rankslist>li {
    border: 1px solid #c20c22;
}

#ranking .rankslist>li a {
    color: #c20c22;
}

#ranking .rankslist>li a:hover {
    background-color: #c20c22;
    color: #fff;
}

/*SYSTEM*/

#system .title {
    color: #c20c22;
}

.tableOutline th {
    border-top: #c20c22 1px solid;
}

/* =============================================================================
   pager
   ========================================================================== */

.pager ul li a {
    background: #222;
    color: #fff;
}

.pager ul li a:hover {
    background: #333;
    color: #FFF;
}

.pager ul .current {
    background: #c20c22;
}

/* =============================================================================
		#scrollUp
   ========================================================================== */

#scrollUp a {
    color: #fefefe;
    background: #c20c22;
}

#scrollUp a:hover {
    background: #c20c22;
}

@media screen and (max-width: 768px) {
    .tableOutline th {
        border-left: #c20c22 1px solid;
        border-top: none;
        color: #c20c22;
    }
}

/* =============================================================================
		#ranking
   ========================================================================== */

#ranking li figcaption h4 {
    position: relative;
}

#ranking li figcaption h4 {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ranking li figcaption h4 span {
    font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

#ranking li figcaption h4 .pc_yaku,
#ranking li figcaption h4 .sp_yaku {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#ranking li figcaption h4 .pc_yaku {
    font-size: 1.4rem;
}

#ranking li figcaption h4 .pc_yaku {
    position: absolute;
    right: 5%;
    top: 20%;
}

#ranking .rankslist>li.current a {
    background-color: #c20c22;
    color: #fff;
}

ul#past-rankings {
    margin-bottom: 70px;
    margin-top: 150px;
    text-align: center;
    font-size: 21px;
    font-size: 2.1rem;
    clear: both;
}

ul#past-rankings li {
    display: inline-block;
    vertical-align: top;
    margin-right: 90px;
    width: 140px;
    line-height: 1.2;
    float: none;
    font-size: 18px;
}

ul#past-rankings li:last-child {
    margin-right: 0
}

ul#past-rankings li a {
    color: #fff;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    letter-spacing: .25em;
    padding-bottom: 15px;
}

ul#past-rankings li a:before {
    content: url(/img/bg_rank_title_s.png);
    padding-right: 4px
}

ul#past-rankings li a span {
    font-size: 52.5px;
    font-size: 2rem
}

@media screen and (max-width: 767px) {
    ul#past-rankings {
        margin-bottom: 40px;
        margin-top: 60px;
        font-size: 16px;
        font-size: 1.1rem;
    }
    ul#past-rankings li {
        margin-right: 10px;
        width: 100px;
        font-size: 12px;
    }
    ul#past-rankings li a span {
        font-size: 20px;
        font-size: 2rem
    }
}