@charset "utf-8";

/*-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
    border: 0;font-family: inherit;font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
input:focus {outline: 0;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
ul{list-style-type: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/*-------------------------------------------------------------- */

html {
    font-size: 62.5%;
    height: 100%;
    width: 100%;
}
body {
    font-size: 1.2em;
    /*12px*/
    color: #694F47;
    background-image: url(../images/common/bg_main.png);
    font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'ＭＳ Ｐゴシック', Arial, sans-serif;
    height: 100%;
    width: 100%;
    line-height: 1.8rem;
    letter-spacing: 0.1rem;
}
body a {
    color: #694F47;
}
body a:hover {
    color: #88685e;
    text-decoration-line: underline;
}
body p {
    padding-bottom: 2px;
}
body input[type="submit"],
body input[type="button"],
body button {
    cursor: pointer;
}
body input[type="checkbox"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
body input[type="submit"],
body input[type="button"] {
    -webkit-appearance: none;
}
body strong {
    font-weight: bold;
}
body input[type="text"],
body input[type="password"] ,
body select{
    border: 1px solid #D6C0B9;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 3px;
    padding: 4px;
}
body textarea{
    border: 1px solid #D6C0B9;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 3px;
    padding: 4px;
}
#wrapper {
    background-image: url(../images/common/bg_outsidethe.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    height: auto;
    width: 100%;
    margin: 0px auto;
    position: relative;
    overflow-x: hidden;
}
#container {
    position: relative;
    background-image: url(../images/common/bg_footer.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 960px;
    height: auto;
    margin: 0px auto;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #container {
        background-image: url(../images/common/bg_footer@2x.png);
        background-size: 489px 67px;
    }
}

#container .container_body {
  padding-bottom: 100px;
  background-image: url(../images/common/bg_footer.png);
  background-repeat: no-repeat;
  background-position: bottom right;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #container .container_body {
    background-image: url(../images/common/bg_footer@2x.png);
    background-size: 489px 67px;
  }
}
#container .container_body.halloween {
  background-image: url(../images/common/bg_footer_halloween.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #container .container_body.halloween {
    background-image: url(../images/common/bg_footer_halloween@2x.png);
  }
}
#container .container_body.winter {
  background-image: url(../images/common/bg_footer_winter.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #container .container_body.winter {
    background-image: url(../images/common/bg_footer_winter@2x.png);
  }
}
#container .container_body.xmas {
  background-image: url(../images/common/bg_footer_christmas.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #container .container_body.xmas {
    background-image: url(../images/common/bg_footer_christmas@2x.png);
  }
}
#container .container_body.new-year {
  background-image: url(../images/common/bg_footer_new_year.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #container .container_body.new-year {
    background-image: url(../images/common/bg_footer_new_year@2x.png);
  }
}

#container .return_top {
    width: 200px;
    position: absolute;
    top: bottom;
    right: 50px;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    html,
    body {
        height: 100%;
        width: 100%;
    }
    #wrapper {
        height: auto;
        width: 100%;
        margin: 0px auto;
        position: relative;
    }
    #container {
        width: 98%;
        height: auto;
        margin: 0px auto;
    }
}
/* 760px以下 */

@media only screen and (max-width: 760px) {
    #wrapper {
        overflow-x: inherit;
        -webkit-overflow-scrolling: touch;
    }
    #container {
        width: 760px;
        height: auto;
        margin: 0px auto;
    }
}
/* header
---------------------------------------*/

#header {
    height: auto;
    
    padding-top: 6px;
}
#header ol,
#header ul,
#header li {
    list-style: none;
}
#header a {
    text-decoration: none;
}
#header .header_body {
    height: 150px;
    position: relative;
    background-image: url(../images/common/bg_header.png);
    background-repeat: no-repeat;
    background-position: 78% bottom;
    background-size: 684px 115px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #header .header_body {
        background-image: url(../images/common/bg_header@2x.png);
        background-position: right bottom;
        background-size: 684px 115px;
    }
}
#header .header_body.halloween {
  background-image: url(../images/common/bg_header_halloween.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #header .header_body.halloween {
    background-image: url(../images/common/bg_header_halloween@2x.png);
  }
}
#header .header_body.winter {
  background-image: url(../images/common/bg_header_winter.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #header .header_body.winter {
    background-image: url(../images/common/bg_header_winter@2x.png);
  }
}
#header .header_body.xmas {
  background-image: url(../images/common/bg_header_christmas.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #header .header_body.xmas {
    background-image: url(../images/common/bg_header_christmas@2x.png);
  }
}
#header .header_body.new-year {
  background-image: url(../images/common/bg_header_new_year.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #header .header_body.new-year {
    background-image: url(../images/common/bg_header_new_year@2x.png);
  }
}
#header .ie8_area {
    background-color: #2c65ff;
    color: #fff;
    text-align: center;
    font-size: 12px;
    display: none;
}
#header .ie_unsupported {
    background-color: #2c65ff;
    color: #fff;
    text-align: center;
    font-size: 16px;
    height: 34px;
    padding-top: 10px;
}
#header .ie_unsupported a {
    color: #fff;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    #header .header_body {
        background-position: right bottom;
    }
}

.mobile_area {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-height: 80px;
    background-color: rgba(51, 51, 51, 0.75);
    text-align: center;
    font-size:3.0rem;
    line-height: 1.3;
}
.mobile_area a {
    display: block;
    color: #fff;
    padding-top: 20px;
}


/*--ロゴ-----------------------------*/

.logo {
    width: 268px;
    height: 66px;
    position: absolute;
    top: 0;
    left: 0;
}
.logo a{
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/logo.png) ;
    background-repeat: no-repeat;
    background-position: 0 0;
    text-indent: -9999px;
}
.logo img {
    max-width: 100%;
    padding-top: 0px;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    .logo {
        width: 30%;
    }
}
/*-ガイドボタン-----------------------------*/

#header .btn_area {
    position: absolute;
    top: 0;
    right: 0;
}
#header .btn_area > div:first-child {
    margin-bottom: 4px
}
#header .btn_area li {
    float: right;
    margin-left: 4px;
}
#header .btn_area li span {
    vertical-align: -4px;
}
#header .btn_area li > button {
    display: block;
    min-width: 140px;
    font-size: 1rem;
    height: 24px;
}
#header .btn_area ul:after {
    content: "";
    clear: both;
    display: block;
}
#header .btn_orange {
    color: #ffffff;
    background-color: #FFA017;
    padding: 4px 10px;
    text-align: center;
    border: none;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#header .btn_status {
    color: #856B54;
    padding: 4px 10px;
    text-align: center;
    border: 1px solid #D89D27;
    background-color: #FFFFFF;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#header .btn_status span {
    color: #FAB505;
}
#header .btn_area li > button span {
    padding-right: 4px;
    font-size: 1.6rem;
}
#header .btn_area .btn_area_down.sp{
        margin-right: 120px;
    }
