@charset 'UTF-8';
body.menu_opn {
    width: 100%;
    position: fixed;
    overflow: hidden;
}

#iphone-layout {
    position: relative;
    z-index: 1;
}

.common_menu {
    height: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    right: -276px;
}

#iphone-layout,
.common_menu,
.menu_header {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.menu_opn #iphone-layout,
.menu_opn .common_menu {
    transform: translate3d(-276px, 0, 0);
}

/* 上部固定 */
.fix_top {
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* メニュー枠 */
.menu_frame {
    width: 276px;
    height: 100%;
    padding: 6px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #333;
    -webkit-overflow-scrolling: touch;
}

.menu_frame::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

.menu_frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #000;
}

.local_area .menu_frame::-webkit-scrollbar-thumb {
    background-color: #888;
}

.menu_frame .hl_menu {
    padding: 6px 10px 4px;
    font-size: 12px;
    line-height: 1em;
    color: #fff;
}

.menu_frame .hl_menu::before {
    width: 0.6em;
    height: 0.6em;
    margin-right: 6px;
    display: inline-block;
    content: '';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    vertical-align: baseline;
    background-color: #4db0ea;
}

.list_common_menu {
    margin-top: 2px;
}

.list_common_menu .elm {
    padding: 4px 6px 0;
}

.list_common_menu .btn_normal {
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    border-radius: 2px;
    background-color: #004f7d;
    box-shadow: 0 -1px 0 #000 inset, 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.list_common_menu .swich_accordion,
.list_common_menu .arrow_icon {
    position: relative;
}

.list_common_menu .swich_accordion::after,
.list_common_menu .arrow_icon::after {
    height: 1em;
    margin: auto 0;
    font-family: 'icomoon';
    font-weight: normal;
    line-height: 1em;
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    color: #fff;
}

.list_common_menu .arrow_icon {
    height: 44px;
    padding-left: 46px;
    line-height: 44px;
}

.arrow_icon::after {
    font-size: 0.8em;
    right: 8px;
    content: '\e904';
}

.list_common_menu .icon {
    height: 24px;
    margin: auto;
    font-size: 24px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    vertical-align: middle;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
}

.item.list_common_menu .icon {
    color: #fde2f3;
}

.shop.list_common_menu .icon {
    color: #ccecfe;
}

/* --------------------------------------- */
/* アイコンサイズ調整 */
.list_common_menu .icon.size30 {
    height: 32px;
    font-size: 32px;
    left: 8px;
}

/* 外部サイト */
.list_common_menu .arrow_icon.other {
    padding-left: 8px;
    font-size: 14px;
}

.list_common_menu .arrow_icon.other .site_name {
    font-size: 16px;
    font-weight: bold;
}

/* --------------------------------------- */
/* マスク */
.yg_nav .menu_mask {
    width: 100%;
    height: 120%;
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
}

/* --------------------------------------- */
/* 閉じるボタン */
.yg_nav .btn_close {
    padding: 4px;
    font-size: 30px;
    position: absolute;
    z-index: 10000;
    top: 1px;
    left: -44px;
    display: none;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
    text-align: center;
    opacity: 0;
    color: #fff;
}

.mdl_open .yg_nav .btn_close {
    display: block;
}

.yg_nav .btn_close .lbl {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1em;
}

.menu_opn .yg_nav .btn_close {
    opacity: 1;
}

/* --------------------------------------- */
/* 区切り線 */
.yg_nav .hr_gp {
    margin: 8px 0;
    display: block;
    border-width: 1px 0;
    border-style: solid;
    border-color: #000 transparent #555;
}

/* --------------------------------------- */
/* バナー */
.common_menu .box_banner {
    padding: 2px 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    background-color: transparent;
}

/* フェチGALLERYバナー */
.img_banner {
    width: 100%;
    max-width: 480px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* --------------------------------------- */
/* マイページへのリンク */
.box_mypage {
    padding: 0 6px;
}

.box_mypage .btn_login {
    height: 40px;
    font-weight: bold;
    line-height: 40px;
    display: block;
    text-align: center;
    color: #000;
    border-radius: 4px;
    background-color: #7fd0ff;
    box-shadow: 0 -1px 0 #004f7d inset, 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ログイン中の場合 */
.box_mypage .arrow_icon {
    padding-right: 10px;
    padding-left: 2px;
    font-size: 14px;
    position: relative;
    display: block;
    color: #fff;
}

.box_mypage .arrow_icon::after {
    right: 0;
}

.box_mypage .user_name {
    font-size: 1.1em;
    font-weight: bold;
    color: #bfffc9;
}

.box_mypage .user_point {
    font-size: 12px;
}

.box_mypage .user_point .point {
    font-size: 1.1em;
}

.box_mypage .user_point .num {
    margin-right: 2px;
    font-size: 1.2em;
}

/* --------------------------------------- */
/* エリア版用 */
/* --------------------------------------- */
/* アイコン色 */
.area.list_common_menu .icon {
    color: #ffffbf;
}

/* --------------------------------------- */
/* アコーディオン */
.list_common_menu .box_accordion .swich_accordion {
    padding: 10px 10px 10px 46px;
    display: block;
    color: #fff;
}

/* 開閉ボタン */
.list_common_menu .box_accordion .swich_accordion::after {
    font-size: 18px;
    right: 10px;
    content: '\e90f';
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.list_common_menu .box_accordion .swich_accordion.open::after {
    transform: rotate(45deg);
}

/* アコーディオン時のアイコン表示位置 */
.list_common_menu .box_accordion .icon {
    top: 10px;
    bottom: auto;
}

/* アコーディオン中身 */
.list_common_menu .list_accordion {
    padding-bottom: 8px;
    display: none;
}

.list_common_menu .list_accordion .elm {
    padding-top: 0;
    padding-bottom: 2px;
}

.list_common_menu .list_accordion .arrow_icon {
    height: 40px;
    padding-left: 10px;
    font-size: 12px;
    line-height: 40px;
    display: block;
    color: #fff;
    border-radius: 2px;
    background-color: #000;
}

.list_accordion .arrow_icon .area {
    font-size: 16px;
}

/* ジャンルで探す用 halfサイズ */
.list_common_menu .list_accordion.half::after {
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    content: '.';
}

.list_common_menu .list_accordion.half .elm {
    width: 44%;
    width: calc(50% - 8px);
    float: left;
}

.list_common_menu .list_accordion.half .elm:nth-child(odd) {
    padding-right: 1px;
}

.list_common_menu .list_accordion.half .elm:nth-child(even) {
    padding-left: 1px;
}

/* --------------------------------------- */
/* 女の子から探す・お店から探す */
.list_common_menu .fl_inner.btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.area.list_common_menu .search-menu .arrow_icon {
    height: 53px;
    padding-top: 8px;
    padding-left: 10px;
    line-height: 52px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.area.list_common_menu .search-menu .img-frame {
    margin-right: 4px;
    position: relative;
    display: block;
    border: 1px solid #f23a3a;
}

.area.list_common_menu .search-menu .img-frame::after,
.area.list_common_menu .search-menu .img-frame::before {
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1;
    content: '';
    border-style: solid;
    border-color: transparent;
}

.area.list_common_menu .search-menu .img-frame::before {
    top: 0;
    left: 0;
    border-width: 0 0 6px 6px;
    border-left-color: #f23a3a;
}

.area.list_common_menu .search-menu .img-frame::after {
    right: 0;
    bottom: 0;
    border-width: 6px 6px 0 0;
    border-right-color: #f23a3a;
}

.area.list_common_menu .img-frame img {
    height: 50px;
}

/* 文言 */
.area.list_common_menu .search-menu .catch {
    font-size: 12px;
}

.area.list_common_menu .search-menu .title {
    font-size: 18px;
    font-weight: bold;
}

/* --------------------------------------- */
/* 特集 */
.list_common_menu .feature {
    padding: 8px;
}

.list_common_menu .btn_normal.feature .fl_base {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.list_common_menu .feature .lbl_date {
    height: 24px;
    margin-right: 14px;
    margin-left: -8px;
    padding-right: 6px;
    padding-left: 8px;
    font-size: 11px;
    font-weight: bold;
    line-height: 24px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background-color: #000;
    -webkit-flex: 1 1 70px;
    -ms-flex: 1 1 70px;
    flex: 0 1 70px;
}

.list_common_menu .feature .lbl_date::after,
.list_common_menu .feature .lbl_date::before {
    position: absolute;
    z-index: 1;
    right: -10px;
    content: '';
    border-style: solid;
}

.list_common_menu .feature .lbl_date::after {
    top: 0;
    border-width: 12px 10px 0 0;
    border-color: #000 transparent transparent transparent;
}

.list_common_menu .feature .lbl_date::before {
    position: absolute;
    bottom: 0;
    border-width: 0 10px 12px 0;
    border-color: transparent transparent #000 transparent;
}

.list_common_menu .feature .main_title {
    font-weight: bold;
}

.list_common_menu .feature .sub_title {
    margin-top: 4px;
    padding: 4px;
    font-size: 14px;
    line-height: 1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #002f4b;
}

/* --------------------------------------- */
/* 他のエリア */
.common_menu .other_area {
    margin-top: 4px;
    padding: 0 6px;
}

.common_menu .other_area .fl_inner {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.common_menu .other_area .fl_inner:first-child,
.common_menu .other_area .fl_inner:nth-child(2):nth-last-child(2) {
    padding-right: 2px;
}

.common_menu .other_area .fl_inner:last-child,
.common_menu .other_area .fl_inner:nth-child(2):nth-last-child(2) {
    padding-left: 2px;
}

.common_menu .other_area .link_other {
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    display: block;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    background-color: #000;
}
