@charset "utf-8";
/*======== リセット ========*/
* {
    margin:          0;
    padding:         0;
    text-decoration: none;
    list-style-type: none;
    font-family:     ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メ イ リ オ";
    font-size:       12px;
}

img {
    border-style:   none;
    vertical-align: bottom;
    display:        block;
}

a {
    color: #00fff6;
}

a:visited {
    color: #a5a5a5;
}

a:hover {
    color:           #fff600;
    text-decoration: underline;
}

/*==== パーツ ====*/
/*----画像置換----*/
.link_img {
    display:         block;
    text-indent:     -9999px;
    overflow:        hidden;
    background-size: cover;
}

/*--- 共通レイアウト ---*/

body {
    background:          url("../images/all_base.png") repeat-y;
    background-position: top center;
    background-color:    #000000;
    color:               #362215;
}

.wrapper {
    max-width: 640px;
    min-width: 320px;
    margin:    0 auto;
}

/*--- トップヘッダー ---*/
header {
    position: relative;
}

.logo-konami {
    width: 130px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.logo-konami img {
    width: 100%;
    height: auto;
}


.main_img img {
    max-width: 640px;
    width:     100%;
}

.main_img a {
    display: block;
    margin: auto;
}

.main_img ul li {
    float:       left;
    line-height: 0;
}

.top_bar .qr_gree_s {
    position: absolute;
    top:      -116px; /*0;*/
    right:    0;
    margin:   0;
}

.top_bar .qr_gree_s img {
    width: 75px;
}

/*--- SNS ---*/
.sns {
    display: block;
    width:   126px;
}

.top_bar .sns {
    position:   absolute;
    top:        6px;
    right:      60px;
    text-align: center;
}

.sns li {
    display: inline-block;
}

.sns a {
    width:  28px;
    height: 28px;
}

.sns .line {
    background-image: url("../images/icn_line.png");
    background-size:  cover;
}

.sns .twitter {
    background-image: url("../images/icn_x_w.png");
    border-radius: 3px;
}

.sns .facebook {
    background-image: url("../images/icn_fb.png");
}

/*--- top イベントバナー ---*/
.bnr {
    width:  80%;
    margin: 10px auto;
}


/*--- コンテンツ共有 ---*/
.contents {
}

.contents img {
    max-width: 640px;
    width:     100%;
}

.contents .btn_close {
    display: block;
    width:   137px;
    margin:  10px auto;
}

.cont_main {
    position:             relative;
    background:           url("../images/paper_mdl.jpg") repeat-y;
    -moz-background-size: 100% auto;
    background-size:      100% auto;
}

.cont_main .paper_top {
    position: absolute;
    z-index:  100;
    top:      0;
}

.cont_main .paper_box {
    position: relative;
    z-index:  200;
    padding:  2% 0 0 0;
}

.cont_main .search_box_top {
    margin-top: 10px;
}

.cont_main .search_box_top img,
.cont_main .search_box_bottom img {
    width: 100%;
}

.cont_main .search_box_middle {
    background:           url("../images/searchbox_mdl.png") repeat-y;
    -moz-background-size: 100% auto;
    background-size:      100% auto;
}

.cont_main .search_list_box_top {
    margin-top: 10px;
}

.cont_main .search_list_box_top img,
.cont_main .search_list_box_bottom img {
    width: 100%;
}

.cont_main .search_list_box_middle {
    background:           url("../images/searchlistbox_mdl.png") repeat-y;
    -moz-background-size: 100% auto;
    background-size:      100% auto;
}

.about_box {
    padding: 5px 0;
}

.about_box .boxnavi_m {
    background:           url(../images/box_navi_mdl.png) repeat-y;
    -moz-background-size: contain;
    background-size:      contain;
}

.about_box .boxnavi_m .icn_navi img {
    max-width: 100px;
    width:     100%;
    height:    auto;
    padding:   2px 10px 2px 20px;
    float:     left;
}

.about_box .boxnavi_m .navi_txt {
    padding:     5px 0;
    margin:      0 20px;
    line-height: 1.5em;
}

/*-- ページボタン --*/

.page_btn img {
    max-height: 15px;
    width:      auto;
}

.page_btn ul {
    margin:     5px auto;
    text-align: center;
}

.page_btn li {
    display: inline-block;
}

/* box */
.cont_box {
    margin-bottom: 10px;
}

.cont_box .ibox_m {
    height:               auto;
    width:                100%;
    background-image:     url("../images/box_mdl2.png");
    -moz-background-size: contain;
    background-size:      contain;
}

.cont_box .ibox_m .element {
    width:       90%;
    height:      100%;
    margin:      0 auto;
    padding-top: 5px;
    line-height: 1.5em;
}

.cont_box .ibox_m .element p {
    padding: 5px 0;
}

.info img {
    display: block;
    margin:  0 auto;
    width:   auto;
}

/*--- トップコンテンツ ---*/
nav img {
    max-width: 640px;
    width:     100%;
}

.menu_base {
    background: url("../images/bg_header_menu.jpg") no-repeat;
}

nav ul {
    display:        table;
    width:          95%;
    margin:         0 auto;
    padding-bottom: 8px;
}

nav ul li {
    display:            table-cell;
    text-align:         center;
    /*width:              20%;*/
    vertical-align:     top;
    box-sizing:         border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
}

nav ul li a {
    display: block;
}

/*--- フッター ---*/
footer {
    max-width:  640px;
    padding:    20px 0;
    text-align: center;
}

footer ul {
    margin: 0 auto;
}

footer ul li {
    display:     inline-block;
    width:       auto;
    white-space: nowrap;
}
footer .support-link{
    margin: 20px 0 10px;
}
footer .support-link li{
    position: relative;
    display: inline-block;
    margin: 0 6px;
}
footer .support-link li:not(:last-child){
    padding-right: 5px;
    margin-right: 5px;
}
footer .support-link li:after {
    color: white;
    content: '|';
    display: inline-block;
    position: absolute;
    right: -8px;
    top: 0;
    opacity: 0.4;
}
footer .support-link li:last-child:after {
    display: none;
}
footer .ot-sdk #ot-sdk-btn{
    color: #00fff6;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: inline;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    font-size: 12px;
    outline: none;
    text-align: left;
    position: relative;
}
footer .ot-sdk #ot-sdk-btn:hover{
    color:           #fff600;
    text-decoration: underline;
}