/* 960px以下 */
@media only screen and (max-width: 960px) {
    #header .btn_area li > button {
        min-width: 120px;
    }
}
/*-board_area-----------------------------*/

.board_area {
    position: relative;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 50%;
}
#header .minnano {
    display: block;
    width: 209px;
    height: 76px;
    text-indent: -9999px;
    background-image: url(../images/common/logo_minnano.png);
    position: absolute;
    top: 0;
    left: 0;
}
#header .minnano:hover {
    background-position: left bottom;
}
#header .sns {
    display: block;
    width: 72px;
    height: 42px;
    background-image: url(../images/common/bg_header_sns.png);
    position: absolute;
    top: 34px;
    left: 226px;
}
#header .fb,
#header .tw {
    display: inline-block;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    cursor: pointer;
    margin-top: 7px;
}
#header .fb {
    background-image: url(../images/common/btn_header_fb.png);
    margin-left: 12px;
}
#header .fb:hover {
    background-position: left bottom;
}
#header .tw {
    background-image: url(../images/common/btn_header_tw.png);
}
#header .tw:hover {
    background-position: left bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    #header .minnano {
        background-image: url(../images/common/logo_minnano@2x.png);
        background-size: 209px 152px;
    }
    #header .sns {
        background-image: url(../images/common/bg_header_sns@2x.png);
        background-size: 72px 42px;
    }
    #header .fb {
        background-image: url(../images/common/btn_header_fb@2x.png);
        background-size: 22px;
    }
    #header .tw {
        background-image: url(../images/common/btn_header_tw@2x.png);
        background-size: 22px;
    }
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    .board_area {
        position: relative;
        top: 50%;
        left: 55%;
    }
}
/*-clock_area-----------------------------*/

.clock_base {
    position: absolute;
    top: 70px;
    right: 0;
}
#header .clock_area {
    position: relative;
    top: -54%;
    right: 450%;
    width: 20%;
}
#header .clock_area .clock {
    position: relative;
    background: #ffffff;
    border: 1px solid #D6C0B9;
    width: 148px;
    height: 40px;
    border-radius: 6px;
    padding: 4px;
    text-align: center;
}
#header .clock_area .clock:after,
#header .clock_area .clock:before {
    left: 100%;
    top: 40%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#header .clock_area .clock:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #ffffff;
    border-width: 8px;
    margin-top: -8px;
}
#header .clock_area .clock:before {
    border-color: rgba(214, 192, 185, 0);
    border-left-color: #D6C0B9;
    border-width: 9px;
    margin-top: -9px;
}
#header .clock_area .date {
    
}
#header .clock_area .date strong {
    font-size: 1.6rem;
}
#header .clock_area .time {
    font-size: 1.9rem;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    #header .clock_area {
        position: relative;
        top: -54%;
        right: 410%;
    }
}
@media only screen and (max-width: 840px) {
    #header .clock_area {
        position: relative;
        top: -54%;
        right: 580%;
    }
    #header .clock_area .clock {
        width: 100px;
        height: 36px;
        border-radius: 6px;
        padding-top: 4px;
        text-align: center;
    }
    #header .clock_area .date {
        
    }
    #header .clock_area .date strong {
        font-size: 1.4rem;
    }
    #header .clock_area .time {
        font-size: 1.4rem;
    }
}
/*-navi-----------------------------*/

.top_navi_bg {
    width: 877px;
    height: 65px;
    background-image: url(../images/common/bg_top_navi.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin: 0 auto;
}
.top_navi {
    height: auto;
    width: 854px;
    clear: both;
    margin: 0px auto;
    background-color: #8CC229;
    /* Border-Radius */
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 10px;
}
.top_navi ul {
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.top_navi li {
    width: 142px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    letter-spacing: 0.2rem;
}
.top_navi li.btn_left {
    border-right: 1px dashed #ffffff;
}
.top_navi li a {
    display: block;
    width: auto;
    height: auto;
}
.top_navi .btn {
    height: auto;
    margin-left: 8px;
    margin-right: 8px;
    color: #ffffff;
}
.top_navi .btn:hover {
    background-color: #A8DE17;
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    color: #095909;
}
.top_navi .btn:hover span {
    color: #6BAB17;
}
.top_navi .text {
    padding-top: 0px;
    
    letter-spacing: 0rem;
}
.text span {
    color: #FFFB78;
    font-size: 1rem;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    .top_navi_bg {
        width: 100%;
    }
    .top_navi {
        width: 100%;
    }
    .top_navi ul {
        width: 96%;
        padding-top: 4px;
        padding-bottom: 4px;
        display: block;
        text-align: center;
        margin: 0 auto;
    }
    .top_navi .text {
        font-size: 1rem;
    }
    .text span {
        font-size: 1rem;
    }
}
/* navi-sidr
---------------------------------------*/

.navi-sidr {
    display: none;
}
.navi-sidr .icon-door,
.navi-sidr .icon-exclamation,
.navi-sidr .icon-star,
.navi-sidr .icon-memo,
.navi-sidr .icon-question,
.navi-sidr .icon-balloon,
.navi-sidr .icon-phone,
.navi-sidr .icon-gear,
.navi-sidr .icon-checkbox,
.navi-sidr .icon-doubleballoon {
    color: #FFA017;
}
.navi-sidr .icon-paw {
    color: #FF7808;
}
.navi-sidr .icon-color {
    color: #3B6EB5;
}
.navi-sidr .icon-notebook {
    color: #FFA017;
}
.navi-sidr_medium {
    display: none;
}
.navi-sidr_medium .icon-door,
.navi-sidr_medium .icon-exclamation,
.navi-sidr_medium .icon-star,
.navi-sidr_medium .icon-memo,
.navi-sidr_medium .icon-question,
.navi-sidr_medium .icon-balloon,
.navi-sidr_medium .icon-phone,
.navi-sidr_medium .icon-gear,
.navi-sidr_medium .icon-checkbox,
.navi-sidr_medium .icon-doubleballoon {
    color: #FFA017;
}
.navi-sidr_medium .icon-paw {
    color: #FF7808;
}
.navi-sidr_medium .icon-color {
    color: #3B6EB5;
}
.navi-sidr_medium .icon-notebook {
    color: #FFA017;
}
#navi {
    float: left;
    height: auto;
    width: 190px;
    height: auto;
    margin-left: 10px;
    
}
#navi ol,
#navi ul,
#navi li {
    list-style: none;
}
#navi a {
    text-decoration: none;
}
#navi ul {
    padding: 6px 0;
    height: auto;
}
#navi li {
    width: auto;
    height: auto;
    background-color: #ffffff;
}
#navi li .border {
    height: 2px;
    border-top: 2px #C19672 dotted;
    margin: 6px 12px 4px 9px;
}
#navi .box_00 {
    width: auto;
    height: auto;
    margin: 0px 10px 0px 5px;
    padding: 3px 0px 6px 12px;
}
#navi .box_00 span {
    vertical-align: middle;
}
.box_00 div > span {
    padding-right: 10px;
}
#navi .box_00 > div {
    padding-top: 4px;
    margin-bottom: 4px;
    display: table-cell;
    vertical-align: middle;
}
#navi .box_00:hover {
    background-color: #C4AB87;
    -webkit-border-radius: 8px 8px 8px 8px;
    -moz-border-radius: 8px 8px 8px 8px;
    border-radius: 8px 8px 8px 8px;
    color: #ffffff;
}
#navi .box_00:hover span {
    color: #ffffff;
}
#navi .box_01:hover span {
    color: #ffffff;
}
#navi .navi_push {
    height: auto;
    background-color: #ffffff;
}
#navi .navi_uranai {
    height: auto;
    background-color: #ffffff;
}
#navi .navi_other {
    background-color: #ffffff;
}
#navi .icon_area > span {
    color: #FFA017;
    font-size: 1.6rem;
}
#navi .navi_uranai .icon-paw {
    color: #FF7808;
}
#navi .navi_uranai .icon-man {
    color: #7FDBF4;
}
#navi .navi_uranai .icon-crystal_ball {
    color: #D47AEA;
}
#navi .navi_uranai .icon-heart {
    color: #FF9FE8;
}
#navi .navi_uranai .icon-ribbon {
    color: #FF8270;
}
#navi .navi_uranai .icon-bag {
    color: #A8DE17;
}
#navi .navi_uranai .icon-crown {
    color: #FFD00B;
}
#navi .navi_uranai .icon-color {
    color: #3B6EB5;
}
#navi .navi_other .icon-paw {
    color: #FFA017;
}
#navi .icon-color {
    color: #3B6EB5;
}
#navi .icon-notebook {
    color: #FFA017;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    .navi-sidr {
        display: none;
    }
    /*占いメニュー用*/
    .navi-sidr_medium {
        display: inherit;
    }
    .medium_hide {
        display: none;
    }
}
/* 760px以下 */

