@charset "UTF-8";

/**************************************/
/* jQuery Mobile のクラス定義を上書き */
/**************************************/
.ui-footer {
	border: none;
	opacity: 0.9;

	background-color: #e9e9e9;
	border-color: #ddd;
	color: #333;
	text-shadow: 0 1px 0 #eee;
	font-weight: bold;
	
}

.ui-footer-fixed {
    bottom: -1px;
    padding-bottom: 1px;
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;    
}


.ui-content {
	text-shadow: none;
	overflow: hidden;
}

.ui-footer a:link { color: #DEDEDE; }
.ui-footer a:visited { color: #DEDEDE; }
.ui-footer a:hover { color: #DEDEDE; }
.ui-footer a:active { color: #DEDEDE; }

/**************************************/
/*                全体                */
/**************************************/
html {
	overflow-y: scroll;
	height: 100%;
}

body {
	text-shadow: none !important;
	background-color: #FFFFFF;
	color: #24282A;
	font-size: 14px;
	font-family: "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-touch-callout:none;
	-webkit-text-size-adjust: none;
	-webkit-tap-highlight-color:rgba(0, 0, 255, .3);
    margin-left: 0;
    margin-right: 0;
    display: block;
    margin-top: 50px;
}

.overlay-for-list {
	background-color: #000000;
	opacity: 0.6;
	width: 100%;
	height: 99999px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}

header {
	/*background-color: #FBFBFB !important;*/
	background-color: #ffffff !important;
	border-color: #CACACA !important;
	height: 40px;
	position: fixed !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0.8;
	border-bottom: 1px solid #CACACA;
}

.header-with-nav {
	height: 62px;
}

.header-with-nav .nav-in-header {
	height: 30px;
	background-color: #303030;
	text-shadow: none;
	position: relative;
	top: 10px;
}

.header-with-nav .nav-in-header ul {
	height: 25px;
	margin: 0;
	padding: 0;
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}

.header-with-nav .nav-in-header ul li {
	display: table-cell;
	vertical-align: middle;
	font-size: 11px;
	font-weight: lighter;
}

.header-with-nav .nav-in-header ul li span.nav-in-header-active{
	border-bottom: 3px #CBCBCB solid;
	padding-bottom: 6px;
}

.header-with-nav .img-in-header {
	height: 35px;
}

.header-with-nav .img-in-header a {
	text-decoration: none;
}

header p {
	display: block;
	text-align: center;
	margin: 0 auto;
	/*color: #BEBEBE;*/
	text-shadow: none;
	/*font-size: 12px;*/
	position: relative;
	line-height: 40px;
    font-size: 17px;
    color: #303335;
    font-weight: bold;

}

header img {
	display: block;
	margin: 8px auto;
	position: relative;
	top: 2px;
	left: 4px;
}

header .img-in-header div:nth-of-type(1) {
	width: 33%;
	float: left;
}

header .img-in-header div:nth-of-type(2) {
	width: 33%;
	float:left;
}

header .img-in-header div:nth-of-type(3) {
	float:right;
}

header .right-image {
	float: right;
	margin-right: 10px;
	margin-top: -10px;
	text-shadow: none;
}

header .right-image img {
	margin: 0;
	width: 40px;
	top: -7px;
}

header div img.logo {
    width:  60px;
    height: auto;
	z-index:1;
	left: 2px;
}

header img.change-view {
	margin-right: 10px;
	margin-bottom: 0px;
	z-index: 1;
	width:  25px;
	height: auto;
}

header img.change-view-modal {
	display:block;
	position:relative;
	top:-40%;
}

header p.title-modal {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

header .medal {
	float: left;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-top: 2px;
	z-index: 1;
	width:  22px;
	height: auto;
}

header .medal-info {
	float: left;
	margin-right: 5px;
	margin-bottom: 0px;
	z-index: 1;
	text-align: left;
	font-size: 9px;
	position: relative;
	top: 10px;
	font-weight: lighter;
}

header div.close {
	text-decoration: none;
	font-size: 17px !important;
	font-weight: normal;
	text-shadow: none;
	color: #BEBEBE !important;
	position: absolute;
	top: 40%;
	right: 10px;
	background-color: #FBFBFB !important;
	border: none !important;
	text-shadow: none !important;
}

header div.close a {
	text-decoration: none;
	color: #BEBEBE !important;
}

header div.back {
	text-decoration: none;
	font-size: 28px !important;
	font-weight: normal;
	text-shadow: none;
	color: #BEBEBE !important;
	position: absolute;
	top: 0;
	left: 0;
	border: none !important;
	text-shadow: none !important;
	height: 40px;
	background-image: url(../img/common/left_arrow.png);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 8px 12px;
}

header div.back a {
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-decoration: none;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	padding-left: 20px;
}

header div.back a:visited {
	color: #000;
}

header div.back a:hover {
	color: #000;
}



header div.goto {
	text-decoration: none;
	font-size: 28px !important;
	font-weight: normal;
	text-shadow: none;
	color: #BEBEBE !important;
	position: absolute;
	top: 0;
	right: 0;
	border: none !important;
	text-shadow: none !important;
	height: 40px;
	background-image: url(/img/common/right_arrow.png);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: right;
	margin-right: 10px;
}

header div.goto a {
	display: block;
	width: 80px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	padding-right: 20px;
}

header div.goto a:visited {
	color: #000;
}

header div.goto a:hover {
	color: #000;
}

header div.setting-like-menu {
	position: absolute;
	top: 0;
	right: 0;
	text-shadow: none !important;
	height: 40px;
	width: 60px;
}

header div.setting-like-menu .icon-list {
	width: 4px;
	height: 4px;
	box-shadow: inset 0 0 0 32px,0 -8px 0 0,0 8px 0 0;
	margin: 18px 26px 15px 21px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	font-style: normal;
	color: #BEBEBE;
	text-align: left;
}

header div.setting-like-menu .icon-list::before {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 18px;
	height: 4px;
	left: 8px;
	box-shadow: inset 0 0 0 32px,0 -8px 0 0,0 8px 0 0;
}

header div.setting-like-menu .icon-list::before,
header div.setting-like-menu .icon-list::after {
	content: "";
	pointer-events: none
}

header .like-menu-box {
	position: absolute;
	width: 160px;
	top: 45px;
	right: 5px;
	background-color: #FCFCFC;
	border: 1px solid #D0D0D0;
	border-radius: 4px;
}

header .like-menu-box::before {
	display: block;
	content: "";
	position: absolute;
	top: -9px;
	right: 11px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 9px 9px 9px;
	border-color: transparent transparent #FCFCFC transparent;
	z-index: 0;
}

header .like-menu-box::after {
	display: block;
	content: "";
	position: absolute;
	top: -10px;
	right: 10px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #D0D0D0 transparent;
	z-index: -1;
}

header .like-menu-box ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

header .like-menu-box ul li {
	margin: 0;
	padding: 10px;
	color: #3C3C3C;
	font-weight: normal;
	text-shadow: none;
	border-bottom: 1px solid #D0D0D0;
	cursor: pointer;
}

header .like-menu-box ul li:hover {
	background-color: #D0D0D0;
}

header .like-menu-box ul li:last-child {
	border-bottom: none;
}

header .like-menu-box ul li input[type="text-box"] {
	margin: 0;
}
header .like-menu-box ul li button {
	margin: 0 0 0 64px;
	padding: 6px 10px;
	font-weight: normal;
	text-shadow: none !important;
	box-shadow: none !important;
}

header div.header-recommend {
	position: absolute;
	top: 0;
	right: 0;
	text-shadow: none !important;
}

header div.header-recommend a {
	display: block;
	width: 50px;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	padding-right: 13px;
	margin-right: 8px;
	text-align: right;
}

header div.header-recommend a:visited {
	color: #000;
}

header div.header-recommend a:hover {
	color: #000;
}

header div.header-recommend .next-arrow {
	position: relative;
	display: inline-block;
}

header div.header-recommend .next-arrow:before,
header div.header-recommend .next-arrow:after {
	position: absolute;
	right: -11px;
	top: 0;
	display: block;
	content: '';
	width: 6px;
	height: 1px; /* 太さ */
	background-color: #000000;
	border-radius: 4px;
}

header div.header-recommend .next-arrow:before {
	margin-top: -3px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

header div.header-recommend .next-arrow:after {
	margin-top: -7px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

header div.header-recommend .recommend-close {
	position: relative;
	display: inline-block;
}

header div.header-recommend .recommend-close:before,
header div.header-recommend .recommend-close:after {
	position: absolute;
	right: -15px;
	top: 0;
	display: block;
	content: '';
	width: 15px;
	height: 1px; /* 太さ */
	background-color: #000000;
	border-radius: 4px;
}

header div.header-recommend .recommend-close:before {
	margin-top: -5px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

header div.header-recommend .recommend-close:after {
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


header div.back {
	text-decoration: none;
	font-size: 28px !important;
	font-weight: normal;
	text-shadow: none;
	color: #BEBEBE !important;
	position: absolute;
	top: 0;
	left: 0;
	border: none !important;
	text-shadow: none !important;
	height: 40px;
	background-image: url(/img/common/left_arrow.png);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: 8px 12px;
}

header div.back a {
	display: block;
	width: 80px;
	height: 30px;
	line-height: 30px;
	text-decoration: none;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	padding-left: 20px;
}

header div.back a:visited {
	color: #000;
}

header div.back a:hover {
	color: #000;
}


.information-bar {
	margin: 0;
	margin-top: -3px;
	padding: 0;
}

.information-bar li {
	height: 48px;
	line-height: 48px;
	font-size: 12px;
	color: #007aff;
	list-style-type: none;
	border-top: 1px solid #CCCCCC;
	padding: 0 10px;
	position: relative;

	width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;

}
.information-bar li:before,
.information-bar li:after {
	position: absolute;
	top: 27px;
	display: block;
	content: '';
	width: 10px;
	height: 2px; /* 太さ */
	background-color: #828282;
	border-radius: 4px;
	right: 10px;
}

.information-bar li:before {
	margin-top: -10px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.information-bar li:after {
	margin-top: -3px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.btn-large-orange {
	width: 80%;
	height: 40px;
	background-color: #F1C455;
	border-radius: 2px;
	text-align: center;
	margin: 0 auto;
	font-size: 14px;
	font-weight: bold;
	line-height: 40px;
	color: #000000;
}

.btn-small-orange {
	width: 60%;
	height: 40px;
	background-color: #F1C455;
	border-radius: 2px;
	text-align: center;
	margin: 0 auto;
	font-size: 14px;
	font-weight: bold;
	line-height: 40px;
	color: #000000;
}

.btn-tiny-orange {
	width: 60%;
	height: 25px;
	background-color: #F1C455;
	border-radius: 2px;
	text-align: center;
	margin: 0 auto;
	font-size: 12px;
	font-weight: bold;
	line-height: 25px;
	color: #000000;
}

.btn-large-orange a,
.btn-small-orange a {
	line-height: 40px;
	color: #000000;
	text-decoration: none;
}

.btn-large-orange a:visited,
.btn-small-orange a:visited {
	color: #000000;
}
/* ポイント消滅 */
.info_tilte{
	font-size: 23px;
	line-height: 1.8em;
	margin-bottom: 20px;
	font-weight: bold;
}
.info_area{
	margin: 16px;
	line-height: 1.6em;
	font-size: 16px;
} 
.page-base {
    position: relative;
}
.gold-btn {
    background-color: #B67C29;
    color: #FFF;
    font-size: 16px;
    line-height: 48px;
    font-weight: bold;
    width: calc(100% - 32px);
    margin: auto;
    border-radius: 5px;
    position: relative;
}
.gold-btn:after {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-color: #FFF #FFF transparent transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
}
.floating-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	font-weight: 600;
	margin: 0;
	padding: 16px;
	background: rgb(255, 255, 255);
}
.floating-btn img{
  width: 100%;
}
.btn-black {
	background: rgb(48, 51, 53);
	padding: 14px 23px;
	color: rgb(255, 255, 255);
	border-radius: 24px;
	text-shadow: none;
	text-align: center;
	line-height: 20px;
	font-size: 16px;
}
.btn-gold {
    background: #B67C29;
	padding: 14px 23px;
	color: rgb(255, 255, 255);
	border-radius: 24px;
	text-shadow: none;
	text-align: center;
	line-height: 20px;
	font-size: 16px;
}