footer p {
    color:      #FFFFFF;
    font-size:  90%;
    margin-top: 10px;
}

footer p a {
    font-size: 90%;
}

/*--- FAQ ---*/

#faq_list {
    max-width: 640px;
}

#faq_list ul {
    margin:     0 auto;
    text-align: center;
}

#faq_list li {
    width:           40%;
    min-width:       200px;
    padding:         5px 0 0 30px;
    margin:          15px 20px 0 0;
    background:      url(../images/sc_icon.png) left center no-repeat;
    background-size: 28px auto;
    border-bottom:   dashed #9d8e73 1px;
    display:         inline-block;
    text-align:      left;
}

#faq_list li a {
    display:         block;
    background:      url(../images/icn_arrow.png) right center no-repeat;
    background-size: 28px auto;
    color:           #362215;
}

.question {
    min-height:      63px;
    width:           100%;
    color:           #d60909;
    background:      url(../images/icn_faq_r.png) no-repeat;
    background-size: 70px auto;
}

.question p {
    max-width: 90%;
    margin:    0 0 5px 85px;
}

.line_dashed {
    border:      dashed #9d8e73 1px;
    width:       82%;
    margin-left: 15%;
}

.answer p {
    margin: 10px 0 10px 5px;
}

.answer .triangle {
    width:  98%;
    height: auto;
    border: 0;
    margin: 0 auto;
}

/*--- イベント ---*/
.event_img img {
    max-width:      35%;
    height:         auto;
    margin:         0 auto;
    padding-bottom: 5px;

}

.event_txt font {
    color: #F00;
}

/*--- ムービー ---*/
.movie_place {
    text-align: center;
}

/*--- モンスター ---*/
.bnr_monster {
    text-align: center;
}

.bnr_monster img {
    margin:  8px 0;
    display: inline-block;
    width:   90%;
}

.monster_search {
    padding: 0 6% 8px;
}

.monster_search img {
    width: auto;
}

.monster_search .filter {
    padding:       10px 0;
    border-bottom: #7c5a11 dotted 1px;
}

.monster_search #filters .filter:last-child {
    border: none;
}

.monster_search h1 {
    margin-bottom: 10px;
}

.monster_search .toggle_btns {

}

.monster_search .toggle_btn {
    display: inline-block;
}

.monster_search .toggle_btn img {
    width: 4.4em;
}

.monster_search input,
.monster_search select {
    width: 95%;
}

.monster_search .submit {
    text-align: center;
}

.monster_search .submit img {
    display: inline-block;
    width:   100px;
}

/* モンスター一覧 */
.monster_list {
    padding: 8px 5%;
}

.monster_list a {
    text-decoration: underline;
    color:           #000000;
}

.monster_list img {
    width: auto;
}

.monster_list .dotline {
    border:     none;
    border-top: dotted 1px #7c5a11;
    height:     1px;
    margin: 8px 4px 4px;
}

.monster_list .sort_info {
    font-size: 8px;

}