@media only screen and (max-width: 760px) {
    .navi-sidr {
        display: inherit;
    }
    .small_hide {
        display: none;
    }
}
/* footer
---------------------------------------*/

#footer {
    clear: both;
    background-color: #BDA17D;
    border-top: 12px #409116 solid;
    
}
#footer ol,
#footer ul,
#footer li {
    list-style: none;
}
#footer a {
    color: #ffffff;
    text-decoration: none;
}
#footer .title {
    color: #ffffff;
    font-size: 1.8rem;
    padding-left: 20px;
    margin-bottom: 10px;
}
#footer .footer_body {
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
}
#footer .footer_contents li {
    color: #ffffff;
}
#footer .footer_account li {
    clear: both;
    color: #ffffff;
    line-height: 2rem;
    font-size: 1.75rem;
    margin-bottom: 10px;
}
.footer_account li a > div {
    display: inline-block;
    vertical-align: middle;
}
.footer_account .bg_white {
    background-color: #ffffff;
    width: 30px;
    height: 30px;
    letter-spacing: 0;
    line-height: 0.4rem;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.footer_account span {
    color: #693D26;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#footer .footer_mobile p {
    text-align: center;
}
#footer .footer_mobile img {
    width: 123px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#footer .line {
    border-left: solid 2px #ccb4a2;
    border-right: solid 2px #876955;
}
#footer .copyright {
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.2rem;
}
#return_top_btn .btn_jump {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #FFA017;
    -webkit-border-radius: 25px;
    /* width,heightの半分 */
    -moz-border-radius: 25px;
    border-radius: 25px;
}
#return_top_btn .icon-arrow_up {
    display: block;
    color: #fff;
    font-size: 3.4rem;
    padding-top: 7px;
    padding-left: 8px
}
#footer {
    width: 100%;
    height: 240px;
    margin: 0 auto;
}
#footer .footer_body {
    width: 960px;
    height: auto;
}
.footer_body > ul {
    width: 960px;
}
.footer_body ul > li {
    float: left;
}
#footer .footer_contents {
    width: 45%;
}
#footer .footer_contents > div {
    width: 100%;
}
#footer .footer_contents div > ul {
    padding-left: 40px;
}
#footer .footer_contents ul > li {
    float: left;
    width: 50%;
    list-style: disc;
    list-style-position: inside;
}
#footer .footer_account {
    width: 25%;
}
#footer .footer_account div > ul {
    padding-left: 40px;
}
#footer .footer_mobile {
    width: 25%;
}
#footer .line {
    width: 1px;
    height: 140px;
}
/* 960px以下 */

@media only screen and (max-width: 960px) {
    #footer {
        width: 100%;
        height: 240px;
    }
    #footer .footer_body {
        width: 96%;
        height: auto;
        margin: 10px auto;
    }
    .footer_body > ul {
        width: 96%;
        margin: 0px auto;
    }
    .footer_body ul > li {
        float: left;
        margin-right: 2%;
    }
    #footer .footer_contents {
        width: 30%;
    }
    #footer .footer_contents > div {
        width: 100%;
    }
    #footer .footer_contents div > ul {
        padding-left: 30px;
    }
    #footer .footer_contents ul > li {
        float: none;
        width: 100%;
        list-style: disc;
        list-style-position: inside;
    }
    #footer .footer_account {
        width: 29%;
    }
    #footer .footer_account div > ul {
        padding-left: 30px;
    }
    #footer .footer_mobile {
        width: 29%;
    }
    #footer .line {
        width: 1px;
        height: 140px;
    }
}
/* 760px以下 */

@media only screen and (max-width: 760px) {
    #footer {
        width: 760px;
        min-height: 240px;
        padding-bottom: 80px;
    }
}
/* common class
---------------------------------------*/
.content_area {
  margin-right: auto;
  margin-left: auto;
}
.content_area_body {
  position: relative;
  background-color: #ffffff;
  padding: 2% 2% 1%;
}
.content_area_body > p {
  padding: 4px;
}

/* font */

.font_small {
    font-size: 1rem !important;
}
.font14 {
    font-size: 1.4rem !important;
}
.font18 {
    font-size: 1.8rem !important;
}
.bold {
    font-weight: bold;
}
.hide {
    display: none !important;
}
.hide_text{
    position: absolute!important;
    clip: rect(1px 1px 1px 1px);
}
.left {
    float: left !important;
}
.right {
    float: right !important;
}
/* margin */

.margin_bottom1 {
    margin-bottom: 14px;
}
/*マージンボトム14px*/

.margin_bottom2 {
    margin-bottom: 24px;
}
/*マージンボトム24px*/

.margin_top1 {
    margin-top: 14px;
}
.center_margin {
    margin-left: auto;
    margin-right: auto;
}
/* text-align */

.center_text {
    text-align: center;
}
.left_text {
    text-align: left !important;
}
.right_text {
    text-align: right !important;
}
.middle_align {
    vertical-align: -0.2em;
}
/* color */

