/*------------------------------------------------------------
	ヘッダー共通化　add 2016.9.14
------------------------------------------------------------*/
.melon-l_header,
.melon-l_header * { box-sizing: border-box;}
.melon-l_header { padding: 0.45em 0 0.35em; border-bottom: 3px solid #ff8100; background-color: #fff; font-size: 12px;}
.melon-l_container { margin: 0 auto; max-width: 768px; padding: 0 2.5%;}
.pc .melon-l_container { padding: 0 8px; max-width: 940px;}
.fx-row { margin-top: -8px; margin-left: -8px; margin-right: -8px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
[class*="fx-col"] { margin-top: 8px; padding-left: 8px; padding-right: 8px; -webkit-flex-grow: 1; flex-grow: 1; }
.fx-col-center-xs { align-self: center; }
.melon-logo { max-width: 11em;}
.fx-left { float: left; }
.fx-right { float: right; }
.fx-txt-center { text-align: center;}
.fx-inlineb { display: inline-block; }
.melon-menuBtn, a.melon-menuBtn { padding: 0.4em 0.6em 0em; display: inline-block; text-align: center; color: #999; line-height: 1.5; }

.melon-f-6, { font-size: 0.5rem;}
.melon-f-7, { font-size: 0.58333rem;}
.melon-f-8, { font-size: 0.66667rem;}
.melon-f-8L, { font-size: 0.70588rem;}
.melon-f-9, { font-size: 0.75rem;}

.melon-f-10 { font-size: 0.83333rem;}
.melon-f-10L { font-size: 0.875rem;}
.melon-f-11 { font-size: 0.91667rem;}
.melon-f-12 { font-size: 1rem;}
.melon-f-13 { font-size: 1.08333rem;}
.melon-f-14 { font-size: 1.16667rem;}
.melon-f-15 { font-size: 1.25rem;}
.melon-f-16 { font-size: 1.33333rem;}
.melon-f-17 { font-size: 1.41667;}
.melon-f-18 { font-size: 1.5rem;}

.melon-f-20 { font-size: 1.66667rem;}
.melon-f-22 { font-size: 1.83333rem;}
.melon-f-24 { font-size: 2rem;}
.melon-f-26 { font-size: 2.16667rem;}
.melon-f-28 { font-size: 2.33333rem;}
.melon-f-30 { font-size: 2.5rem;}

.melon-btn { border-radius: 3px; background-color: #e0e0e0; padding: 0.75em 1em 0.55em; margin: 0 auto 0.5em; display: inline-block; text-align: center; box-shadow: 0 4px 0 #bbb, 0 4px 10px rgba(0, 0, 0, 0.2); font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: relative; top: 0; -webkit-transition: 0.2s; transition: 0.2s; color: #555 !important; line-height: 1.5; }
.melon-btn:hover { opacity: 0.9; cursor: pointer; top: 4px; box-shadow: 0 0 0px transparent; }
.melon-btn-king { background-color: #4eb91f; box-shadow: 0 4px 0 #328c0a, 0 4px 10px rgba(0, 0, 0, 0.2); color: #fff !important; text-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0.3em rgba(0, 0, 0, 0.3); text-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0.3em rgba(0, 0, 0, 0.3); }

body .melon-l_header { padding: 0; font-size: 0.75rem; line-height: 1.5;}
body .melon-l_header .melon-l_container { padding:0;}
body .melon-l_header_row { margin:0; min-height: 42px;}
body .melon-l_header_col-logo { margin-top:0; -webkit-flex-basis: 40%; flex-basis: 40%;}
body .melon-l_header_col-secondary { margin-top:0; padding: 1em 0 0; -webkit-flex-basis: 15%; flex-basis: 15%; max-width: 100px;}
body .melon-l_header_col-primary { padding: 1.3em 0; margin-bottom: 0; -webkit-flex-basis: 28%; flex-basis: 28%; max-width: 170px; box-shadow: none !important; border-radius: 0 !important;}
body .animation_section:not(#area) .anotherPrefectures { display: none;}
/*---  ここまで  ----*/


/* フラット系ボタン */
.melon-btn-flat { background-color: #f0f0f0; padding: 1.2em 2.3em 1em; margin: 0 auto 0.5em; display: inline-block; text-align: center; border-radius: 3px;
-webkit-transition: 0.2s; transition: 0.2s; color: #555; line-height: 1; box-shadow:inset 0 0 0 1px #ddd, 0 3px 5px rgba(0,0,0,0.3); position: relative;}
.melon-btn-flat:hover { top: 1px; box-shadow: 0 2px 4px rgba(0,0,0,0.4); -webkit-filter: hue-rotate(30deg); filter: hue-rotate(30deg);}
.melon-btn-flat:active { top: 4px; box-shadow: 0 0 1px rgba(0,0,0,0.1); cursor: pointer;}
.melon-btn-flat .fa-chevron-right { margin: 0 -1em 0 1em;}
.melon-btn-flat-king { background-color: #4eb91f; color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
.melon-btn-flat-king:hover,
.melon-btn-flat-king:visited { color: #fff !important;}
.melon-btn-flat-queen { background-color: #ff8200; color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
.melon-btn-flat-queen:hover,
.melon-btn-flat-queen:visited { color: #fff !important;}
.melon-btn-flat-joker { background-color: #ffd205; color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
.melon-btn-flat-joker:hover,
.melon-btn-flat-joker:visited { color: #fff !important;}

.fx-inline {
  display: inline; }
.melon-t-ccc {
    color: #ccc;
}
.melon-l_footer { text-align: center; position: relative; font-size: 12.75px; line-height: 1.8;}
.melon-l_footer p,
.melon-l_container p { margin:0; padding:0;}
.melon-l_footer small { display: inline-block; margin: 0.5em 0; color: #999;}

.melon-l_footerTop { background-color: #faf9de; padding: 1em 0;}
.melon-l_footerBottom { background-color: #4c3d2d; color: #fff; padding: 1em 0; @extend .melon-f-9;}
.melon-menu-separate {}
.melon-menu-separate li { display: inline-block; }
.melon-menu-separate li + li:before { content:''; margin: 0 5px 0 1px; border-left: 1px solid #ccc; font-size: 4px; vertical-align: 2px;}

.melon-title-ring { font-weight: bold; font-size: 15px; color: #403b0f; margin: 0; margin-bottom: 0.37rem; padding-left:1.4em; line-height: 1.4;}
.melon-title-ring b,
.melon-title-ring strong { color: #ff8000;}

.melon-title-ring::before { content:''; display: inline-block; font-size: 10.6px; width: 1em; height: 1em; border: 2px dotted #ff8000; border-radius: 100%; vertical-align: -0.15em; margin: 0 0.4em 0 -1.4em; -webkit-animation: melon-ring-turn 10s linear infinite; animation: melon-ring-turn 10s linear infinite;}

.melon-title-ring::before { vertical-align: inherit;}

@keyframes melon-ring-turn {
	100% { transform: rotate(359deg);}
}
@-webkit-keyframes melon-ring-turn {
	100% { -webkit-transform: rotate(359deg);}
}

.melon-l_contentsTop,
.melon-l_contentsBottom,
.melon-l_contents { padding: 3rem 0;}
.melon-f-14 { font-size: 14px;}
.melon-l_container {
    margin: 0 auto;
    max-width: 768px;
    padding: 0 2.5%;
}
.melon-btn-flat { background-color: #f0f0f0; padding: 1.2em 2.3em 1em; margin: 0 auto 0.5em; display: inline-block; text-align: center; border-radius: 3px;
-webkit-transition: 0.2s; transition: 0.2s; color: #555; line-height: 1; box-shadow:inset 0 0 0 1px #ddd, 0 3px 5px rgba(0,0,0,0.3); position: relative;}
.melon-btn-flat:hover { top: 1px; box-shadow: inset 0 0 0 1px #ddd, 0 2px 4px rgba(0,0,0,0.4); -webkit-filter: hue-rotate(30deg); filter: hue-rotate(30deg); cursor: pointer;}
.melon-btn-flat:active { top: 4px; box-shadow: inset 0 0 0 1px #ddd, 0 0 1px rgba(0,0,0,0.1); cursor: pointer;}
.melon-btn-flat .fa-chevron-right { margin: 0 -1em 0 1em;}

.melon-btn-flat-king { background-color: #4eb91f; color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
.melon-btn-flat-king:hover,
.melon-btn-flat-king :visited { color: #fff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4);}

.melon-btn-flat-queen { background-color: #ff8200; color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
.melon-btn-flat-queen:hover,
.melon-btn-flat-queen:visited { color: #fff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4);}

.melon-btn-flat-joker { background-color: #ffd205; color: #fff; box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
.melon-btn-flat-joker:hover,
.melon-btn-flat-joker:visited { color: #fff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.4);}

.melon-btn-block { display: block; width: 100%; padding-left:0; padding-right:0;}

.spShow { display: none;}

@media ( max-width : 767px ) {
  .melon-l_footer { font-size: 12px;}
  .melon-l_footerBottom { font-size: 9px;}
  .melon-l_footerBottom .melon-l_container p:first-child { display: block;}
  .spShow { display: block;}
}