.monster_list .btn_back {
    text-align: center;
    padding:    10px 0;
}

.monster_list .btn_back img {
    display: inline-block;
    width:   150px;
}

.monster_list .sort {
    margin-top: 10px;
}

.monster_list .monster_list_tbl {
    table-layout:   fixed;
    border-spacing: 0 2px;
    width:          100%;
}

.monster_list .monster_list_item_col {
    text-align:  center;
    height:      100%;
    border:      1px solid #c9a05f;
    border-left: none;
    background:  #fff8dd;
}

.monster_list .monster_list_item_col:first-child {
    border-left: 1px solid #c9a05f;
}

.monster_list .monster_list_item_col,
.monster_list .monster_list_item_col * {
    font-size:   10px;
    line-height: 12px;
}

.monster_list .sort_rarity {
    width: 50px;
}

.monster_list .sort_name {
}

.monster_list .sort_cost {
    /*width: 31px;*/
    width: 11%;
}

.monster_list .sort_attack {
    /*width: 45px;*/
    width: 15%;
}

.monster_list .sort_defence {
    /*width: 45px;*/
    width: 15%;
}

.monster_list .btn_sort img {
    margin: 0 auto;
}

.monster_list .sort_name img {
    width: 61px; /*123*/
}

.monster_list .sort_rarity img {
    width: 38px; /*76*/
}

.monster_list .sort_cost img {
    width: 31px; /*63*/
}

.monster_list .sort_attack img {
    width: 32px; /*64*/
}

.monster_list .sort_defence img {
    width: 32px; /*64*/
}

.monster_list .monster_col_thumb img {
    width: 48px;
}

.monster_list .monster_col_basic {
    position: relative;
}

.monster_list .monster_col_basic .name,
.monster_list .monster_col_basic .skill {
    text-align: left;
    margin-left: 8px;
}

.monster_list .monster_col_basic .monster_list_attr_icon,
.monster_list .monster_col_basic .monster_list_race_icon,
.monster_list .monster_col_basic .monster_list_race2_icon {
    position: absolute;
    top:      4px;
}

.monster_list .monster_col_basic .monster_list_attr_icon {
    left: 6px;
}

.monster_list .monster_col_basic .monster_list_race_icon {
    left: 26px;
}

.monster_list .monster_col_basic .monster_list_race2_icon {
    left: 46px;
}

.monster_list .pagination {
    margin-top: 10px;
    text-align: center;
}

.monster_list .pagination li {
    display: inline-block;
    float:   none;
}

.monster_list .pagination a,
.monster_list .pagination span {
    min-width:   30px;
    height:      30px;
    line-height: 30px;
    padding:     0 2px;
}

.monster_list .monster_info {
    font-size: 8px;
}

.monster_list .date_info {
    margin-top: 8px;
    font-size: 8px;
}

/*モンスター詳細*/
.cont_box_monster_detail {
    margin-top: 10px;
}

.monster_detail {
    width:   90%;
    margin:  0 auto;
    padding: 10px 0;
}

.monster_detail .btn_back img {
    display: block;
    width:   150px;
    margin:  20px auto 20px;
}

.monster_detail_tbl {
    border-collapse: collapse;
    width:           100%;
}

.monster_detail_tbl a,
.monster_detail_tbl a:hover,
.monster_detail_tbl a:visited,
.monster_evol_tbl a,
.monster_evol_tbl a:hover,
.monster_evol_tbl a:visited {
    color:           #036676;
    text-decoration: underline;
}

.monster_detail_visual {
    text-align: center;
}

.monster_detail_name,
.monster_evol_name {
    font-size:   larger;
    font-weight: bolder;
}

.monster_detail_name_kana {
    font-size: smaller;
}

.monster_detail_comment {
    color: #b87510;
}

.monster_detail_tbl th,
.monster_evol_tbl th {
    background: #f0e4d4;
    border:     1px solid #c9a05f;
    width:      60px;
    padding:    4px 2px;
}

.monster_detail_tbl td,
.monster_evol_tbl td {
    text-align: center;
    background: #fcf4e7;
    border:     1px solid #c9a05f;
    /*width:      140px;*/
    padding:    4px 2px;
}

.monster_evol_tbl {
    border-collapse: collapse;
    width:           100%;
    margin-top:      20px;
}

.monster_evol_visual {
    width: 90px;
}

.monster_detail .date_info {
    font-size: 8px;
}

/*--- topics ---*/
.topics-box {
    max-width: 90%;
    margin: 20px auto;
}

.topics-box h1 {
    margin-bottom: 20px;
    font-size: 15px;
}

.topics-box p+p {
    margin-top: 15px;
}