.red {
    color: #fd0000;
}
.blue {
    color: #3366CC
}
.attention {
    color: #996633;
}
/* background-color */

.bg_white {
    background-color: #fff;
}
/* padding */

.padding_6 {
    padding: 6px;
}
/* other */
.cancel{
    text-decoration: line-through;
    color: #fd0000;
}

.corner {
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
/* display */

.inline_block {
    display: inline-block !important;
    vertical-align: middle;
}
.clear {
    clear: both;
}
/* display */
.relative{
    position: relative !important;
}
/* heading class
---------------------------------------*/

div.heading_blue,
div.heading_brown,
div.heading_green,
div.heading_orange,
div.heading_red{
    position: relative;
    min-height: 28px;
    height: auto;
    padding: 8px 0px 0px 10px;
    font-size: 1.4rem;
    line-height: 2.4rem;
    color: #ffffff;
    letter-spacing: 0.2rem;
    border-top: 1px solid #D6C0B9;
    border-left: 1px solid #D6C0B9;
    border-right: 1px solid #D6C0B9;
    /* Border-Radius */
    -webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}

div.heading_non-color {
    position: relative;
    min-height: 28px;
    height: auto;
    padding: 8px 0px 0px 10px;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    /* Border-Radius */
    -webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
.heading_blue .sub_text,
.heading_red .sub_text,
.heading_brown .sub_text,
.heading_green .sub_text,
.heading_orange .sub_text {
    color: #FFEBC9;
    font-size: 0.9rem;
    letter-spacing: 0.2rem;
    padding-left: 5px;
}
div.heading_blue div,
div.heading_red div,
div.heading_brown div,
div.heading_green div,
div.heading_orange div {
    display: table-cell;
    vertical-align: middle;
}
/*右端に設置*/

.heading_orange .btn_area {
    position: absolute;
    right: 10px;
    top: 8px;
    text-align: right;
}
.heading_orange .btn_area a {
    text-decoration: none;
    color: #fff;
    font-size: 2rem;
}
.heading_blue {
    background-image: url(../images/common/bg_blue.png);
}
.heading_blue2 {
    background-image: url(../images/common/bg_blue2.png);
}
.heading_red {
    background-image: url(../images/common/bg_red2_a.png);
}
.heading_brown {
    background-image: url(../images/common/bg_brown.png);
}
.heading_green {
    background-image: url(../images/common/bg_green.png);
}
.heading_orange {
    background-image: url(../images/common/bg_orange.png);
}
h3 {
    border-bottom: 2px dotted #D6C0B9;
    font-weight: bold;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-left: 5px;
}
h3.no_style {
    font-weight: normal;
    border: none;
    padding: 0;
}
h3.type2 {
    border: none;
    font-size: 1.8rem;
    min-width: 100px;
    text-align: center;
    display: table;
    padding: 12px 20px 7px 20px;
    margin: 20px auto 10px auto;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-image: url(../images/common/bg_h3.png);
    letter-spacing: 0.3rem;
}
h3.type2 > span[class*="icon-"]{
    font-size: 2.4rem;
    vertical-align: text-top;
    padding-right: 4px;
}
h4 {
    margin-bottom: 0px;
    padding-top: 10px;
    padding-left: 15px;
    font-weight: bold;
}
h4:before {
    font-family: 'icon_00';
    content: "\e60f";
    padding-right: 5px;
}
h4.no_style {
    font-weight: normal;
    margin-bottom: 0px;
    padding-top: 10px;
    padding-left: 15px;
    display: inline;
}
h4.no_style:before {
    content: "";
    padding-right: 0px;
}
h5 {
    margin-top: 8px;
    padding-top: 4px;
    padding-left: 12px;
    background-color: #fff;
    font-weight: bold;
}
h5 + p {
    background-color: #fff;
    padding-left: 20px;
}
/* h2 only */

h2.heading_brown,
h2.heading_green,
h2.heading_orange {
    height: 32px;
    padding: 8px 0px 0px 10px;
    font-size: 2rem;
    line-height: 2.4rem;
    color: #ffffff;
    letter-spacing: 0.2rem;
    border-top: 1px solid #D6C0B9;
    border-left: 1px solid #D6C0B9;
    border-right: 1px solid #D6C0B9;
    /* Border-Radius */
    -webkit-border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    text-align: center;
}
h2.heading_orange div,
h2.heading_brown div,
h2.heading_green div {
    display: inline-block;
    vertical-align: middle;
}


/* list class
---------------------------------------*/

.list_type1 > li {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 10px;
    margin-left: 16px;
    list-style-position: outside;
}
.list_type2 > li {
    list-style-type: decimal;
    list-style-position: inside;
    margin-bottom: 10px;
    margin-left: 16px;
    list-style-position: outside;
}
/* border class
---------------------------------------*/

.border_brown {
    min-height: 2px;
    color: #ffffff;
    background-color: #BF7D26;
    text-align: center;
    border-left: 1px solid #D6C0B9;
    border-right: 1px solid #D6C0B9;
    padding: 1px 0;
}
.border_green {
    min-height: 2px;
    padding: 4px 0;
    color: #ffffff;
    background-color: #4DA008;
    text-align: center;
}
.border_orange {
    height: 4px;
    color: #ffffff;
    background-color: #F47B03;
    text-align: center;
}
.border_pink {
    min-height: 2px;
    padding: 4px 0;
    color: #ffffff;
    background-color: #FF7AA1;
    text-align: center;
}
.border_green_pattern,
.border_orange_pattern,
.border_brown_pattern {
    padding: 4px 0px 2px 10px;
    font-size: 1.25rem;
    color: #ffffff;
    min-height: 2px;
}
.border_green_pattern {
    background-image: url(../images/common/bg_green.png);
}
.border_orange_pattern {
    background-image: url(../images/common/bg_orange.png);
}
.border_brown_pattern {
    background-image: url(../images/common/bg_brown.png);
}
.border_dotted {
    min-height: 2px;
    border-bottom: 2px dotted #C19672;
    margin: 20px 0;
}
/* area class
---------------------------------------*/
.read_area{
    font-size: 1.4rem;
    line-height: 2.2rem;
}
.error_area {
    
    min-height: 0px;
    background-color: #f8d8d8;
    color: #e33535;
    margin: 4px 8px 4px 8px;
    padding: 10px;
    /* Border-Radius */
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}
.text_area {
    
    background-color: #F9F2E4;
    line-height: 2rem;
    padding: 10px 14px 10px 14px;
    margin-bottom: 10px;
}
.text_area > P {
    
    padding: 3px 0;
}
.text_area_small {
    
    background-color: #F9F2E4;
    line-height: 2rem;
    margin-right: 15px;
    margin-left: 15px;
    padding: 10px 14px 10px 14px;
}
/* box class
---------------------------------------*/

.box_type1 {
    
    border-bottom: 1px solid #D6C0B9;
    border-left: 1px solid #D6C0B9;
    border-right: 1px solid #D6C0B9;
    /* Border-Radius */
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
}
.box_type2 {
    
    border-bottom: 1px solid #D6C0B9;
    border-left: 1px solid #D6C0B9;
    border-right: 1px solid #D6C0B9;
}
.box_type3 {
    
    border: 1px solid #D6C0B9;
    background-color: #F4E9DF;
}
.box_type4 {
    
    border-left: 1px solid #D6C0B9;
    border-right: 1px solid #D6C0B9;
}
.box_area {
    text-align: center;
}
.box_area >div {
    display: inline-block;
    text-align: left;
}
.box_basic {
    background-color: #F4E9DF;
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    padding: 20px 14px;
}
.box_yellow {
    background-color: #FFF3B6;
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    padding: 20px 14px;
}
.box_flesh {
    background-color: #F7DBA8;
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    padding: 20px 14px;
}
.box_blue {
    background-color: #ADD6FF;
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
    padding: 10px 14px;
}
/* button class
---------------------------------------*/

.btn_navi_mobile{
    position: fixed;
    bottom: 100px;
    margin-left: 20px;
    color: #ffffff;
    background-color: #FFA017;
    font-size: 2.4rem;
    padding: 20px 10px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-decoration: none;
    z-index: 100;
}

.btn_orange,
.btn_brown,
.btn_orange2,
.btn_green2,
.btn_orange3,
.btn_brown2 {
    text-decoration: none;
    
    cursor: pointer;
}
button:hover {
    opacity: 0.8;
}
/*幅指定不要(ボタンタイプに使用)*/

.btn_orange {
    color: #ffffff;
    background-color: #FFA017;
    padding: 4px 10px;
    text-align: center;
    border: none;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-bottom: 2px;
}
.btn_orange > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.btn_brown {
    color: #ffffff;
    background-color: #C9A152;
    padding: 4px 10px;
    text-align: center;
    border: none;
}
.btn_brown2 {
    color: #ffffff;
    background-color: #BF7D26;
    padding: 4px 10px;
    text-align: center;
    border: none;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.btn_orange2,
btn_brown2 span {
    padding-right: 5px;
}
.btn_green2 {
    color: #ffffff;
    background-color: #8CC229;
    padding: 4px 10px;
    text-align: center;
    border: none;
    vertical-align: middle;
}
.btn_orange3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #FF7B03;
    padding: 6px 10px;
    text-align: center;
    border: none;
    vertical-align: middle;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.btn_orange:hover,
.btn_orange3:hover {
    opacity: 0.8;
}
.btn_orange.large,
.btn_brown.large,
.btn_orange2.large,
.btn_green2.large,
.btn_orange3.large,
.btn_brown2.large {
    font-size: 1.4rem;
    padding: 10px 20px;
}
.btn_orange.fix,
.btn_brown.fix,
.btn_orange2.fix,
.btn_green2.fix,
.btn_orange3.fix,
.btn_brown2.fix {
    width: 100px;
}
/* type=radio
---------------------------------------*/

input[type="radio"] {
    font-size: x-large;
    height: 20px;
    width: 20px;
    display: inline-block;
    padding-top: 15px;
}
input[type="radio"]:not(:first-child) {
    margin-left: 10px;
}
/* breadcrumb
---------------------------------------*/

ul.breadcrumb {
    margin-left: 50px;
    margin-bottom: 5px;
    display: inline-block;
    list-style: none;
}
ul.breadcrumb li {
    float: right;
    padding: 3px;
    background-color: #fff;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    position: relative;
    margin-left: -36px;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    margin-top: 3px;
    text-decoration: none;
    
    letter-spacing: 0.1rem;
}
ul.breadcrumb li .start {
    overflow: hidden;
    width: 28px;
    height: 28px;
    min-width: 28px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    text-align: center;
    display: block;
    line-height: 28px;
    background-color: #F48C03;
    color: #9E4D21;
}
ul.breadcrumb li .middle {
    overflow: hidden;
    display: block;
    width: 28px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    text-align: center;
    padding-left: 38px;
    padding-right: 10px;
    text-decoration: none;
    letter-spacing: 0.1rem;
}
ul.breadcrumb li .middle >div {
    display: inline-block;
    text-align: center;
    padding-left: 0px;
    letter-spacing: 0.1rem;
}
ul.breadcrumb li a .text_middle {
    display: none;
    opacity: 0;
}
ul.breadcrumb li .last {
    display: block;
    width: auto;
    min-width: 150px;
    height: 28px;
    line-height: 28px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    text-align: center;
    padding-left: 30px;
    padding-right: 20px;
    text-decoration: none;
    letter-spacing: 0.1rem;
}
ul.breadcrumb li .last >div {
    display: inline-block;
    text-align: left;
    padding-left: 10px;
}
ul.breadcrumb li a .text_last {} ul.breadcrumb li .start .icon {
    display: inline-block;
    font-size: 2rem;
    padding-top: 4px;
}
ul.breadcrumb li .last .icon,
ul.breadcrumb li .middle .icon {
    display: inline-block;
    font-size: 1.6rem;
    vertical-align: -3px;
}

ul.breadcrumb li .middle:hover {
    width: auto;
}
ul.breadcrumb li .last:hover {
    width: auto;
}
ul.breadcrumb li .start:hover{
    color: #fff;
}
ul.breadcrumb li .middle:hover div > span{
    color: #fff;
}
ul.breadcrumb li .last:hover div > span{
    color: #fff;
}
ul.breadcrumb li a:hover .text_middle {
    display: inline-block;
    text-align: center;
    padding-left: 0px;
    opacity: 1;
}
ul.breadcrumb li:last-child a {
    padding: 0;
}
ul.breadcrumb .common,
ul.breadcrumb .common div > span {
    color: #A16317;
    background-color: #FFBF29;
    vertical-align: middle;
}
ul.breadcrumb .free,
ul.breadcrumb .free div > span {
    color: #599E17;
    background-color: #C4E800;
}
ul.breadcrumb .basic,
ul.breadcrumb .basic div > span {
    color: #A16317;
    background-color: #FFBF29;
}
ul.breadcrumb .love,
ul.breadcrumb .love div > span {
    color: #C25769;
    background-color: #FF9EBA;
}
ul.breadcrumb .business,
ul.breadcrumb .business div > span {
    color: #598217;
    background-color: #B0DE29;
}
ul.breadcrumb .chara,
ul.breadcrumb .chara div > span {
    color: #3675AB;
    background-color: #8CD6FF;
}
ul.breadcrumb .fortune,
ul.breadcrumb .fortune div > span {
    color: #6B5496;
    background-color: #D1A1FF;
}
ul.breadcrumb .premium,
ul.breadcrumb .premium div > span {
    color: #946100;
    background-color: #F2B033;
}
ul.breadcrumb .affinity,
ul.breadcrumb .affinity div > span {
    color: #9C4A29;
    background-color: #FF8F61;
}
ul.breadcrumb .color,
ul.breadcrumb .color div > span {
    color: #293D9C;
    background-color: #6996E8;
}
ul.breadcrumb li .start {
    overflow: hidden;
    width: 28px;
    height: 28px;
    min-width: 28px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    text-align: center;
    display: block;
    line-height: 28px;
    background-color: #F48C03;
    color: #9E4D21;
}
/* table tr td th
---------------------------------------*/

.table_type1,
.table_type2,
.table_type3 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: center;
}
.table_type1 table,
.table_type2 table,
.table_type3 table {
    border-collapse: collapse;
    margin: 10px auto 10px auto;
    border: 1px solid #A1754F;
}
/* table_type1 table_type2 */
.table_type1 th,
.table_type2 th {
    color: #fff;
    background-color: #D1B899;
    vertical-align: middle;
    border: 1px dotted #A1754F;
    padding: 6px 8px;
    word-break: break-all;
}
.table_type1 td,
.table_type2 td {
    vertical-align: middle;
    border: 1px dotted #A1754F;
    padding: 6px 8px;
    
    word-break: break-all;
}
.table_type1 th,
.table_type1 td,
.table_type2 th {
    text-align: center;
}
.table_type2 td {
    text-align: left;
}
.table_type1 td[rowspan],
.table_type2 td[rowspan]{
    border: none;
}
/* thead */

.table_type1 table thead.center th {
    text-align: center;
}
.table_type1 table tbody.center th {
    text-align: center;
}
/* table_type3 */

.table_type3 table {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border-collapse: separate;
    margin: 10px auto 10px auto;
    border: none;
}
.table_type3 table th,
.table_type3 table td {
    padding: 6px 8px;
    
    vertical-align: middle;
    word-break: break-all;
}
.table_type3 table tr th {
    background-color: #D1B899;
    color: #fff;
}
/* thead */

.table_type3 table thead.center th {
    text-align: center;
}
.table_type3 table thead.center td {
    text-align: center;
}
.table_type3 table thead.center_th th {
    text-align: center;
}
.table_type3 table thead > tr th {
    border-top: 1px solid #A1754F;
    border-right: 1px dotted #A1754F;
}
.table_type3 table thead tr:first-child th:first-child {
    -moz-border-radius: 6px 0px 0px 0px;
    -webkit-border-radius: 6px 0px 0px 0px;
    border-radius: 6px 0px 0px 0px;
}
.table_type3 table thead > tr td {
    border-top: 1px solid #A1754F;
    border-right: 1px dotted #A1754F;
}
.table_type3 table thead tr:first-child td:last-child {
    -moz-border-radius: 0px 6px 0px 0px;
    -webkit-border-radius: 0px 6px 0px 0px;
    border-radius: 0px 6px 0px 0px;
    border-right: 1px solid #A1754F;
}
.table_type3 table thead tr th:first-child {
    border-left: 1px solid #A1754F;
    -moz-border-radius: 6px 0px 0px 0px;
    -webkit-border-radius: 6px 0px 0px 0px;
    border-radius: 6px 0px 0px 0px;
}
.table_type3 table thead tr th:last-child {
    border-right: 1px solid #A1754F;
    -moz-border-radius: 0px 6px 0px 0px 0px;
    -webkit-border-radius: 6px 0px 0px 0px;
    border-radius: 0px 6px 0px 0px;
}
/* tbody */

.table_type3 table tbody.center th {
    text-align: center;
}
.table_type3 table tbody.center td {
    text-align: center;
}
.table_type3 table tbody.center_th th {
    text-align: center;
}
.table_type3 table tbody tr td {
    border-right: 1px dotted #A1754F;
    border-top: 1px dotted #A1754F;
}
.table_type3 table tbody tr td,
.table_type3 table tbody tr th {
    border-right: 1px dotted #A1754F;
    border-top: 1px dotted #A1754F;
}
.table_type3 table tbody tr td:first-child {
    border-left: 1px solid #A1754F;
}
.table_type3 table tbody tr th:first-child {
    border-left: 1px solid #A1754F;
}
.table_type3 table tbody tr td:last-child {
    border-right: 1px solid #A1754F;
}
.table_type3 table tbody tr:last-child td,
.table_type3 table tbody tr:last-child th {
    border-bottom: 1px solid #A1754F;
}
.table_type3 table tbody tr:last-child td:first-child {
    -moz-border-radius: 0px 0px 0px 6px;
    -webkit-border-radius: 0px 0px 0px 6px;
    border-radius: 0px 0px 0px 6px;
}
.table_type3 table tbody tr:last-child th:first-child {
    -moz-border-radius: 0px 0px 6px 0px;
    -webkit-border-radius: 0px 0px 6px 0px;
    border-radius: 0px 0px 0px 6px;
}
.table_type3 table tbody tr:last-child td:last-child {
    -moz-border-radius: 0px 0px 6px 0px;
    -webkit-border-radius: 0px 0px 6px 0px;
    border-radius: 0px 0px 6px 0px;
}
/* page_navi 
---------------------------------------*/

ul.page_navi {
    text-align: center;
    padding-right: 10px;
}
ul.page_navi li {
    display: inline-block;
    
}
ul.page_navi li li {
    float: left;
    margin-right: -24px;
}
ul.page_navi li .number {
    width: 34px;
    height: 34px;
    -moz-border-radius: 34px;
    -webkit-border-radius: 34px;
    border-radius: 34px;
    text-align: center;
    display: block;
    line-height: 38px;
    color: #9E4D21;
    padding: 4px 0px 0px 4px;
    background-color: #fff;
}
ul.page_navi li .number a {
    display: block;
    margin-bottom: 5px;
    padding: 3px;
    text-decoration: none;
    width: 24px;
    height: 24px;
    min-width: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    border-radius: 24px;
    text-align: center;
    display: block;
    line-height: 24px;
    background-color: #FFBF29;
    color: #A16317;
    z-index: 10;
}
ul.page_navi li .number a:hover {
    background-color: #FFDE42;
    color: #D19917;
}
ul.page_navi li .number a.select {
    background-color: #F48C03;
    color: #fff;
}
ul.page_navi li .previous {
    background-color: #fff;
    width: 80px;
    height: 34px;
    min-width: 38px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    padding: 6px 0px 0px 6px;
    margin-top: -1px;
}
ul.page_navi li .previous a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    overflow: hidden;
    width: 64px;
    height: 28px;
    min-width: 28px;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    text-align: center;
    display: block;
    line-height: 28px;
    background-color: #FFBF29;
    color: #A16317;
    padding-right: 10px;
}
ul.page_navi li .next {
    background-color: #fff;
    width: 80px;
    height: 34px;
    min-width: 38px;
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;
    padding: 6px 0px 0px 6px;
    float: right;
    margin-top: -1px;
}
ul.page_navi li .next a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    overflow: hidden;
    width: 64px;
    height: 28px;
    min-width: 28px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    text-align: center;
    display: block;
    line-height: 28px;
    background-color: #FFBF29;
    color: #A16317;
    padding-left: 10px;
}
ul.page_navi li .margin {
    margin-left: 24px;
}
/* login 
---------------------------------------*/

.login_logout input {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.4rem;
    width: 200px;
    height: 40px;
    padding-top: 4px;
}
.login_logout .btn_login_cover {
    width: 200px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
    margin-bottom: 10px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.login_logout .btn_login {
    font-size: 1.6rem;
    color: #fff;
    padding: 0;
    text-align: center;
    width: 200px;
    height: 44px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    /* box-shadow */
    box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -webkit-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -moz-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
}
.login_logout .btn_login_cover {
    background-image: url(../images/common/bg_orange2_b.png);
}
.login_logout .btn_login {
    background-image: url(../images/common/bg_orange2_a.png);
}
.login_logout .btn_login:hover {
    background: none;
}
.login_logout .circle_login {
    position: absolute;
    top: 9px;
    left: 10px;
    width: 26px;
    height: 26px;
    -webkit-border-radius: 13px;
    /* width,heightの半分 */
    -moz-border-radius: 13px;
    border-radius: 13px;
    text-align: center;
    vertical-align: middle;
}
.login_logout .icon-key {
    display: block;
    font-size: 1.8rem;
}
.login_logout .circle_login {
    background-color: #D16300;
}
.login_logout .icon-key {
    padding-top: 5px;
}
/* user_entry 
---------------------------------------*/

.user_entry .btn_login_cover,
.user_entry .btn_entry_cover,
.user_entry .btn_guide_cover,
.user_entry .btn_first_cover {
    width: 200px;
    height: 46px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.user_entry a {
    text-decoration: none;
}
.user_entry .btn_entry,
.user_entry .btn_login,
.user_entry .btn_guide,
.user_entry .btn_first {
    font-size: 1.6rem;
    color: #fff;
    display: block;
    text-align: center;
    width: 200px;
    height: 46px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    margin: 0 auto;
    /* box-shadow */
    box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -webkit-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -moz-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
}
.user_entry .btn_entry_cover {
    background-image: url(../images/common/bg_red2_b.png);
}
.user_entry .btn_entry {
    background-image: url(../images/common/bg_red2_a.png);
}
.user_entry .btn_entry:hover {
    background: none;
}
.user_entry .btn_login_cover {
    background-image: url(../images/common/bg_orange2_b.png);
}
.user_entry .btn_login {
    background-image: url(../images/common/bg_orange2_a.png);
}
.user_entry .btn_login:hover {
    background: none;
}
.user_entry .btn_guide_cover,
.user_entry .btn_first_cover {
    background-image: url(../images/common/bg_green2_b.png);
}
.user_entry .btn_guide,
.user_entry .btn_first {
    background-image: url(../images/common/bg_green2_a.png);
}
.user_entry .btn_guide:hover,
.user_entry .btn_first:hover {
    background: none;
}
.user_entry .btn_entry .btn_name {
    padding: 12px 5px 5px 36px;
    letter-spacing: 0.2rem;
    line-height: 2.2rem;
}
.user_entry .btn_login .btn_name {
    padding: 12px 5px 5px 32px;
    letter-spacing: 0.4rem;
    line-height: 2.2rem;
}
.user_entry .btn_guide .btn_name {
    padding: 12px 5px 5px 36px;
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
}
.user_entry .btn_first .btn_name {
    padding: 12px 5px 5px 36px;
    letter-spacing: 0.1rem;
    line-height: 2.2rem;
}
.user_entry .circle_entry,
.user_entry .circle_login,
.user_entry .circle_guide,
.user_entry .circle_first,
.user_entry .circle_white {
    position: absolute;
    top: 9px;
    left: 10px;
    width: 26px;
    height: 26px;
    -webkit-border-radius: 13px;
    /* width,heightの半分 */
    -moz-border-radius: 13px;
    border-radius: 13px;
    text-align: center;
    vertical-align: middle;
}
/* 円の色 */

.user_entry .circle_entry {
    background-color: #8A2600;
}
.user_entry .circle_entry:hover {
    background-color: #9E383D;
}
.user_entry .circle_login {
    background-color: #D16300;
}
.user_entry .circle_login:hover {
    background-color: #E37821;
}
.user_entry .circle_guide,
.user_entry .circle_first {
    background-color: #366900;
}
.user_entry .circle_guide:hover,
.user_entry .circle_first:hover {
    background-color: #47731F;
}
.user_entry .circle_white {
    background-color: #fff;
}
.user_entry .icon-pencil,
.user_entry .icon-key,
.user_entry .icon-paw,
.user_entry .icon-beginner,
.user_entry .icon-arrow_up,
.user_entry .icon-ticket,
.user_entry .icon-heart,
.user_entry .icon-crystal_ball {
    display: block;
    font-size: 1.8rem;
}
.user_entry .icon-free_circle {
    font-size: 3rem;
}
.user_entry .icon-coin {
    font-size: 2.8rem;
}
.user_entry .icon-pencil {
    padding-top: 5px;
}
.user_entry .icon-key {
    padding-top: 5px;
}
.user_entry .icon-paw {
    padding-top: 6px;
}
.user_entry .icon-beginner {
    padding-top: 6px;
}
.user_entry .icon-arrow_up {
    padding-top: 5px;
}
.user_entry .icon-ticket {
    padding-top: 5px;
}
.user_entry .icon-coin {
    padding-top: 1px;
    color: #FFBD24;
}
.user_entry .icon-free_circle {
    padding-top: 1px;
    color: #366900;
}
.user_entry .icon-heart {
    padding-top: 5px;
    color: #fff;
}
.user_entry .icon-crystal_ball {
    padding-top: 3px;
}
/* 汎用ボタン 
---------------------------------------*/

.btn_cover input {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: 0.4rem;
    width: 200px;
    height: 40px;
    padding-top: 4px;
    font-weight: bold;
    padding-left: 10px;
}
.btn_cover .btn_name {
    font-size: 1.6rem;
    letter-spacing: 0.4rem;
    width: 200px;
    padding-top: 14px;
    color: #fff;
}
.btn_cover {
    width: 200px;
    
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.btn_cover > p,
.btn_cover > a {
    display: block;
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none;
    padding: 0;
    text-align: center;
    width: 200px;
    height: 44px;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    /* box-shadow */
    box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -webkit-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -moz-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
}
.btn_cover > a:hover {
    color: #fff;
}
.btn_cover .circle {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 28px;
    height: 28px;
    -webkit-border-radius: 14px;
    /* width,heightの半分 */
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align: center;
    vertical-align: middle;
}
.btn_cover p:hover .circle,
.btn_cover a:hover .circle {
    background-color: #fff;
}
.btn_cover .icon {
    display: block;
    font-size: 2rem;
    padding-top: 4px;
    padding-left: 0px;
    color: #fff;
}
.btn_cover.orange {
    background-image: url(../images/common/bg_orange2_b.png);
}
.btn_cover.orange > p,
.btn_cover.orange > a {
    background-image: url(../images/common/bg_orange2_a.png);
}
.btn_cover.orange > p:hover,
.btn_cover.orange > a:hover {
    background: none;
}
.btn_cover.orange .circle {
    background-color: #D16300;
}
.btn_cover.orange > p:hover .circle .icon,
.btn_cover.orange > a:hover .circle .icon {
    color: #D16300;
}
.btn_cover.purple {
    background-image: url(../images/common/bg_purple2_b.png);
}
.btn_cover.purple > p,
.btn_cover.purple > a {
    background-image: url(../images/common/bg_purple2_a.png);
}
.btn_cover.purple > p:hover,
.btn_cover.purple > a:hover {
    background: none;
}
.btn_cover.purple .circle {
    background-color: #7A42AD;
}
.btn_cover.purple > p:hover .circle .icon,
.btn_cover.purple > a:hover .circle .icon {
    color: #7A42AD;
}
.btn_cover.red {
    background-image: url(../images/common/bg_red2_b.png);
}
.btn_cover.red > p,
.btn_cover.red > a {
    background-image: url(../images/common/bg_red2_a.png);
}
.btn_cover.red > p:hover,
.btn_cover.red > a:hover {
    background: none;
}
.btn_cover.red .circle {
    background-color: #8A2600;
}
.btn_cover.red > p:hover .circle .icon,
.btn_cover.red > a:hover .circle .icon {
    color: #8A2600;
}
.btn_cover.green {
    background-image: url(../images/common/bg_green2_b.png);
}
.btn_cover.green > p,
.btn_cover.green > a {
    background-image: url(../images/common/bg_green2_a.png);
}
.btn_cover.green > p:hover,
.btn_cover.green > a:hover {
    background: none;
}
.btn_cover.green .circle {
    background-color: #366900;
}
.btn_cover.green > p:hover .circle .icon,
.btn_cover.green > a:hover .circle .icon {
    color: #366900;
}
/*----sample code--------------------------
<div class="btn_cover red">
    <a href="#">
        <span class="circle">
            <span class="icon-arrow_up icon"></span>
        </span>
        <p class="btn_name">button</p>
    </a>
</div>

<div class="btn_cover purple">
    <p><input name="submit_ticket"  value="申し込む" type="submit"></p>
</div>

<div class="btn_var">/*--タイプ
    <div class="btn_orange">/*--カラー
        <a class="btn_body" href="{$url.https}user_regist_info.php">
            <span class="circle">
                <span class="icon-arrow_up icon"></span>
            </span>
            <p class="btn_name">aタグボタン（非固定）</p>
        </a>
    </div>
</div>
--------------------------------------------*/
.btn_var{
    width: auto;
    height: 44px;
}
.btn_var a{ text-decoration: none; }
.btn_var .btn_body{
    height: 44px;
    font-size: 1.6rem;
    color: #fff;
    display:inline-block;
    text-align: center;
    position: relative;
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius:6px;
    border-radius:6px;   
    /* box-shadow */
    box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -webkit-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    -moz-box-shadow: rgba(212, 186, 148, 0.65098) 0px 5px 0px 0px;
    padding-left: 46px;
    padding-right: 10px;
}
.btn_var .btn_body .btn_name{
    display: block;
    width: 100%;
    padding-top: 14px;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 0;
}

/*--カラー設定--*/
.btn_blue2 {
    background-image: url(../images/common/bg_blue2_b.png);
    /* Border-Radius */
    -webkit-border-radius: 6px;
    -moz-border-radius:6px;
    border-radius:6px;   
}
.btn_blue2 .btn_body {
    background-image: url(../images/common/bg_blue2.png);
}
.btn_blue2 .btn_body:hover {
    background: none;
}
.btn_blue2 .btn_body .circle{
    background-color: #1C5EC4;
}
.btn_blue2 .btn_body:hover .circle .icon{
    color: #1C5EC4;
}

/*--アイコン設定--*/
.btn_body .circle{
    position: absolute;
    top: 8px;
    left: 10px;
    width: 28px;
    height: 28px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    text-align: center;
    vertical-align: middle;
}
.btn_body:hover .circle {
    background-color: #fff;
}

.btn_body .icon{
    font-size: 2rem;
    display: block;
    padding-top: 4px;
    padding-left: 2px;
}
/*----sample code--------------------------
<div class="btn_var">
    <div class="btn_blue2">
        <a class="btn_body" href="#">
            <span class="circle"><span class="icon-volume icon"></span></span>
            <p class="btn_name">ボタン名</p>
        </a>
    </div>
</div>
--------------------------------------------*/
/* leanModal.js 
---------------------------------------*/

#leanModal .modal_area {
    background: none repeat fixed 0 0 #FFFFFF;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    display: none;
    padding: 30px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    /*使用は非推奨*/
}
.modal {
    background: none repeat fixed 0 0 #FFFFFF;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    display: none;
    padding: 20px;
    width: 80%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    height: auto;
    /*親要素のクラスに入れる*/
}
.modal .text_area {
    background-color: #fff;
    line-height: 2rem;
    padding: 2px 14px 2px 14px;
    margin-bottom: 10px;
    
}
#lean_overlay {
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: none;
    /*-別CSSでbaclgroundを指定して使う-*/
}
.modal_close {
    position: absolute;
    top: 4px;
    right: 16px;
    display: block;
    width: 14px;
    height: 14px;
    z-index: 2;
    background-color: #fff;
    font-size: 2.4rem;
    cursor: pointer;
}

/*----sample code--------------------------
<a rel="leanModal" href="#test" class="btn_orange">ボタン名</a>
            
<div id="test" class="modal">　←幅などのclassを入れる
    <div class="modal_close"><span class="icon-cross_rounded"></span></div>
    <div class="text_area">
        <p>テキスト</p>
    </div>
</div>

{literal}
<script type="text/javascript">
$(function() {
    $( 'a[rel*=leanModal]').leanModal({
        top: 50,                     // モーダルウィンドウの縦位置を指定
        overlay : 0.5,               // 背面の透明度 
        closeButton: ".modal_close"  // 閉じるボタンのCSS classを指定
    });
}); 
</script>
{/literal}

--------------------------------------------*/

/* 吹き出し 
---------------------------------------*/

.arrow_box.up {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    position: relative;
    background: #fff;
    border: 1px solid #D4BA94;
    padding: 6px;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.arrow_box.up:after,
.arrow_box.up:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box.up:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 8px;
    margin-left: -8px;
}
.arrow_box.up:before {
    border-color: rgba(212, 186, 148, 0);
    border-top-color: #D4BA94;
    border-width: 10px;
    margin-left: -10px;
}
/* social 
---------------------------------------*/
iframe.twitter-tweet-button {
    width: 105px!important;
    vertical-align: top;
}
.social_area .fb-like {
    vertical-align: top;
    display: inline-block;
    margin-bottom: 4px;
}