@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* ================================================
定数定義
================================================ */
:root {
	--size-header-toolbar: 70px;
	--size-footer-navi: 70px;
	--size-tab-bar: 44px;
	--color-text-default: #333;
	--color-text-pale: #8d8d8d;
	--color-input-outline: #707070;
	--color-input-outline-focus: #05419b;
	--color-border: #c8c8c8;
	--color-separator-line: #b4b4b4;
	--color-base-main: #05419b;
	--color-secondary: #6ecdc3;
	--color-secondary-pale: #dff5ef;
	--color-accent: #f09199;
	--color-negative: #bababa;
	--color-background: #f4f2f2;
	--color-alert: #e04f4f;
	--color-logo-text: #fff;
	--size-font-xs: 12px;
	--size-font-s: 14px;
	--size-font-m: 16px;
	--size-font-n: 18px;
	--size-font-l: 20px;
	--size-font-xl: 22px;
	--size-font-2l: 24px;
	--size-font-3l: 26px;
	--size-font-4l: 28px;
	--ft-default: 'Noto Sans CJP', sans-serif;
	--ft-noto: 'Noto Sans CJP', sans-serif;
	--ft-hiragino: 'Hiragino Sans', 'ヒラギノ角ゴシック', sans-serif;
	--ft-awesome: FontAwesome;
	--page-width: 94%;
	--modal_-width: 92%;
	--radius-button--default: 28px;
}
/* ================================================
reset
================================================ */
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: normal;
	font-weight: normal;
	vertical-align: baseline;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
ol, ul {
	list-style: none;
	overflow-wrap: break-word;
}
svg {
	display: block;
}
dl {
	display: flex;
}
summary {
	display: block;
	list-style: none;
}
summary::-webkit-details-marker {
	display: none;
}
/* ================================================
layout
================================================ */
.page_wrapper {
	width: var(--page-width);
	margin: 0 auto;
}
.page_wrapper:has(.page_title) {
	margin: 40px auto;
}
.container {
	margin: 20px 0 40px 0;
}
.item_wrapper {
	margin: 20px 0;
	position: relative;
}
.item_wrapper.hidden {
	display: none;
}
.text_wrapper {
	margin: 20px 0;
}
.text_wrapper.hidden {
	display: none;
}
.button_wrapper {
	margin: 40px auto;
	text-align: center;
}
.button_wrapper button + button {
	margin-top: 20px;
}
/* ================================================
onsen overload
================================================ */
.page__background {
	background: var(--color-background);
}
/* ================================================
common
================================================ */
body {
	color: var(--color-text-default);
	font-size: var(--size-font-n);
	line-height: 1.6;
	/* navi.js置き換え */
	font-family: var(--ft-default);
}
.page,
.mbsc-font,
.mbsc-scv-c {
	/* navi.js置き換え */
	font-family: var(--ft-default);
}
a {
	color: var(--color-base-main);
	text-decoration: none;
}
.mbsc-ios a {
	color: var(--color-base-main);
	text-decoration: none;
}
.mbsc-ios.mbsc-button-flat {
	color: var(--color-base-main);
}
.mbsc-mobiscroll a {
	color: var(--color-base-main);
	text-decoration: none;
}
img.auto {
	width: 100%;
	height: auto;
}
img.cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
img.icon {
	object-fit: fill;
	object-position: center center;
}
hr {
	margin: 40px 0;
	border-top: 1px solid var(--color-separator-line);
}
.required::after {
	display: inline-block;
	vertical-align: top;
	width:56px;
	height: 24px;
	line-height: 24px;
	margin-left: 10px;
	color: #fff;
	background: var(--color-alert);
	font-weight: normal;
	font-size: var(--size-font-s);
	text-align: center;
	border-radius: 12px;
	content: "必須";
}
.link_next,
.link_prev {
	display: flex;
	align-items: center;
}
.link_next::after {
	content: "\f054";
	font-family: var(--ft-awesome);
	color: var(--color-base-main);
	font-size: var(--size-font-xs);
	margin-left: 4px;
}
.link_prev::before {
	content: "\f053";
	font-family: var(--ft-awesome);
	color: var(--color-base-main);
	font-size: var(--size-font-xs);
	margin-right: 4px;
}
.page_title {
	text-align: center;
	font-weight: 600;
	font-size: var(--size-font-l);
}
.page_title span {
	font-weight: 600;
	font-size: var(--size-font-l);
}
.item_title {
	font-size: var(--size-font-xl);
	font-weight: 600;
}
.point_unit {
	font-size: var(--size-font-2l);
	font-weight: 500;
}
.point_unit::after {
	content: "Pt";
	margin-left: 5px;
	font-size: var(--size-font-s);
}
.rank {
	font-size: var(--size-font-xl);
	font-weight: 600;
}
.rank::after {
	content: "位";
	margin-left: 5px;
	font-size: var(--size-font-s);
	font-weight: normal;
}
.number {
	font-size: var(--size-font-n);
}
.number::after {
	content: "人";
	font-size: var(--size-font-s);
	font-weight: normal;
}
dt.label {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: 28px;
	border: 1px solid var(--color-input-outline);
	border-radius: 4px;
	margin-right: 10px;
	padding: 0 10px;
	font-size: var(--size-font-s);
	font-weight: normal;
}
p.label {
	margin-bottom: 10px;
	font-weight: 600;
}
.pw_show {
	position: relative;
}
.pw_show_icon {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
}
.pw_show_icon i {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	padding: 16px 12px;
}
.bubble {
	position: relative;
	width: 100%;
	padding: 6px 0;
	color: #fff;
	border: none;
	background: var(--color-accent);
	border-radius: var(--radius-button--default);
	font-size: var(--size-font-n);
	text-align: center;
}
.bubble::after {
	position: absolute;
	content: "";
	top: 100%;
	left: 50%;
	border: 6px solid transparent;
	border-top: 6px solid var(--color-accent);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.count_area {
	margin-top: 4px;
	text-align: right;
}
.not_found {
	display:block !important;
	padding: 0 !important;
	margin: 40px 0 !important;
	text-align: center;
	color: var(--color-text-pale);
	font-weight: 600;
}
.hidden {
	display: none;
}
.notes {
	text-align: left;
	font-size: var(--size-font-m);
	color: #6f6f6f;
}
.notes li {
	margin-bottom: 10px;
	font-size: var(--size-font-s);
}
.notes li:last-child {
	margin-bottom: 0;
}
.notes li::before {
	content: "・";
}
.leaflet-control-attribution {
	display: none;
}
.fa-circle-question {
	font-size: var(--size-font-n);
	color: var(--color-base-main);
	margin-left: 10px;
}
.caption,
.caption span {
	text-align: left;
	font-weight: 600;
	font-size: var(--size-font-n);
}
/* ================================================
form
================================================ */
input,
label,
textarea,
select {
	font-size: var(--size-font-n);
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="email"],
input[type="number"] {
	display: block;
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	border: solid 1px var(--color-input-outline);
	background: #fff;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input.input-mobiscroll:focus {
	padding: 11px; /* ずれ防止 */
	border: solid 2px var(--color-input-outline-focus);
}
/* 矢印を非表示 Chrome, Safari, Edge */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
/* xを非表示 */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
/* 矢印を非表示 Firefox */
input[type="number"] {
	-moz-appearance: textfield;
}
input[type="checkbox"] {
	accent-color: var(--color-base-main);
	inline-size: 22px;
	block-size: 22px;
	margin-right: 4px;
}
input[type="radio"] {
	accent-color: var(--color-base-main);
	inline-size: 22px;
	block-size: 22px;
	margin-right: 4px;
}
input:disabled {
	background: #efefef;
}
.input-mobiscroll {
	font-size: var(--size-font-n);
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	background: #fff;
	border: solid 1px var(--color-input-outline);
}
textarea {
	width: 100%;
	height: 200px;
	border-radius: 8px;
	border: solid 1px var(--color-input-outline);
	padding: 12px;
}
textarea:focus {
	padding: 11px; /* ずれ防止 */
	border: solid 2px var(--color-input-outline-focus);
}
select {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	background: #fff;
	border: solid 1px var(--color-input-outline);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
::placeholder {
	color: #d3d3d3;
}
button {
	display: block;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	border: none;
	background: var(--color-base-main);
	border-radius: var(--radius-button--default);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}
button.main {
	/* height: 56px; */
	padding: 14px 20px;
	font-size: var(--size-font-n);
}
button.negative {
	/* height: 56px; */
	padding: 14px 20px;
	font-size: var(--size-font-n);
	background: var(--color-negative);
}
button.sub {
	height: 36px;
	font-size: var(--size-font-m);
	background: var(--color-secondary);
}
button.outline {
	/* height: 56px; */
	padding: 13px 20px;
	color: var(--color-base-main);
	border: 1px solid var(--color-base-main);
	background: #fff;
}
button.outline_sub {
	width: auto;
	height: 32px;
	padding: 0 20px;
	line-height: 1;
	color: var(--color-base-main);
	border: 1px solid var(--color-base-main);
	background: #fff;
}
button.medium {
	height: 42px;
	font-size: var(--size-font-s);
}
button.modal_main {
	height: 48px;
	font-size: var(--size-font-n);
}
button.modal_negative {
	height: 48px;
	background: var(--color-negative);
}
button.main:active,
button.medium:active,
button.modal_main:active {
	background: #fff;
	color: var(--color-base-main);
	border: 2px solid var(--color-base-main);
}
button.main:active {
	padding: 12px 20px;
}
button.main:disabled,
button.medium:disabled,
button.modal_main:disabled {
	background: var(--color-base-main);
	color: #fff;
	border: none;
}
button.main:disabled {
	padding: 14px 20px;
}
button:disabled,
[type="button"]:disabled {
	opacity: .6;
}
label:has(input[type="file"]:disabled) {
	opacity: .6;
}
label.item {
	display: inline-block;
	margin-bottom: 10px;
	font-weight: 600;
}
label.item + i {
	margin-left: 10px;
}
.err_msg:has(.input_error_msg) {
	margin: 20px 0;
	padding: 10px;
	border: solid 1px #d35b5b;
	background: #ffe2e2;
	text-align: center;
}
.err_msg .input_error_msg {
	color: var(--color-text-default);
	margin: 0;
}
.input_error_msg {
	margin-top: 4px;
	font-size: var(--size-font-s);
	color: var(--color-alert);
}
.warning {
	text-align: center;
	color: var(--color-alert);
}
a.btn {
	height: 32px;
	line-height: 32px;
	padding: 0 20px;
	border: 1px solid var(--color-base-main);
	border-radius: 16px;
}
a.btn i {
	margin-left: 10px;
	font-size: var(--size-font-s);
}
/* selectの下矢印 */
.fa-chevron-down.input-mobiscroll-icon {
	color: var(--color-base-main);
}
.stepper_control {
	display: flex;
	width: 100%;
}
.stepper_control button {
	width: 20%;
	height: 54px;
	color: var(--color-text-default);
	background: #dedede;
}
.stepper_control button:disabled {
	opacity: .5;
}
.stepper_control .minus {
	border-radius: 8px 0 0 8px;
	border: solid 1px var(--color-input-outline);
	border-right: none;
}
.stepper_control .plus {
	border-radius: 0 4px 4px 0;
	border: solid 1px var(--color-input-outline);
	border-left: none;
}
.stepper_control input {
	width: 60%;
	height: 54px;
	text-align: center;
	border-radius: 0;
}
.stepper_control .stepper_button {
	font-weight: 600;
}
/* ================================================
tab
================================================ */
#tabBar {
	position: Sticky;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--size-tab-bar);
	line-height: var(--size-tab-bar);
	background: #fff;
	z-index: 1;
}
#tabBar .tab_label {
	flex: 1;
	height: 100%;
	text-align: center;
	color: var(--color-text-pale);
	font-size: var(--size-font-m);
	border-bottom: 3px solid #fff;
}
#tabBar .tab_label.checked {
	color: var(--color-secondary);
	border-bottom: 3px solid var(--color-secondary);
}
#tabBody {
	margin: 10px 0 60px 0;
}
.tab_content {
	display: none;
}
.tab_content.checked {
	display: block;
}
.tab_card_list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.tab_card_list li {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: calc((100%  - 20px) / 2);
	background: #fff;
}
/* ================================================
Mobiscroll モーダル
================================================ */
.mbsc-fr-w {
	background: #fff;
}
.mbsc-ios .mbsc-fr-w {
	background: #fff;
	color: var(--color-text-default);
}
.mbsc-cloak {
	display: none;
}
/* 下スライドバー プロフィール画像設定の背景色 */
.mbsc-ios.mbsc-fr-bottom .mbsc-fr-overlay {
	background: rgba(0,0,0,0.5);
}
/* 下スライドバー プロフィール画像設定の枠線 */
.mbsc-ios.mbsc-fr-bottom .mbsc-fr-popup {
	border: none;
}
.mbsc-fr-overlay,
.mbsc-popup-overlay,
.mbsc-ios .mbsc-fr-overlay,
.mbsc-mobiscroll .mbsc-fr-overlay {
	background: rgba(0,0,0,0.5);
}
/* ================================================
mobiscroll : modal
================================================ */
.mbsc-fr-popup,
.mbsc-popup {
	width: 100% !important;
}
/* center */
.mbsc-fr-center .mbsc-fr-w {
	border-radius: 10px;
}
/* bottom */
.mbsc-fr-bottom .mbsc-fr-w {
	border-radius: 10px 10px 0 0;
}
/* front */
.mbsc-display-front {
	z-index: 100000;
}
.modal_wrapper {
	max-height: 95vh;
	padding: 20px;
	background: #fff;
	font-size: var(--size-font-n);
	overflow: auto;
}
.modal_wrapper .close a {
	color: var(--color-base-main);
}
.modal_wrapper .close:has(a) {
	text-align: left;
	margin-bottom: 10px;
	font-size: var(--size-font-s);
}
.modal_header {
	text-align: center;
}
.modal_body {
	margin: 20px 0;
}
.modal_body_compact {
	margin: 10px 0;
}
.overflow_box {
	display: block;
	max-height: 50vh;
	overflow: auto;
}
.modal_footer {
	text-align: center;
	font-size: var(--size-font-n);
}
.modal_footer button {
	margin-top: 20px;
}
.modal_footer button + button {
	margin-top: 20px;
}
.modal_body_compact + .modal_footer button {
	margin-top: 20px;
}
/* ================================================
modalRegisterProfile : プロフィール画像設定モーダル
================================================ */
#modalRegisterProfile ul li {
	padding: 16px;
	font-size: var(--size-font-n);
	background: #fff;
	border-bottom: 1px solid #efefef;
}
#modalRegisterProfile ul li:first-child {
	font-weight: 600;
}
#modalRegisterProfile #imgSelect {
	display: none;
}
#modalRegisterProfile label[for="imgSelect"] {
	display: block;
}
/* ================================================
list
================================================ */
.list_box,
.list_box_detail {
	width:100%;
	padding: 20px;
	background: #fff;
}
.list_box_detail {
	position: relative;
	padding-right: 30px;
}
/* ================================================
card
================================================ */
.card_flat {
	position: relative;
	margin: 0;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: none;
	border: 1px solid #d7d7d7;
}
.card_box,
.card_box_shadow,
.card_box_detail {
	position: relative;
	width:100%;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
}
.card_box_detail {
	padding-right: 30px;
	box-shadow: 2px 3px 8px 0 rgba(0, 0, 0, 0.2);
}
.list_box_detail::after,
.card_box_detail::after {
	content: "\f054";
	font-family: var(--ft-awesome);
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	/* 1px細くする
	-webkit-text-stroke: 1px #fff;
	*/
}
.card_box_shadow {
	box-shadow: 2px 3px 8px 0 rgba(0, 0, 0, 0.2);
}
/* ================================================
カードリスト内容
================================================ */
.point_ratio {
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #05419B;
	background: #ffe65f;
	border-radius: 4px;
	margin: 10px 0;
	font-weight: 600;
}
.image_info {
	display: flex;
	gap: 10px;
}
.image_info .image {
	width: 90px;
	height: 90px;
}
.image_info img {
	border-radius: 8px;
	border: 1px solid #e5e5e5;
}
.image_info .name {
	width: calc(100% - 80px);
}
.point_info {
	display: flex;
	align-items: center;
	word-break: break-all;
	flex-wrap: wrap;
	width: 100%;
}
.point_info .point {
	display: flex;
	align-items: center;
}
.point_info * {
	font-weight: 600;
}
.point_info .point_unit::after {
	margin: 0;
}
.point_info .point:nth-child(1) dt {
	width: 26px;
	text-align: left;
	font-size: var(--size-font-l);
	color: var(--color-accent);
}
.point_info .point:nth-child(1) dd {
	font-size: var(--size-font-xl);
}
.point_info .point:nth-child(1) dd.secondary::before {
	content: "～";
	font-size: var(--size-font-s);
}
.point_info .point:nth-child(2) {
	margin-left: 16px;
	color: var(--color-accent);
}
.point_info .point:nth-child(2) dt,
.point_info .point:nth-child(2) dd {
	font-size: var(--size-font-l);
}
.point_info .passes_unit {
	font-size: var(--size-font-s);
}
#detailBody .point_info .point:nth-child(1) dt {
	width: 30px;
	font-size: var(--size-font-xl);
}
#detailBody .point_info .point:nth-child(1) dd {
	font-size: 30px;
}
#detailBody .point_info .point:nth-child(2) dt {
	font-size: var(--size-font-xl);
}
#detailBody .point_info .point:nth-child(2) dd {
	font-size: var(--size-font-3l);
}
.got_point {
	color: #fff;
	background: var(--color-accent);
	border-radius: 4px;
	margin-left: 20px;
	padding: 3px 7px;
	font-size: var(--size-font-s);
	font-weight: normal;
}
.gettable {
	display: inline-block;
	color: #fff;
	background: var(--color-secondary);
	border-radius: 4px;
	margin: 5px 0;
	padding: 3px 7px;
	font-size: var(--size-font-s);
	font-weight: normal;
}
.theme_info {
	display: flex;
	flex-wrap: wrap;
}
.theme_info li {
	color: var(--color-secondary);
	background: #fff;
	border: 1px solid var(--color-secondary);
	border-radius: 18px;
	padding: 5px 10px;
	margin-top: 10px;
	margin-right: 10px;
	font-size: var(--size-font-xs);
	font-weight: 500;
	line-height: 1;
}
#detailBody .theme_info li {
	padding: 7px 15px;
	font-size: var(--size-font-s);
}
.description, .summary {
	margin-top: 20px;
}
.period dt {
	display: flex;
	align-items: flex-start;
	width: 26px;
	padding-top: 1px;
	text-align: left;
	font-size: var(--size-font-l);
	color: var(--color-text-pale);
}
.period dd {
	width: calc(100% - 26px);
	font-weight: 600;
}
#detailBody .period dt {
	width: 30px;
	padding-top: 0;
	font-size: var(--size-font-xl);
}
#detailBody .period dd {
	width: calc(100% - 30px);
}
.period .more {
	display: none;
}
.period #readMore {
	display: none;
}
.period #readMore:checked + .more {
	display: block;
}
.period label[for="readMore"] {
	display: flex;
	justify-content: center;
	font-size: var(--size-font-m);
	color: var(--color-base-main);
}
.period #readMore + .more + label[for="readMore"]::after {
	font-family: FontAwesome;
	content: "\f107";
	transition: all .5s;
	margin-left: 5px;
}
.period #readMore:checked + .more + label[for="readMore"]::after {
	transform: rotate(180deg);
}
.period_add {
	margin: 5px 0 0 26px;
	font-size: var(--size-font-s);
	color: #4d4d4d;
}
.action_genre_name {
	color: var(--color-text-pale);
	font-size: var(--size-font-s);
	margin-bottom: 4px;
}
.boosting {
	position: absolute;
	top: 0;
	right: 0;
	width: 124px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	font-size: var(--size-font-m);
	font-weight: 600;
	color: #05419B;
	background: #ffe65f;
	border-radius: 0 12px 0 12px;
}
/* ================================================
保有ポイント数
================================================ */
#totalPointCard {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	color: var(--color-text-default);
}
#totalPointCard.card_box_detail {
	padding: 10px 30px 10px 20px;
}
#totalPointCard.card_flat {
	padding: 10px 20px;
}
#totalPointCard #totalPoint {
	color: var(--color-base-main);
}
/* ================================================
loading
================================================ */
#loading {
	background: rgba(255, 255, 255, .8);
	z-index: 99999 !important;
}
#loadingList {
	text-align: center;
}
/* ================================================
header
================================================ */
#header {
	display: none;
	position: relative;
}
#header.page_header {
	display: block;
}
#header #title {
	position: absolute;
	left: 50px;
	right: 50px;
	top: 0;
	bottom: 0;
	text-align: center;
}
/* ================================================
footerNavi
================================================ */
.mbsc-ios.mbsc-ms-c {
	background: #fff;
}
#footerNavi {
	height: 70px;
	font-size: 10px;
}
#footerNavi li {
	width: 25%;
}
#footerNavi i {
	display: block;
	font-size: 20px;
	margin-bottom: 10px;
}
#footerNavi .navi_name {
	/* color: var(--color-base-main); */
	font-weight: 600;
	font-size: 10px;
}
#footerNavi .mbsc-ms-item-sel {
	color: #989898;
	font-weight: 400;
}
#footerNavi .mbsc-ms-item-sel:active {
	color: var(--color-base-main);
}
#footerNavi .mbsc-ms-item-sel:not([data-notmark]) {
	color: var(--color-base-main);
	font-weight: 600;
}
#footerNavi .mbsc-ms-item-sel:not([data-notmark]) i,
#footerNavi .mbsc-ms-item-sel:not([data-notmark]) span {
	color: var(--color-base-main);
	font-weight: 600;
}
.mbsc-ios .mbsc-ms-item.mbsc-focus,
.mbsc-ios.mbsc-no-touch .mbsc-ms-item:not(.mbsc-disabled):hover {
	background: #fff;
}
.mbsc-mobiscroll.mbsc-ms-c .mbsc-scv-sc .mbsc-ms .mbsc-ms-item.mbsc-active,
.mbsc-mobiscroll.mbsc-no-touch .mbsc-ms-item:not(.mbsc-disabled):hover {
	background: none;
}
/* ================================================
pageAuthLogin : ログイン
================================================ */
#pageAuthLogin #logoImage {
	width: 50%;
	margin: 50px auto 40px auto;
}
#pageAuthLogin .text_wrapper:has(#fotgetPassword) {
	margin-top: -10px;
}
#pageAuthLogin #fotgetPassword {
	font-weight: 600;
	font-size: var(--size-font-m);
}
#pageAuthLogin #fotgetPassword.link_next {
	justify-content: end;
}
#pageAuthLogin #signUp {
	font-weight: 600;
}
#pageAuthLogin #signUp.link_next {
	justify-content: center;
}
#pageAuthLogin .button_wrapper {
	margin: 40px 0 20px 0;
}
#pageAuthLogin button[name="select_account"] {
	font-size: var(--size-font-m);
}
#modalSelectAccount .text,
#modalDeleteAccountConfirm .text {
	margin: 20px 0;
}
#modalSelectAccount .overflow_box {
   max-height: 312px;
}
#modalSelectAccount .account_list {
	padding: 1px 0;
}
#modalSelectAccount .account_list li {
	border-top: 1px solid var(--color-input-outline);
}
#modalSelectAccount .account_list li:last-child {
	border-bottom: 1px solid var(--color-input-outline);
}
#modalSelectAccount .account_list dl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 23px 0;
	line-height: 1;
}
#modalSelectAccount .account_list dt {
	width: 80%;
}
#modalSelectAccount .account_list dd {
	width: 20%;
	text-align: right;
}
#modalSelectAccount .account_list dt a {
	display: block;
	font-weight: bold;
	color: var(--color-text-default);
}
#modalSelectAccount .account_list dd a {
	padding: 8px 12px;
	font-size: var(--size-font-xs);
	background: var(--color-alert);
	color: #fff;
}
/* ================================================
pageAuthLogin : パスワード再発行
================================================ */
#pageAuthResetPassword .explanation {
	text-align: center;
	font-size: var(--size-font-m);
}
#modalPasswordCompleted .modal_body p {
	text-align: center;
	font-size: var(--size-font-m);
}
/* ================================================
pageUserRegisterProfile : プロフィール設定
================================================ */
.profile_image {
	display: block;
	position: relative;
	width: 90px;
	height: 90px;
	margin: 0 auto;
}
.profile_image img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: 50%;
}
.profile_image i {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-text-pale);
	color: #fff;
	font-size: var(--size-font-s);
}
#pageUserRegisterProfile .login.link_next {
	display: none;
	font-weight: 600;
}
#pageUserRegisterProfile .text_wrapper:has(.login) {
	text-align: center;
}
#pageUserRegisterProfile .button_wrapper {
	margin: 40px 0 20px 0;
}
/* ================================================
pageUserRegisterInformation : 利用者情報
================================================ */
#pageUserRegisterInformation .name_wrapper,
#pageIncentiveShipping .name_wrapper,
#modalEditUser .name_wrapper {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
#pageUserRegisterInformation .tel_wrapper,
#pageIncentiveShipping .tel_wrapper,
#modalEditUser .tel_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 8px;
}
#pageUserRegisterInformation .tel_wrapper i.fa-hyphen,
#pageIncentiveShipping .tel_wrapper i.fa-hyphen,
#modalEditUser .tel_wrapper i.fa-hyphen {
	padding-top: 18px;
}
#pageUserRegisterInformation .name_wrapper li:has(input),
#pageIncentiveShipping .name_wrapper li:has(input),
#modalEditUser .name_wrapper li:has(input) {
	width: 100%;
}
#pageUserRegisterInformation .tel_wrapper li:has(input),
#pageIncentiveShipping .tel_wrapper li:has(input),
#modalEditUser .tel_wrapper li:has(input) {
	width: 100%;
}
#pageUserRegisterInformation .item_wrapper:has(.terms_box) {
	margin: 40px 0;
}
#pageUserRegisterInformation .terms_box {
	padding: 10px 14px;
	background: var(--color-secondary-pale);
}
#pageUserRegisterInformation .terms_box p,
#pageUserRegisterInformation .terms_box a {
	font-weight: 600;
}
#pageUserRegisterInformation .terms_box label {
	display: block;
	margin-top: 10px;
}
#pageUserRegisterInformation #acceptTerms,
#pageUserRegisterInformation #skipRegisterCard {
	margin-right: 10px;
}
#pageUserRegisterInformation label:has(#acceptTerms:checked),
#pageUserRegisterInformation label:has(#skipRegisterCard:checked),
#pageUserRegisterInformation label:has(#skipRegisterCard:checked) span {
	font-weight: 600;
}
.password_method {
	margin-bottom: 10px;
	font-size: var(--size-font-s);
	color: var(--color-text-pale);
}
.attention_message {
	margin: 10px 0;
	font-size: var(--size-font-s);
}
.user_message {
	padding: 10px 14px;
	border: 1px solid #ffe65f;
	background: #ffffe6;
	border-radius: 0;
}
.user_message p {
	font-size: var(--size-font-m);
}
.user_message i {
	color: #ffe65f;
}
.user_message dl {
	gap: 10px;
}
.user_message dl dd {
	font-size: var(--size-font-s);
	text-align: left;
}
.warning_message {
	padding: 10px 14px;
	border: 1px solid #ffe65f;
	background: #ffffe6;
	border-radius: 0;
	text-align:center;
}
.warning_message p {
	font-size: var(--size-font-s);
}
.err_msg .link_next,
.warning_message .link_next {
	display: inline-block;
}
.warning_message .link_wrapper {
	margin-top: 20px;
}
#aboutCard {
	margin-top: 10px;
	font-weight: 600;
}
#aboutCard.link_next {
	justify-content: center;
}
#aboutCard span {
	 font-weight: 600;
}
#modalRegisterMail,
#modalUpdateMail {
	height: 95vh;
	overflow: auto;
}
/* ================================================
メールアドレス認証
================================================ */
.activate_code_area .user_message {
	text-align: center;
}
.activate_code_area .user_message p {
	margin-bottom: 10px;
}
.activate_code_area #emailAddress {
	font-weight: 600;
}
.activate_code_area #returnUser {
	font-weight: 600;
	justify-content: center;
}
.activate_code_area .code_input {
	margin: 40px 0;
	text-align: center;
	font-weight: 500;
	font-size: var(--size-font-m);
}
.activate_code_area p:has(#expirationDate) {
	margin-top: 10px;
}
.activate_code_area #expirationDate {
	font-size: var(--size-font-l);
	font-weight: 600;
}
.activate_code_area .auth_code_box {
	display: flex;
	gap: 10px;
}
.activate_code_area .activate_code input {
	text-align: center;
}
.activate_code_area .button_wrapper:has(#resend) {
	margin: 20px 0 40px 0;
}
.activate_code_area #resend.outline {
	width: auto;
	height: 32px;
	padding: 0 20px;
	font-size: var(--size-font-m);
	line-height: 1;
}
.activate_code_area #resendMessage {
	font-size: var(--size-font-m);
	font-weight: 600;
}
.activate_code_area #resendMessage i {
	color: var(--color-base-main);
	margin-right: 5px;
}
/* ================================================
pageUserRegisterCard : カード情報入力
================================================ */
#pageUserRegisterCard .button_wrapper:has(#correction) {
	margin: 30px 0 40px 0;
}
/* ================================================
modalInformation : 汎用案内モーダル
================================================ */
#modalInformation .modal_body .text {
	margin-top: 20px;
	text-align: center;
}
#modalInformation .modal_body .not_found {
	margin-top: 0;
}
/* ================================================
modalTerms : 利用規約モーダル
================================================ */
#modalTerms {
	height: 95vh;
	overflow: auto;
}
#modalTerms .overflow_box {
	max-height: 80vh;
}
#modalTerms .header {
	text-align: center;
}
#modalTerms h1 {
	font-size: var(--size-font-l);
	font-weight: 600;
}
#modalTerms .body .page_wrapper {
	width: 100%;
	max-height: 70vh;
	overflow: auto;
	border: 1px solid var(--color-input-outline);
	margin: 20px 0;
	padding: 10px;
}
/* ================================================
document : 汎用ドキュメント
================================================ */
.document h2:first-child {
	margin-top: 0;
}
.document h2 {
	margin: 20px 0 5px;
	font-weight: 600;
	font-size: var(--size-font-n);
}
.document h3 {
	margin-top: 20px;
	font-weight: 600;
	font-size: var(--size-font-m);
}
.document h2 + h3 {
	margin-top: 0;
}
.document p,
.document ol li,
.document ul li {
	color: #4d4d4d;
	font-size: var(--size-font-s);
}
.document ul {
	list-style: disc;
}
.document ul.none {
	list-style: none !important;
}
.document ul li {
	margin-left: 20px;
}
.document ol {
	list-style: decimal;
}
.document ol li {
	margin-left: 20px;
}
.document ol.brackets,
.document ol li ol {
	list-style: none;
	counter-reset: number 0;
}
.document ol.brackets > li,
.document ol li ol li {
	position: relative;
	margin-left: 30px;
}
.document ol.brackets > li:before,
.document ol li ol li:before {
	position: absolute;
	top: 0;
	left: -25px;
	counter-increment: number 1;
	content: "(" counter(number) ") ";
}
.document ol li ol.half li:before {
	content: counter(number) ") ";
}
.document p.fin {
	text-align: right;
}
.document p.indent {
	text-indent: 1em;
}
/* ================================================
pageUserRegisterIncomplete : ユーザ登録未完了案内
================================================ */
#pageUserRegisterIncomplete .container {
	text-align: center;
}
/* ================================================
pageActionIndex : テーマ／アクションジャンル一覧
================================================ */
#pageActionIndex .tab_content img.icon {
	width: 40px;
	height: 40px;
	object-fit: fill;
	object-position: center center;
}
#pageActionIndex .tab_content .name {
	font-size: var(--size-font-m);
	font-weight: 600;
}
#pageActionIndex .tab_card_list li {
	align-items: normal;
}
#pageActionIndex .tab_card_list li dl {
	display: flex;
	align-items: center;
}
#pageActionIndex .tab_card_list li dt {
	width: 50px;
}
#pageActionIndex .tab_card_list li dd {
	width: calc(100% - 50px);
	text-align: center;
}
@media screen and (max-width: 340px) {
	#pageActionIndex .tab_card_list li {
		align-items: normal;
		justify-content: start;
	}
	#pageActionIndex .tab_card_list li dl {
		display: flex;
		flex-flow: column;
		align-items: center;
		height: 100%;
	}
	#pageActionIndex .tab_card_list li dt {
		width: 100%;
		text-align: center;
	}
	#pageActionIndex .tab_card_list li dd {
		display: flex;
		flex-flow: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin-top: 13px;
		text-align: center;
		font-size: var(--size-font-m);
	}
}
/* ================================================
list
================================================ */
.list_header {
	position: Sticky;
	left: 0;
	width: 100%;
	text-align: center;
	background: #fff;
	z-index: 2;
	border-radius: 0 0 20px 20px;
	box-shadow: 2px 3px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 0 20px 14px;
}
.list_header .description {
	margin-top: 10px;
	text-align: center;
	font-size: var(--size-font-m);
}
.list_header .read_more {
	margin-top: 10px;
	font-size: var(--size-font-s);
}
.list_header .action_genre_name {
	padding-top: 14px;
	height: 34px;
}
.list_header_top {
	position: absolute;
	top: 0;
	height: 2px;
	left: 0;
	right: 0;
}
.list_header_inner {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 14px 0 0;
	z-index: 9999;
}
.list_header_detail_inner {
/*	height: 94px; */
	position: sticky;
	top: 0;
	background: #fff;
	padding: 14px 0 0;
	z-index: 9999;
}
.search_word {
	display: flex;
	white-space: nowrap;
	overflow-x: scroll;
}
.search_word label input {
	display: none;
}
.search_word label span {
	display: block;
	height: 30px;
	line-height: 29px;
	color: var(--color-secondary);
	background: #fff;
	border: 1px solid var(--color-secondary);
	border-radius: 18px;
	padding: 0 15px;
	margin-top: 10px;
	margin-right: 10px;
	font-size: var(--size-font-s);
	font-weight: 400;
}
.search_word label input:checked + span {
	font-weight: 600;
	background: var(--color-secondary-pale);
}
#listBody {
	width: var(--page-width);
	margin: 20px auto;
}
#listBody > ul > li {
	margin-bottom: 20px;
}
#listBody > ul > li:last-child {
	margin-bottom: 0;
}
/* ================================================
detail
================================================ */
#detailHeader {
	text-align: center;
	background: #fff;
}
#detailHeader.title {
	width: var(--page-width);
	margin: 0 auto;
	background: transparent;
}
#detailHeader .page_title {
	margin: 20px 0 10px 0;
	text-align: left;
}
#detailBody {
	background: #fff;
	padding: 20px 0;
}
#detailFooter {
	width: var(--page-width);
	margin: 20px auto;
}
#howToPoint {
	text-align: center;
	margin: 30px 0;
}
#howToPoint button {
	margin-top: 20px;
}
#howToPoint .btn_main {
	margin-top: 20px;
}
#howToPoint .get_text {
	color: var(--color-base-main);
	font-weight: 600;
}
#howToPoint .fa-circle-question + a {
	font-size: var(--size-font-m);
}
#howToPoint .fa-circle-question + a::after {
	content: "\f054";
	font-family: var(--ft-awesome);
	font-size: var(--size-font-xs);
	margin-left: 4px;
}
#howToPoint .fa-circle-question {
	margin-right: 10px;
}
#contact li {
	margin-bottom: 20px;
}
#contact li:last-child {
	margin-bottom: 0;
}
#contact dl {
	display: block;
	width: 100%;
}
#contact dt i {
	width: 26px;
	color: var(--color-secondary);
}
#contact li .btn {
	display: inline-block;
	margin-top: 10px;
}
#contact li .btn i {
	margin-left: 10px;
}
/* ================================================
contact
================================================ */
#ContactInformation .contact_name {
	text-align: center;
	font-weight: 600;
	font-size: var(--size-font-l);
}
#ContactInformation dl {
	margin-top: 10px;
}
#ContactInformation dt {
	width: 100px;
}
#ContactInformation dd {
	width: calc(100% - 100px);
}
#ContactInformation .contact_note {
	margin-top: 20px;
}
/* ================================================
pageNewsList : ニュース一覧＋お知らせ一覧
================================================ */
#pageNewsList .tab_content li {
	margin-bottom: 2px;
}
#pageNewsList .date {
	color: var(--color-text-pale);
	font-size: var(--size-font-s);
}
#pageNewsList .new {
	display: inline-block;
	width: 48px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: var(--size-font-xs);
	color: #fff;
	background: var(--color-alert);
	border-radius: 3px;
}
#pageNewsList #newsList .new {
	margin-bottom: 10px;
}
#pageNewsList .type {
	display: flex;
	gap: 10px;
	margin-bottom: 4px;
}
#pageNewsList .type_name {
	font-size: var(--size-font-s);
	color: var(--color-text-pale);
}
#pageNewsList .fa-circle {
	margin-left: 10px;
	color: var(--color-alert);
	font-size: var(--size-font-s);
}
/* ================================================
pageNewsDetail : ニュース詳細
================================================ */
#pageNewsDetail .page__background {
	background: #fff;
}
#pageNewsDetail #detailHeader {
	padding-bottom: 20px;
	text-align: left;
	border-bottom: 1px solid var(--color-separator-line);
}
#pageNewsDetail .page_title {
	font-size: var(--size-font-l);
}
#pageNewsDetail .date {
	margin-top: 10px;
	color: var(--color-text-pale);
}
#pageNewsDetail  img {
	margin-bottom: 20px;
}
#pageNewsDetail .btn {
	display: inline-block;
	margin-top: 10px;
}
/* ================================================
pagePointIndex : ポイント履歴
================================================ */
#pagePointIndex #tabHeader {
	position: fixed;
	top: var(--size-header-toolbar);
	left: 0;
	width: 100%;
	z-index: 1;
	background: var(--color-background);
}
#pagePointIndex #tabBar {
	position: fixed;
	/* jsで書き換える */
	top: 215px;
}
#pagePointIndex #tabBody {
	/* jsで書き換える */
	margin: 208px 0 20px 0;
}
#pagePointIndex .tab_content li {
	margin-bottom: 2px;
}
#pagePointIndex .tab_content li.not_found {
	margin:0 !important;
	padding: 40px 0 !important;
}
#pagePointIndex #currentPoint {
	padding: 0 20px;
	margin: 20px 0;
	font-size: var(--size-font-s);
}
#pagePointIndex #currentPoint li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
}
#pagePointIndex #currentPoint li:nth-child(2) {
	border-top: 1px solid var(--color-separator-line);
}
#pagePointIndex #currentPoint li:nth-child(2n) {
	color: var(--color-text-pale);
	font-size: var(--size-font-m);
}
#pagePointIndex .point_unit {
	color: var(--color-base-main);
}
#pagePointIndex #totalPoint.point_unit {
	font-size: 30px;
}
#pagePointIndex .history {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
#pagePointIndex .history .datetime {
	color: var(--color-text-pale);
	font-size: var(--size-font-s);
}
#pagePointIndex .history .genre_name,
#pagePointIndex .history .group_name {
	margin-top: 2px;
	font-weight: 600;
}
#pagePointIndex .history .title,
#pagePointIndex .history .action_name {
	margin-top: 2px;
	color: #4d4d4d;
	font-size: var(--size-font-s);
}
#pagePointIndex .history .no_data {
	margin-top: 2px;
	color: var(--color-text-pale);
	font-size: var(--size-font-s);
}
#pagePointIndex .history .point_unit {
	font-size: var(--size-font-l);
	font-weight: 600;
	white-space: nowrap
}
#pagePointIndex .history .point_unit::after {
	margin-left: 0;
}
#pagePointIndex details summary {
	display: flex;
	justify-content: center;
	font-size: var(--size-font-m);
	color: var(--color-base-main);
	margin-top: 2px;
}
#pagePointIndex details summary::after {
	font-family: FontAwesome;
	content: "\f107";
	transition: all .5s;
	margin-left: 4px;
}
#pagePointIndex details[open] summary::after {
	transform: rotate(180deg);
}
#pagePointIndex .shipping {
	padding: 10px;
	margin-top: 10px;
	background: var(--color-secondary-pale);
	font-size: var(--size-font-s);
}
#pagePointIndex .shipping dl {
	margin: 4px 0;
}
#pagePointIndex .shipping dt {
	width: 120px;
}
#pagePointIndex .shipping dd {
	width: calc(100% - 120px);
}
/* ================================================
pageMypageRanking : ランキング
================================================ */
#pageMypageRanking .city_area {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}
#pageMypageRanking .city_area li {
	width: 50%;
}
#pageMypageRanking .city_area li:first-child {
	border-right: 2px solid #f0f0f0;
}
#pageMypageRanking .city_area dl {
	display: block;
	padding: 0 20px;
}
#pageMypageRanking .city_area dt {
	font-size: var(--size-font-m);
}
#pageMypageRanking .city_area dd {
	text-align: right;
	color: var(--color-base-main);
	font-size: var(--size-font-4l);
	font-weight: 600;
}
#pageMypageRanking .city_area dd span {
	margin-left: 8px;
	color: var(--color-text-default);
	font-size: var(--size-font-s);
}
#pageMypageRanking .tab_card_list {
	margin: 20px 0;
}
#pageMypageRanking .tab_card_list li {
	position: relative;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-flow: nowrap;
	width: calc((100%  - 20px) / 2);
	padding: 10px;
}
#pageMypageRanking .tab_card_list img {
	width: 38px;
	height: 38px;
	margin-right: 10px;
}
#pageMypageRanking .tab_card_list .ranking_name {
	font-size: var(--size-font-m);
	font-weight: 600;
}
#pageMypageRanking .tab_card_list .ranking {
	font-size: var(--size-font-n);
	font-weight: 600;
}
#pageMypageRanking .tab_card_list .ranking span {
	margin-left: 5px;
	font-size: var(--size-font-s);
}
#pageMypageRanking .tab_card_list .point {
	position: absolute;
	bottom: 14px;
	right: 10px;
	color: var(--color-text-pale);
	font-size: var(--size-font-xs);
}
#pageMypageRanking hr {
	margin: 20px 0;
}
/*
@media screen and (max-width: 350px) {
	#pageMypageRanking .tab_card_list li {
		width: calc((100%  - 20px) / 2);
	}
}
*/
/* ================================================
pageMypageTitle : 称号
================================================ */
#pageMypageTitle .tab_card_list li {
	align-items: center;
	justify-content: start;
	width: calc((100%  - 40px) / 3);
	background: transparent;
}
#pageMypageTitle .got_title {
	width: 72px;
	height: 72px;
	border: 1px solid #d7d7d7;
	border-radius: 50%;
}
#pageMypageTitle .title_name {
	margin-top: 6px;
	text-align: center;
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pageMypageTitle .unit {
	font-size: var(--size-font-xs);
}
#pageMypageTitle hr {
	margin: 20px 0;
}
@media screen and (max-width: 350px) {
	#pageMypageTitle .tab_card_list li {
		width: calc((100%  - 20px) / 2);
	}
}
/* ================================================
pageActionQuizList : クイズ一覧
pageActionQuizList : アンケート一覧
================================================ */
#pageActionQuizList #quizList li .answered,
#pageActionQuestionnaireList #questionnaireList li .answered,
#pageActionTheme #actionList li .answered,
#pageActionMeetHistory #meetHistoryList li .inactive,
#pageActionInviteHistory #inviteHistoryList li .inactive {
	opacity: .5;
}
#pageActionQuizList #quizList li:has(.answered),
#pageActionQuestionnaireList #questionnaireList li:has(.answered),
#pageActionTheme #actionList li:has(.answered),
#pageActionMeetHistory #meetHistoryList li:has(.inactive),
#pageActionInviteHistory #inviteHistoryList li:has(.inactive) {
	position: relative;
	border-radius: 12px;
	background: #000;
	opacity: 0.7;
}
#pageActionQuizList #quizList li:has(.answered)::after,
#pageActionQuestionnaireList #questionnaireList li:has(.answered)::after,
#pageActionTheme #actionList li:has(.answered)::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: var(--size-font-2l);
	white-space: nowrap;
	color: #fff;
	content: "済";
}
/* ================================================
pageActionQuizDetail : クイズ詳細
================================================ */
#pageActionQuizDetail #listHeader,
#pageActionQuizDetail #listHeaderScroll,
#pageActionQuestionnaireDetail #listHeader,
#pageActionQuestionnaireDetail #listHeaderScroll {
	text-align: left;
}
#pageActionQuizDetail #listHeaderScroll #actionGenreName,
#pageActionQuestionnaireDetail #listHeaderScroll #actionGenreName {
	display: none;
}
#pageActionQuizDetail #questionDetail {
	text-align: center;
}
#pageActionQuizDetail .qa_no {
	font-size: var(--size-font-m);
	color: var(--color-text-pale);
}
#pageActionQuizDetail .question_text {
	text-align: left;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border);
}
#pageActionQuizDetail .question_text p {
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pageActionQuizDetail .options {
	margin: 20px 0;
}
#pageActionQuizDetail .options li {
	margin: 20px 0;
}
#pageActionQuizDetail .options label input {
	display: none;
}
#pageActionQuizDetail .options label span {
	display: block;
	padding: 18px;
	border: 1px solid var(--color-input-outline);
	border-radius: 8px;
	font-size: var(--size-font-m);
	font-weight: 600;
}
#pageActionQuizDetail .options label input:checked + span {
	padding: 17px; /* ずれ防止 */
	border: 2px solid var(--color-secondary);
	color: var(--color-secondary);
	background: var(--color-secondary-pale);
}
#pageActionQuizDetail #btnAnswer {
	margin-top: 40px;
}
#modalQuizComplete .modal_header * {
	font-weight: 600;
}
#modalQuizComplete #answer {
	width: 124px;
	height: 124px;
	margin: 0 auto;
}
#modalQuizComplete #answer.incorrect {
	background: url("../images/answer_incorrect.svg") no-repeat center center / cover;
}
#modalQuizComplete #answer.correct {
	background: url("../images/answer_correct.svg") no-repeat center center / cover;
}
#modalQuizComplete #answer .text {
	font-size: 38px;
	line-height: 124px;
}
#modalQuizComplete #point * {
	line-height: 1.2;
}
#modalQuizComplete #point {
	margin-top: 10px;
}
#modalQuizComplete #point .point {
	font-size: 32px;
}
#modalQuizComplete #point .get {
	font-size: var(--size-font-l);
}
#modalQuizComplete .point_unit::after {
	margin-left: 0;
}
#modalQuizComplete .answer_text {
	padding: 10px 20px;
	text-align: center;
	background: var(--color-secondary-pale);
}
#modalQuizComplete .collect {
	font-size: var(--size-font-l);
	text-decoration: underline;
	text-decoration-color: var(--color-secondary);
	text-decoration-thickness: 8px;
	text-underline-offset: -4px;
	text-decoration-skip-ink: none;
	font-weight: 600;
}
#modalQuizComplete .message {
	margin-top: 10px;
}
#pageActionQuizDetail .err_msg:has(.input_error_msg),
#pageActionQuestionnaireDetail .err_msg:has(.input_error_msg) {
	margin: 0 0 20px 0;
}
/* ================================================
pageActionQuestionnaireDetail : アンケート詳細
================================================ */
#pageActionQuestionnaireDetail #questionDetailList > p {
	margin-bottom: 20px;
}
#pageActionQuestionnaireDetail #questionDetailList > li {
	margin-bottom: 20px;
}
#pageActionQuestionnaireDetail #questionDetailList > li:last-child {
	margin-bottom: 0;
}
#pageActionQuestionnaireDetail #questionDetailList ul {
	margin-top: 10px;
}
#pageActionQuestionnaireDetail label {
	display: flex;
	margin: 8px 0;
	text-align: left;
}
#pageActionQuestionnaireDetail label.label_button {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 13px 20px;
	color: var(--color-base-main);
	border: 1px solid var(--color-base-main);
	border-radius: var(--radius-button--default);
	background: #fff;
	font-weight: 500;
	text-align: center;
}
#pageActionQuestionnaireDetail label.label_button input {
	/*
		入力エラー発生時、hiddenの場合フォーカスが当たらい
		display: none;
		↓↓↓ フォーカスをあてる対策 ↓↓↓
	*/
	width: 0;
	overflow: hidden;
}
#pageActionQuestionnaireDetail label.label_button:has(input:active) {
	border: 2px solid var(--color-base-main);
	padding: 12px 20px;
}
#pageActionQuestionnaireDetail label.label_button:has(input:disabled ) {
	border: 1px solid var(--color-base-main);
	padding: 13px 20px;
}
#pageActionQuestionnaireDetail input[type="radio"],
#pageActionQuestionnaireDetail input[type="checkbox"] {
	margin: 0 10px 0 0;
}
#pageActionQuestionnaireDetail label input + span {
	display: block;
	width: calc(100% - 32px);
}
#pageActionQuestionnaireDetail .preview {
	display: none;
	margin-bottom: 10px;
}
#pageActionQuestionnaireDetail input[type="file"] {
	display: none;
}
#pageActionQuestionnaireDetail .file_upload {
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 13px 20px;
	color: var(--color-base-main);
	border: 1px solid var(--color-base-main);
	border-radius: var(--radius-button--default);
	background: #fff;
	font-weight: 500;
	text-align: center;
}
#pageActionQuestionnaireDetail textarea.location {
	display: none;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: var(--color-secondary-pale);
}
#pageActionQuestionnaireDetail .disp_images {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#pageActionQuestionnaireDetail .disp_images:has(li) {
	margin-bottom: 10px;
}
#pageActionQuestionnaireDetail .disp_images li {
	position: relative;
	width: calc((100%  - 10px) / 2);
	height: 120px;
}
#pageActionQuestionnaireDetail .disp_images li img {
	border: 1px solid #707070;
	border-radius: 10px;
}
#pageActionQuestionnaireDetail .disp_images li i.fa-circle-xmark {
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 30px;
	line-height: 1;
	background: #fff;
	border-radius: 50%;
}
#pageActionQuestionnaireDetail .disp_location:has(p) {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	padding: 10px;
	background: var(--color-secondary-pale);
	font-size: 16px;
}
#pageActionQuestionnaireDetail .disp_location img {
	width: 100%;
	height: 160px;
	margin-top: 10px;
	object-fit: cover;
	border: 1px solid #707070;
	border-radius: 10px;
}
/* ================================================
pageActionQuestionnaireDetail : セルフチェック詳細
================================================ */
#pageActionQuestionnaireDetail .yesno {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px
}
#pageActionQuestionnaireDetail .yesno li {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: calc((100% - 16px) / 2);
	padding: 10px 20px;
	background: #fff;
	border: 1px solid var(--color-input-outline);
	border-radius: 8px;
}
#pageActionQuestionnaireDetail .yesno li:has(input[type=radio]:checked) {
	padding: 9px 19px;
	color: var(--color-secondary);
	background: var(--color-secondary-pale);
	border: 2px solid var(--color-secondary);
	border-radius: 8px;
}
#pageActionQuestionnaireDetail .yesno  label {
	display: flex;
	align-items: center;
	margin: 0;
}
#pageActionQuestionnaireDetail .yesno  label input + span {
	width: 100%;
	font-size: var(--size-font-m);
	line-height: 1.2;
}
#pageActionQuestionnaireDetail .yesno input[type=radio] {
	display: none;
}
#pageActionQuestionnaireDetail .yesno li:nth-child(1) label::before {
	content: "\f118";
	font-family: var(--ft-awesome);
	margin-right: 10px;
}
#pageActionQuestionnaireDetail .yesno li:nth-child(2) label::before {
	content: "\f11a";
	font-family: var(--ft-awesome);
	margin-right: 10px;
}
/* ================================================
pageIncentiveIndex : インセンティブ種別一覧
================================================ */
#pageIncentiveIndex #totalPointCard,
#pageIncentiveList #totalPointCard,
#pageIncentiveDetail #totalPointCard {
	margin: 20px 0;
	font-size: var(--size-font-s);
}
#pageIncentiveIndex .card_box_shadow {
	padding: 0;
}
#pageIncentiveIndex .name {
	position: relative;
	padding: 14px 30px 14px 20px;
	font-size: var(--size-font-l);
	font-weight: 600;
	color: #fff;
	background: var(--color-accent);
	border-radius: 12px 12px 0 0;
}
#pageIncentiveIndex .name::after {
	content: "\f054";
	font-family: var(--ft-awesome);
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	/* 1px細くする */
	-webkit-text-stroke: 1px var(--color-accent);
}
#pageIncentiveIndex .group_summary {
	padding: 20px;
}
/* ================================================
pageIncentiveList : インセンティブ一覧
================================================ */
#pageIncentiveList #listBody {
	width: 100%;
	background: #fff;
	padding: 1px 0;
}
#pageIncentiveList #incentiveList > li {
	margin: 0;
}
#pageIncentiveList summary {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	padding: 10px 20px;
	color: #fff;
	background: var(--color-accent);
	border-bottom: 1px solid #fff;
}
#pageIncentiveList summary::after {
	font-family: FontAwesome;
	content: "\f107";
	transition: all 0.5s;
	margin-left: 20px;
	color: #fff;
}
#pageIncentiveList details[open] summary::after {
	transform: rotate(180deg);
}
#pageIncentiveList #courseList {
	width: var(--page-width);
	margin: 20px auto;
}
#pageIncentiveList #courseList li {
	margin-bottom: 20px;
}
#pageIncentiveList #courseList .image_text {
	display: flex;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-separator-line);
}
#pageIncentiveList #courseList .image_text .image {
	width: 90px;
	height: 90px;
}
#pageIncentiveList #courseList .image_text img {
	border-radius: 8px;
	border: 1px solid #e5e5e5;
}
#pageIncentiveList #courseList .image_text .image + .text {
	width: calc(100% - 80px);
}
#pageIncentiveList #courseList .image_text .title,
#pageIncentiveDetail .title {
	font-size: var(--size-font-xl);
	font-weight: 600;
}
#pageIncentiveList #courseList .image_text .title_note,
#pageIncentiveDetail .title_note {
	margin-top: 10px;
	color: var(--color-text-pale);
	font-size: var(--size-font-m);
}
#pageIncentiveList #courseList li .ended {
	opacity: 0.5;
}
#pageIncentiveList #courseList li:has(.ended) {
	position: relative;
	border-radius: 12px;
	background: #000;
	opacity: 0.7;
}
#pageIncentiveList #courseList li:has(.ended)::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: var(--size-font-l);
	color: #fff;
	white-space: pre;
	content: "先着人数に達したため\A終了しました";
	text-align: center;
}
#pageIncentiveList .content,
#pageIncentiveDetail .content {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
#pageIncentiveList .content dl,
#pageIncentiveDetail .content dl {
	display: flex;
	align-items: center;
}
#pageIncentiveList .content dl dt,
#pageIncentiveDetail .content dl dt {
	margin-right: 10px;
	color: var(--color-text-pale);
	font-size: var(--size-font-m);
}
#pageIncentiveList .content dl dd,
#pageIncentiveDetail .content dl dd {
	font-size: var(--size-font-n);
	font-weight: 600;
}
#pageIncentiveList .content .point_unit::after,
#pageIncentiveDetail .content .point_unit::after {
	margin-left: 0;
	font-weight: 600;
}
@media screen and (max-width: 340px) {
	#pageIncentiveList .content,
	#pageIncentiveDetail .content {
		display: block;
		margin-top: 10px;
	}
	#pageIncentiveList .content dl,
	#pageIncentiveDetail .content dl {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
#pageIncentiveList #listBody.course {
	padding: 0;
	background: transparent;
}
#pageIncentiveList #listBody .card_box_detail:has(.boosting) {
	padding-top: 40px;
}
/* ================================================
pageIncentiveDetail : インセンティブ詳細
================================================ */
#pageIncentiveDetail #detailBody {
	padding: 20px 0;
}
#pageIncentiveDetail .group_name {
	font-size: var(--size-font-s);
}
#pageIncentiveDetail .title_wrapper {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-separator-line);
}
#pageIncentiveDetail .apply {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin-top: 20px;
	white-space: nowrap;
}
#pageIncentiveDetail .apply dt {
	padding-top: 13px;
}
#pageIncentiveDetail .apply label {
	font-weight: 600;
}
#pageIncentiveDetail .button_wrapper {
	margin: 40px 0 0 0;
}
#modalApplyConfirm table th {
	background: #eee;
}
#modalApplyConfirm table {
	width: 100%;
}
#modalApplyConfirm table th,
#modalApplyConfirm table td {
	display: block;
	width: 100%;
	padding: 10px;
}
#pageIncentiveDetail .warning {
	margin-top: 20px;
	font-weight: 600;
}
/* ================================================
pageIncentiveShipping : インセンティブ送付先入力
================================================ */
#pageIncentiveShipping #saveShipping {
	margin-right: 10px;
}
#pageIncentiveShipping label:has(#saveShipping:checked),
#pageIncentiveShipping label:has(#saveShipping:checked) span {
	font-weight: 600;
}
#pageIncentiveShipping #detailBody .item_wrapper:first-child,
#pageIncentiveShipping #detailBody .item_wrapper:last-child {
	margin: 0;
}
#modalShippingApplyConfirm table th {
	background: #eee;
}
#modalShippingApplyConfirm table {
	width: 100%;
}
#modalShippingApplyConfirm table th,
#modalShippingApplyConfirm table td {
	display: block;
	width: 100%;
	padding: 10px;
}
#pageIncentiveShipping .err_msg:has(.input_error_msg) {
	margin: 0;
}
/* ================================================
pageIncentiveComplete : インセンティブ交換完了
================================================ */
#pageIncentiveComplete .card_box_shadow {
	margin-top: 40px;
}
#pageIncentiveComplete .apply_complete_message {
	font-weight: 600;
}
#pageIncentiveComplete .box {
	margin: 20px 0 30px 0;
	padding: 10px;
	font-size: var(--size-font-m);
	text-align: center;
	border: 1px solid var(--color-border);
	border-radius: 8px;
}
#pageIncentiveComplete .box .title {
	font-weight: 600;
}
/* ================================================
pageActionSpotList : スポット一覧
================================================ */
#pageActionSpotList .spot_map {
	position: relative;
	width: 100%;
	height: 300px;
}
#pageActionSpotList .button_wrapper:has(#narrowDown) {
	margin: 20px 0 0 0;
}
#pageActionSpotList .condition {
	display: none;
	font-size: var(--size-font-m);
	color: #6c6c6c;
}
#pageActionSpotList .result_text {
	font-weight: 600;
}
#pageActionSpotList #mapSetArea {
	margin-top: -20px;
	z-index: -1;
}
body:has(#mapSetArea.leaflet-fullscreen-on) #header.toolbar,
body:has(#mapSetAreaDetail.leaflet-fullscreen-on) #header.toolbar {
	display: none;
}
body:has(#mapSetArea.leaflet-fullscreen-on) #footerNavi,
body:has(#mapSetAreaDetail.leaflet-fullscreen-on) #footerNavi {
	display: none;
}
body:has(#mapSetArea.leaflet-fullscreen-on) #appView,
body:has(#mapSetAreaDetail.leaflet-fullscreen-on) #appView {
	margin: 0 !important;
}
#pageActionSpotList #mapSetArea.leaflet-fullscreen-on,
#pageActionSpotList #mapSetAreaDetail.leaflet-fullscreen-on {
	margin: 0;
	z-index: 99999;
}
.leaflet-top {
	top: 20px;
}
#modalNarrowDown .text_wrapper:has(.clear_all) {
	text-align: right;
	font-size: var(--size-font-s);
}
#modalNarrowDown #freeText {
	padding-left: 40px;
}
#modalNarrowDown .input_wrapper:has(#freeText)::after {
	position: absolute;
	top: 12px;
	left: 12px;
	content: "\f002";
	font-family: var(--ft-awesome);
	color: var(--color-input-outline);
}
#modalNarrowDown .search_word {
	display: flex;
	white-space: normal;
	overflow-x: hidden;
	flex-wrap: wrap;
}
#pageActionSpotList:not(.display_type_0) .image {
	display: none;
}
#pageActionSpotList:not(.display_type_0) .name {
	width: 100%;
}
/* ================================================
pageActionSpotDetail : スポット詳細
================================================ */
#pageActionSpotDetail .carousel {
	display: flex;
	gap: 10px;
	overflow-x: scroll;
	margin: 20px 0;
}
#pageActionSpotDetail .carousel_item .coupon_title {
	margin-bottom: 20px;
	font-size: var(--size-font-m);
}
#pageActionSpotDetail .carousel_item {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 90%;
	box-shadow: 2px 3px 8px 0 rgba(0, 0, 0, 0.2);
	margin: 0 10px 10px 0; /* 影を表示する為 */
}
#pageActionSpotDetail .carousel_item button {
	margin-top: auto;
	margin-bottom: 20px;
}
#pageActionSpotDetail .coupon button {
	margin-top: auto;
}
#pageActionSpotDetail .usage_limit {
	font-size: var(--size-font-s);
	color: #6f6f6f;
	text-align: center;
}
#pageActionSpotMap .spot_map {
	position: relative;
	width: 100%;
	height: 100%;
}
#modalUseCoupon .rayer.used .card_flat,
#modalUseCoupon .rayer.unable .card_flat {
	opacity: 0.5;
}
#modalUseCoupon .rayer.used,
#modalUseCoupon .rayer.unable {
	position: relative;
	border-radius: 8px;
	background: #000;
	opacity: 0.7;
}
#modalUseCoupon .rayer.used::after,
#modalUseCoupon .rayer.unable::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: var(--size-font-2l);
	white-space: nowrap;
	color: #fff;
}
#modalUseCoupon .rayer.used::after {
	content: "利用済みクーポンです";
}
#modalUseCoupon .rayer.unable::after {
	content: "利用不可";
}
#modalUseCoupon .card_flat {
	padding: 0;
	border: 2px solid var(--color-secondary);
	border-radius: 8px;
}
#modalUseCoupon .card_flat .head {
	padding: 10px;
	text-align: center;
	color: #fff;
	background: var(--color-secondary);
	border-radius: 4px 4px 0 0;
}
#modalUseCoupon .card_flat .body {
	padding: 20px 10px;
}
#modalUseCoupon .coupon_title {
	font-size: var(--size-font-2l);
	font-weight: 600;
}
#modalUseCoupon .coupon_text {
	margin-top: 10px;
}
#modalUseCoupon .usage_limit {
	margin-top: 10px;
	font-size: var(--size-font-m);
	color: #6f6f6f;
}
#modalUseCoupon .expiration_date {
	margin-top: 10px;
	font-weight: 600;
}
#modalUseCoupon .expiration_date span {
	font-size: var(--size-font-m);
	color: #6f6f6f;
}
#modalUseCoupon .image_text {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
#modalUseCoupon .image_text img {
	width: 48px;
	height: 48px;
	border-radius: 8px;
}
#modalUseCoupon .notes {
	margin-top: 10px;
}
#modalUseCoupon .modal_footer p {
	padding: 10px;
	background: #fff1c1;
	font-weight: 600;
}
#modalUseCoupon .modal_footer button {
	margin: 0;
	padding: 20px;
	border-radius: 0;
}
#modalUseCoupon .modal_footer p.used {
	margin: 0;
	padding: 20px;
	color: #fff;
	background: var(--color-negative);
	font-weight: normal;
}
#modalUseCoupon .text_unable {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #d35b5b;
	background: #ffe2e2;
	text-align: center;
	font-size: var(--size-font-s);
}
#modalUseCoupon .overflow_box {
	max-height: 40vh;
}
/* ================================================
pageMypageDeleteIndex : 退会手続き案内
================================================ */
#pageMypageDeleteIndex #detailBody {
	padding: 20px 0;
}
#pageMypageDeleteIndex #tenantContact {
	margin-top: 20px;
}
#pageMypageDeleteIndex hr {
	margin: 20px 0;
}
#pageMypageDeleteIndex #tenantContact .tel {
	margin-top: 10px;
}
#pageMypageDeleteIndex #tenantContact .contact_note {
	margin: 0;
}
/* ================================================
pageMypageDeleteDetail : 退会手続き
================================================ */
#pageMypageDeleteDetail .card_flat {
	padding: 0 20px 20px 20px;
}
#pageMypageDeleteDetail .card_flat button {
	margin-top: 40px;
}
/* ================================================
pageMypageDeleteComplete : 退会完了
================================================ */
#pageMypageDeleteComplete .card_flat {
	text-align: center;
}
/* ================================================
modalQRCodeDisplay : QRコード
================================================ */
#modalQRCodeDisplay .modal_body {
	text-align: center;
}
#modalQRCodeDisplay img {
	width: 80%;
	height: 80%;
}
/* ================================================
pageMyPageIndex : マイページ
================================================ */
#pageMyPageIndex #detailBody {
	margin-top: -30px;
	padding: 20px 0;
}
#pageMyPageIndex .card_box {
	box-shadow: 0px 1px 8px 0 rgba(0, 0, 0, 0.2);
}
#pageMyPageIndex #detailHeader {
	background: #04419B;
}
#pageMyPageIndex .button_wrapper {
	margin: 30px 0;
}
#pageMyPageIndex #nickName {
	padding-top: 80px;
	color: #fff;
	font-size: 30px;
}
#pageMyPageIndex #areaName {
	padding-bottom: 60px;
	color: #fff;
}
#pageMyPageIndex .profile_wrapper {
	border-radius: 40px 40px 0 0;
	background: #fff;
}
#pageMyPageIndex .profile_image img {
	position: absolute;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
#pageMyPageIndex .title,
#pageMyPageIndex .title span {
	color: var(--color-text-default);
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pageMyPageIndex #locopiPoint {
	padding: 0 20px;
}
#pageMyPageIndex #locopiPoint .card_box_detail {
	padding: 10px;
	text-align: center;
}
#pageMyPageIndex #totalPoint {
	color: var(--color-base-main);
	font-size: 35px;
	font-weight: 500;
	line-height: 1;
}
#pageMyPageIndex #monthRanking,
#pageMyPageIndex #areaRanking {
	margin: 20px 0;
}
#pageMyPageIndex #monthTitle {
	margin-top: 20px;
}
#pageMyPageIndex #monthRanking ul {
	margin: 20px 0;
}
#pageMyPageIndex #monthRanking ul li:first-child {
	border-bottom: 2px solid #F0F0F0;
}
#pageMyPageIndex #monthRanking ul li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
#pageMyPageIndex #monthRanking table {
	width: 100%;
	margin: 10px 0;
}
#pageMyPageIndex #monthRanking table tr:first-child {
	border-bottom: 2px solid #F0F0F0;
}
#pageMyPageIndex #monthRanking table td {
	line-height: 30px;
	padding: 10px 0;
	vertical-align: bottom;
}
#pageMyPageIndex #monthRanking table td:first-child {
	width: 90px;
	font-size: var(--size-font-m);
}
#pageMyPageIndex #monthRanking table td:last-child {
	text-align: right;
}
#pageMyPageIndex #monthRanking .rank {
	width: 90px;
	text-align: right;
	white-space: nowrap
}
#pageMyPageIndex #monthRanking .number {
	font-size: var(--size-font-s);
	white-space: nowrap
}
#pageMyPageIndex #monthRanking img {
	width: 24px;
	height: 24px;
	margin-bottom: 6px;
}
#pageMyPageIndex #areaRanking table {
	width: 100%;
	margin: 10px 0;
}
#pageMyPageIndex #areaRanking table td {
	line-height: 30px;
	padding: 10px 0;
	vertical-align: bottom;
}
#pageMyPageIndex #areaRanking table td:first-child {
	width: 100px;
	font-size: var(--size-font-m);
}
#pageMyPageIndex #areaRanking table i {
	color: #6cb4fc;
	font-size: 30px;
	margin-right: 10px;
}
#pageMyPageIndex #areaRanking .rank {
	width: 90px;
	text-align: right;
	white-space: nowrap
}
#pageMyPageIndex #areaRanking .area_number {
	font-size: var(--size-font-s);
	white-space: nowrap
}
#pageMyPageIndex #monthTitle ul {
	display: flex;
	gap: 40px;
}
#pageMyPageIndex #monthTitle ul li {
	width: calc(100% / 3);
	text-align: center;
	margin: 20px 0;
}
#pageMyPageIndex #monthTitle ul li i {
	display: block;
	color: var(--color-secondary);
	font-size: 50px;
}
#pageMyPageIndex #monthTitle ul li .title_name {
	margin-top: 4px;
	font-size: 10px;
}
#pageMyPageIndex #monthTitle .button_wrapper {
	margin-bottom: 20px;
}
#pageMyPageIndex #othersMenu {
	margin: 0;
}
#pageMyPageIndex #othersMenu li {
	margin: 0;
}
#pageMyPageIndex #othersMenu dl {
	align-items: center;
}
#pageMyPageIndex #othersMenu dt {
	width: 30px;
	margin-right: 10px;
	text-align: center;
}
#pageMyPageIndex #othersMenu dt i {
	color: var(--color-secondary);
}
#pageMyPageIndex #othersMenu dt img {
	display: block;
	margin: auto;
}
#pageMyPageIndex #othersMenu dd {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 40px);
	padding: 17px 0 15px 0;
	border-bottom: 1px solid var(--color-separator-line);
}
#pageMyPageIndex #othersMenu dd::after {
	content: "\f054";
	font-family: var(--ft-awesome);
	font-size: var(--size-font-s);
}
#modalChangePassword {
	height: 95vh;
}
#modalChangePassword #complete {
	display: none;
	text-align: center;
}
/* ================================================
pageHomeIndex : ホーム
================================================ */
#pageHomeIndex .page_background {
	position: relative;
	min-height: 100vh;
}
#pageHomeIndex .footer_background {
	position: absolute;
	left: 0;
	bottom: 70px;
	width: 100%;
	height: 90px;
	background: var(--color-base-main);
	border-radius: 38px 38px 0 0;
	z-index: -1;
	display: none;
}
#pageHomeIndex .page_wrapper {
	padding-top: 50px;
	padding-bottom: 90px;
	font-size: var(--size-font-s);
}
#pageHomeIndex .item_title {
	font-weight: 600;
	font-size: var(--size-font-m);
}
#pageHomeIndex #noticeList,
#pageHomeIndex #newsList {
	margin-top: 10px;
}
#pageHomeIndex #noticeList li,
#pageHomeIndex #newsList li {
	padding: 10px 0;
	border-top: 1px solid var(--color-separator-line);
}
#pageHomeIndex #noticeList li:last-child,
#pageHomeIndex #newsList li:last-child {
	border-bottom: 1px solid var(--color-separator-line);
}
#pageHomeIndex #noticeList dt,
#pageHomeIndex #newsList dt {
	margin-right: 20px;
}
#pageHomeIndex #topNavi {
	margin-top: 30px;
}
#pageHomeIndex #topNaviList {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#pageHomeIndex #topNaviList li {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	padding: 10px;
	width: calc((100% - 10px) / 2);
}
#pageHomeIndex #topNaviList li.card_box_detail::after {
	right: 10px;
}
#pageHomeIndex #topNaviList dl {
	display: block;
	text-align: center;
}
#pageHomeIndex #topNaviList dt {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: end;
	width:40px;
	height:40px;
	margin:0 auto;
}
#pageHomeIndex #topNaviList dd {
	margin-top: 10px;
	font-size: var(--size-font-m);
}
#pageHomeIndex #topNaviList dd span {
	font-size: var(--size-font-m);
	font-weight: 600;
}
#pageHomeIndex #topNaviList .desc {
	margin-top: 10px;
	font-size: var(--size-font-xs);
}
#pageHomeIndex .fa-circle {
	margin-left: 10px;
	color: var(--color-alert);
	font-size: var(--size-font-s);
}
#pageHomeIndex #topNaviList .still {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	background: #f2f2f2;
}
#pageHomeIndex #topNaviList .still p {
	font-size: var(--size-font-m);
	font-weight: 600;
	color: var(--color-text-pale);
}
/* ================================================
ons-toolbar
================================================ */
#header.toolbar {
	height: 70px;
	background: #f9f9f9 url("../custom/images/header_logo.svg") no-repeat center center;
	background-size: auto 34px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
#header.toolbar #title {
	display: none;
}
#header.toolbar a.back {
	display: block;
	margin-left: 20px;
	line-height: 70px;
}
#header.toolbar a.back i {
	color: var(--color-base-main);
}
.env_copy {
	position: absolute;
	top: 20px;
	right: 10px;
	width: 30px;
	height: 30px;
	z-index: 9999999;
	text-align: center;
}
.env_copy i {
	color: #e0e0e0;
	font-size: 14px;
}
/* ================================================
modalEarnPoint : ポイント獲得
modalQuestionnairePoint : アンケートポイント獲得
================================================ */
#modalEarnPoint,
#modalEarnPointZero,
#modalQuestionnairePoint,
#modalQuestionnairePointZero {
	border-radius: 20px;
}
#modalEarnPoint .modal_header,
#modalEarnPointZero .modal_header,
#modalQuestionnairePoint .modal_header,
#modalQuestionnairePointZero .modal_header {
	padding: 20px;
	background: var(--color-accent);
}
#modalEarnPoint .modal_footer,
#modalEarnPointZero .modal_footer,
#modalQuestionnairePoint .modal_footer,
#modalQuestionnairePointZero .modal_footer {
	padding: 0 20px 20px 20px;
}
#modalEarnPoint .title,
#modalEarnPointZero .title,
#modalQuestionnairePoint .title,
#modalQuestionnairePointZero .title {
	color: #fff;
	font-size: var(--size-font-2l);
}
#modalEarnPoint .earn_point,
#modalEarnPointZero .earn_point,
#modalQuestionnairePoint .earn_point,
#modalQuestionnairePointZero .earn_point {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	margin: 20px auto;
	color: var(--color-accent);
	background: #fff;
	font-size: 46px;
	font-weight: bold;
	border-radius: 50%;
	letter-spacing: -2px;
	line-height: .9;
}
#modalEarnPoint .unit,
#modalQuestionnairePoint .unit {
	color: var(--color-accent);
	font-size: var(--size-font-2l);
	font-weight: bold;
	letter-spacing: 0;
}
#modalQuestionnairePoint .modal_body {
	padding: 0 20px;
}
#modalQuestionnairePoint .message {
	padding: 10px;
	background: var(--color-secondary-pale);
	font-size: var(--size-font-m);
}
#modalEarnPointZero img,
#modalQuestionnairePointZero img {
	width: 80px;
}
#modalQuestionnaireMap .map {
	width: 100%;
	height: 400px;
}
/* ================================================
pageMypageUserIndex : 利用者情報
================================================ */
#pageMypageUserIndex .page_title {
	text-align: left;
}
#pageMypageUserIndex #detailBody {
	padding-bottom: 0;
}
#pageMypageUserIndex .profile_image,
#modalEditUser .profile_image {
	width: 74px;
	height: 74px;
}
#modalEditUser .profile_image i {
	background: var(--color-base-main);
}
#pageMypageUserIndex .sub_title {
	background: var(--color-background);
}
#pageMypageUserIndex .sub_title .sub_title_wrapper {
	width: var(--page-width);
	margin: 0 auto;
	padding: 40px 0 10px 0;
}
#pageMypageUserIndex #userDetail {
	margin-top: 20px;
}
#pageMypageUserIndex #userDetail li,
#pageMypageUserIndex #shippingDetail li {
	border-bottom: 1px solid var(--color-separator-line);
}
#pageMypageUserIndex #userDetail li:last-child,
#pageMypageUserIndex #shippingDetail li:last-child {
	border-bottom: none;
}
#pageMypageUserIndex #userDetail li dl,
#pageMypageUserIndex #shippingDetail li dl {
	display: block;
	padding: 16px 20px;
}
#pageMypageUserIndex #userDetail li dl dt,
#pageMypageUserIndex #shippingDetail li dl dt {
	font-weight: 500;
}
#modalEditUser .label + input + label {
	margin-right: 40px;
}
#modalEditUser #shippingType {
	margin-right: 10px;
}
#modalEditUser label:has(#shippingType:checked),
#modalEditUser label:has(#shippingType:checked) span {
	font-weight: 600;
}
#modalEditUser .modal_footer button {
	margin-top: 30px;
}
.valid_box {
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 74px;
	height: 32px;
	line-height: 32px;
	border-radius: 5px;
	font-size: var(--size-font-m);
}
.valid {
	color: var(--color-secondary);
	border: 1px solid var(--color-secondary);
}
.valid::before {
	content: "\f0f3";
	font-family: var(--ft-awesome);
	color: var(--color-secondary);
}
.invalid {
	color: var(--color-negative);
	border: 1px solid var(--color-negative);
}
.invalid::before {
	content: "\f1f6";
	font-family: var(--ft-awesome);
	color: var(--color-negative);
}
/* ================================================
pageMypageDisasterIndex : 災害対応用利用者情報
================================================ */
#pageMypageDisasterIndex .page_title {
	text-align: left;
}
#pageMypageDisasterIndex #detailBody {
	padding: 0;
}
#pageMypageDisasterIndex .sub_title {
	background: var(--color-background);
}
#pageMypageDisasterIndex .sub_title .sub_title_wrapper {
	width: var(--page-width);
	margin: 0 auto;
	padding: 40px 0 10px 0;
}
#pageMypageDisasterIndex #userDetail li {
	border-bottom: 1px solid var(--color-separator-line);
}
#pageMypageDisasterIndex #userDetail li:last-child {
	border-bottom: none;
}
#pageMypageDisasterIndex #userDetail li dl {
	display: flex;
	justify-content: space-between;
	padding: 16px 20px;
}
#pageMypageDisasterIndex #userDetail li dl dt {
	font-weight: 500;
}
#pageMypageDisasterIndex #optionDetail {
	padding: 16px 20px;
}
#modalEditDisasterOption .item_wrapper {
	margin: 40px 0;
}
#modalEditDisasterOption .item_wrapper:nth-child(1) {
	margin-top: 20px;
}
#modalEditDisasterOption .sub_title .name {
	font-weight: 500;
}
#modalEditDisasterOption ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}
/* ================================================
pageMypageUserMail : 見守りメール設定
================================================ */
#pageMypageUserMail #detailBody {
	padding: 1px 0;
}
#pageMypageUserMail #mailList li,
#modalAdditionalMail #mailInput li {
	border-bottom: 1px solid var(--color-negative);
}
#pageMypageUserMail #mailList li:last-child,
#modalAdditionalMail #mailInput li:last-child {
	border-bottom: none
}
#pageMypageUserMail #mailList li dl {
	display: flex;
	align-items: center;
	gap: 10px; /* 折り返し */
	flex-wrap: wrap;
	justify-content: space-between;
}
#pageMypageUserMail #mailList li dt {
	font-weight: 600;
}
#pageMypageUserMail #mailList li dl.mail {
	display: block;
}
#pageMypageUserMail #mailList li dl.mail dd {
	margin-top: 10px;
}
#pageMypageUserMail #detailFooter .button_wrapper {
	margin: 20px auto 40px auto;
}
#modalAdditionalMail label + input[type="radio"] {
	margin-left: 20px;
}
#modalAdditionalMail .label {
	margin-bottom: 10px;
	font-weight: 600;
}
#modalAdditionalMail .label + input + label {
	margin-right: 40px;
}
/* ================================================
pageActionStepList : 歩数
================================================ */
#pageActionStepList #stepSummary {
	text-align: center;
	margin: 0 auto 20px auto;
	border-radius: 30px;
}
#pageActionStepList #stepSummary.card_box_shadow {
	border-radius: 10px;
}
#pageActionStepList .deep_linking {
	margin: 20px 0;
}
#pageActionStepList #stepPointSummary {
	font-size: var(--size-font-s);
	margin-bottom: 20px;
}
#pageActionStepList #lackStep {
	font-size: var(--size-font-2l);
}
#pageActionStepList .reload {
	display: inline-block;
}
#pageActionStepList #stepInformation {
	position: absolute;
	bottom: 120px;
	left: 0;
	right: 0;
}
#pageActionStepList #stepInformation hr {
	margin: 0 auto;
	width: 120px;
	border-top: 1px solid var(--color-separator-line);
}
#pageActionStepList #currentStep {
	font-size: 21px;
	display: inline-block;
	padding: 5px;
	color: #05419a;
}
#pageActionStepList #currentStepNum {
	font-size: 36px;
	line-height: 1;
}
#pageActionStepList #targetStep {
	font-size: 17px;
	margin-top: 5px;
	color: #818181;
	line-height: 1.1;
}
#pageActionStepList #targetStepHead {
	font-size: 13px;
}
#pageActionStepList #targetStepNum {
	font-size: 21px;
}
#pageActionStepList .reload i,
#pageActionStepList .deep_linking i {
	margin-left: 10px;
}
/* ================================================
pageActionMeetIndex : 出会いアクション一覧
================================================ */
#pageActionMeetIndex #meetAction.card_box {
	padding: 0;
	margin-bottom: 20px;
}
#pageActionMeetIndex #meetAction .head {
	padding: 10px 30px 10px 20px;
	text-align: center;
	color: #fff;
	background: var(--color-secondary);
	border-radius: 12px 12px 0 0;
}
#pageActionMeetIndex #meetAction .body {
	padding: 20px;
	text-align: center;
}
#pageActionMeetIndex p:has(#actionPeople) {
	margin-bottom: 20px
}
#pageActionMeetIndex #actionPeople {
	font-size: 50px;
	margin-right: 10px;
	line-height: 1;
}
#pageActionMeetIndex button + button {
}
#pageActionMeetIndex .qr_button {
	display: flex;
	position: relative;
	margin-bottom: 20px;
}
#pageActionMeetIndex .qr_button button:first-child {
	border-radius: 28px 0 0 28px;
}
#pageActionMeetIndex .qr_button button:last-child {
	border-radius: 0 28px 28px 0;
}
#pageActionMeetIndex .qr_button::after {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 2px;
	height: 40px;
	background: #fff;
	content: "";
}
#pageActionMeetIndex .qr_button button {
	margin: 0;
	width: 50%;
}
/* ================================================
pageActionMeetHistory : 出会い履歴
pageActionInviteHistory : 招待履歴
================================================ */
#pageActionMeetHistory #listBody,
#pageActionInviteHistory #listBody {
	margin-top: 0;
}
#pageActionMeetHistory .datetime,
#pageActionInviteHistory .datetime {
	color: var(--color-text-pale);
	font-size: var(--size-font-xs);
}
#pageActionMeetHistory .nickname,
#pageActionInviteHistory .nickname {
	font-size: var(--size-font-n);
}
#pageActionMeetHistory #meetHistoryList li,
#pageActionInviteHistory #inviteHistoryList li {
	margin-bottom: 10px;
}
#pageActionMeetHistory #meetHistoryList .card_flat,
#pageActionInviteHistory #inviteHistoryList .card_flat {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 20px;
}
#pageActionMeetHistory #meetHistoryList .image,
#pageActionInviteHistory #inviteHistoryList .image {
	width: 48px;
	height: 48px;
}
#pageActionMeetHistory #meetHistoryList img,
#pageActionInviteHistory #inviteHistoryList img {
	border-radius: 50%;
}
/* ================================================
pageActionInviteIndex : 招待
================================================ */
#pageActionInviteIndex .action {
	text-align: center;
}
#pageActionInviteIndex .text {
	font-size: var(--size-font-2l);
	font-weight: 600;
}
#pageActionInviteIndex .pop {
	width: 240px;
	margin: 10px auto 10px auto;
}
#pageActionInviteIndex .point_unit {
	margin: 20px 0 10px 0;
	color: var(--color-accent);
	font-size: 50px;
	line-height: 1;
	font-weight: 500;
}
#pageActionInviteIndex .point_unit::after {
	font-size: var(--size-font-l);
}
#pageActionInviteIndex .button_wrapper {
	margin: 20px 0;
}
/* ================================================
vconsole
================================================ */
#__vconsole {
	display: none;
}
#__vconsole .vc-switch {
	z-index: 999999;
}
#__vconsole .vc-panel {
	z-index: 999998;
}
#__vconsole .vc-mask {
	z-index: 999997;
}
/* ================================================
pagePassList : 残高一覧
================================================ */
#pagePassList .button_wrapper {
	margin: 20px 0;
}
#pagePassList .caption {
	margin-top: 30px;
	margin-bottom: 16px;
}
#pagePassList #balanceCoin .card_box_shadow {
	margin-bottom: 20px;
	padding: 0;
	font-size: var(--size-font-s);
	box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
}
#pagePassList #balanceCoin .box_inner {
	padding: 20px;
	text-align: center;
}
#pagePassList .coin_balance {
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pagePassList .coin_balance::after {
	content: "円";
	margin-left: 4px;
	font-size: var(--size-font-s);
	font-weight: normal;
}
#pagePassList button[name="qr_scan"] {
	display: flex;
	justify-content: center;
	align-items: center;
}
#pagePassList button[name="qr_scan"] img {
	width: 24px;
	height: 24px;
	margin-right: 8px;
}
#pagePassList #balanceList .card_box_shadow {
	padding: 0;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}
#pagePassList #balanceList .box_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff url("../images/ticket_line.svg") repeat-y 240px top;
	padding: 16px;
	border-radius: 12px;
}
#pagePassList #balanceList .item {
	display: flex;
	width: calc(240px - 32px);
	align-items: center;
	gap: 10px;
	font-size: var(--size-font-m);
}
#pagePassList #balanceList .item img {
	width: 24px;
	height: 24px;
}
#pagePassList #balanceList .item .pass_group_name {
	font-size: var(--size-font-xs);
	color: var(--color-text-pale);
}
#pagePassList #balanceList .item .name {
	font-weight: 600;
}
#pagePassList #balanceList .num .balance {
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pagePassList #balanceList .num .unit {
	margin-left: 4px;
	font-size: var(--size-font-s);
}
#pagePassList details {
	background: #f0f0f0;
	padding: 10px 0;
	border-radius: 0 0 12px 12px;
	font-size: var(--size-font-s);
}
#pagePassList details summary {
	display: flex;
	justify-content: center;
	align-items: center;
}
#pagePassList details summary::before {
	content: "有効期限を確認する";
}
#pagePassList details[open] summary::before {
	content: "有効期限を閉じる";
}
#pagePassList details summary::after {
	content: "▼";
	transition: all 0.5s;
	margin-left: 4px;
}
#pagePassList details[open] summary::after {
	transform: rotate(180deg);
}
#pagePassList details .expiration {
	margin-top: 10px;
}
#pagePassList details .expiration dl {
	display: flex;
	align-items: center;
	margin: 0 auto;
	width: 80%;
}
#pagePassList details .expiration dl dt {
	width: 70%;
}
#pagePassList details .expiration dl dd {
	width: 30%;
	text-align: right;
}
#modalPayQRCodeDisplay .modal_wrapper {
	text-align: center;
}
#modalPayQRCodeDisplay .qr,
#modalPayQRCodeDisplay .timeout {
	width: 100%;
	height: 340px;
}
#modalPayQRCodeDisplay .qr .page_title {
	margin-bottom: 20px;
}
#modalPayQRCodeDisplay .qr .image {
	width: 200px;
	height: auto;
}
#modalPayQRCodeDisplay .qr .timer {
	margin-top: 20px;
	font-weight: 600;
}
#modalPayQRCodeDisplay .timeout .text {
	padding-top: 100px;
}
#modalPayQRCodeDisplay .timeout button {
	margin-top: 40px;
}
#modalPayQRCodeError .messages {
	margin: 40px 0;
	padding: 10px;
	border: solid 1px #d35b5b;
	background: #ffe2e2;
	text-align: left;
	font-size: var(--size-font-s);;
}
/* ================================================
pagePassHistory : パス利用履歴
================================================ */
#pagePassHistory #groupList > li {
	margin-bottom: 20px;
}
#pagePassHistory #groupList label span {
	margin-top: 0;
}
#pagePassHistory #tabHeader {
	position: fixed;
	top: var(--size-header-toolbar);
	left: 0;
	width: 100%;
	z-index: 1;
	background: var(--color-background);
}
#pagePassHistory #tabBar {
	position: fixed;
	/* jsで書き換える */
	top: 182px;
}
#pagePassHistory #tabBody {
	/* jsで書き換える */
	margin: 166px 0 20px 0;
}
#pagePassHistory .tab_content li {
	margin-bottom: 2px;
}
#pagePassHistory .tab_content li.not_found {
	margin:0 !important;
	padding: 40px 0 !important;
}
#pagePassHistory li.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
#pagePassHistory li.item .usage_datetime,
#pagePassHistory li.item .pass_group_name {
	color: var(--color-text-pale);
	font-size: var(--size-font-s);
}
#pagePassHistory li.item .pass_group_name {
	margin-left: 10px;
}
#pagePassHistory li.item .usage_shop_name {
	margin-top: 2px;
	font-weight: 600;
}
#pagePassHistory li.item .usage_pass {
	font-size: var(--size-font-3l);
	font-weight: 600;
}
#pagePassHistory li.item .item_unit {
	color: var(--color-base-main);
	white-space: nowrap;
}
#pagePassHistory li.item .unit {
	font-size: var(--size-font-m);
	font-weight: 600;
}
/* ================================================
pagePassRegister : 支払い金額入力
================================================ */
#pagePassRegister #detailBody {
	font-size: var(--size-font-m);
}
#pagePassRegister .caption {
	margin-bottom: 10px;
}
#pagePassRegister .input_wrapper {
	position: relative;
	margin-top: 10px;
	margin-bottom: 40px;
}
#pagePassRegister .input_wrapper::after {
	position: absolute;
	bottom: 2px;
	right: 0;
	content: "円";
}
#pagePassRegister input {
	display: block;
	width: 100%;
	padding: 0 20px 0 0;
	text-align: right;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	background: #fff;
	border: 0;
	border-bottom: 2px solid #8d8d8d;
	border-radius: 0;
}
#pagePassRegister input::placeholder {
	color: #8d8d8d;
}
#pagePassRegister .balance_text,
#pagePassRegister .balance_text span {
	font-size: var(--size-font-xs);
}
#pagePassRegister .disp_balance {
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pagePassRegister .disp_balance::after {
	margin-left: 4px;
	font-size: var(--size-font-xs);
	content: "円";
}
#modalBalanceError .modal_body {
	text-align: center;
}
#modalBalanceError .error {
	margin: 40px 0;
	padding: 10px;
	border: solid 1px #d35b5b;
	background: #ffe2e2;
	text-align: center;
	font-size: var(--size-font-s);;
}
/* ================================================
pagePassPay : 支払い金額確認
================================================ */
#pagePassConfirm .caption,
#pagePassPay .caption {
	margin-bottom: 20px;
}
#pagePassConfirm .shop_name,
#pagePassPay .shop_name {
	font-size: 24px;
}
#pagePassConfirm .disp_amount,
#pagePassPay .disp_amount {
	text-align: center;
	font-size: 60px;
	font-weight: 600;
}
#pagePassConfirm .disp_amount::after,
#pagePassPay .disp_amount::after {
	margin-left: 8px;
	font-size: 28px;
	content: "円";
}
#pagePassConfirm .user_message {
	margin-top: 10px;
	text-align: center;
	color: #4d4d4d;
	font-weight: 500;
}
#pagePassPay .card_amount.pay {
	animation: rotate_anime 0.1s forwards;
}
@keyframes rotate_anime {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
/* ================================================
pagePassComplete : 支払い金額完了
================================================ */
#pagePassComplete .backcolor {
	width: 100%;
	height: 140px;
	background: transparent;
}
#pagePassComplete.success .backcolor {
	background: var(--color-secondary);
}
#pagePassComplete.error .backcolor {
	background: var(--color-negative);
}
#pagePassComplete .card {
	margin-top: -100px;
	padding: 30px 24px;
	text-align: center;
	background: #fff;
	border-radius: 8px;
}
#pagePassComplete .icon {
	display: inline-block;
	padding: 4px 30px;
	border-radius: 25px;
	color: #fff;
	font-size: var(--size-font-m);
}
#pagePassComplete.success .icon {
	width: 100%;
	padding: 10px;
	color: #4d4d4d;
	background: #e1f5f0;
	font-size: 22px;
	font-weight: 500;
	border-radius: 4px;
}
#pagePassComplete.success .icon i {
	color: #6dcdc3;
}
#pagePassComplete.success .icon .dt {
	color: #5f5c5c;
}
#pagePassComplete.error .icon {
	background: var(--color-negative);
}
#pagePassComplete .shop_name {
	margin: 16px 0;
}
#pagePassComplete .amount {
	margin: 16px 0 24px 0;
	font-size: 52px;
	font-weight: 600;
	line-height: 1;
}
#pagePassComplete.error .amount {
	margin: 32px 0;
}
#pagePassComplete .amount::after {
	margin-left: 4px;
	font-size: 28px;
	content: "円";
}
#pagePassComplete .balance_text {
	font-size: var(--size-font-s);
}
#pagePassComplete .balance {
	font-size: var(--size-font-l);
	font-weight: 600;
}
#pagePassComplete .balance::after{
	margin-left: 4px;
	font-size: var(--size-font-xs);
	font-weight: normal;
	content: "円";
}
/* ================================================
pageOthersFaq : よくある質問
================================================ */
#pageOthersFaq #listBody {
	margin: 0 auto;
}
#pageOthersFaq #faqList > li {
	margin-bottom: 20px;
	padding: 4px 20px;
}
#pageOthersFaq #faqList .category_item > summary {
	padding: 10px 0;
	color: var(--color-base-main);
}
#pageOthersFaq #faqList .category_item summary {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	font-weight: 600;
}
#pageOthersFaq #faqList .category_item summary::after {
	font-family: FontAwesome;
	content: "\f107";
	transition: all 0.5s;
	margin-left: 20px;
	color: var(--color-base-main);
}
#pageOthersFaq #faqList .category_item ul.faq_list {
	border-top: 1px solid var(--color-border);
}
#pageOthersFaq #faqList .category_item[open] summary.category::after {
	transform: rotate(180deg);
}
#pageOthersFaq #faqList .faq_list li:last-child {
	margin-bottom: 0;
	padding-bottom: 10px;
}
#pageOthersFaq #faqList .faq_item summary {
	padding: 10px 0 10px 30px;
	font-size: var(--size-font-m);
}
#pageOthersFaq #faqList .faq_item summary.question::after {
	font-size: var(--size-font-s);
}
#pageOthersFaq #faqList .faq_item[open] summary.question::after {
	transform: rotate(180deg);
}
#pageOthersFaq #faqList .faq_item summary::before {
	position: absolute;
	top: 7px;
	left: 0;
	font-weight: 600;
	color: var(--color-base-main);
	font-size: var(--size-font-l);
	content: "Q";
}
#pageOthersFaq #faqList .faq_item .answer {
	position: relative;
	margin-left: 10px;
	padding: 10px 10px 10px 35px;
	background: var(--color-secondary-pale);
	border-radius: 10px;
	font-size: var(--size-font-m);
}
#pageOthersFaq #faqList .faq_item .answer::before {
	position: absolute;
	top: 7px;
	left: 10px;
	font-weight: 600;
	color: var(--color-secondary);
	font-size: var(--size-font-l);
	content: "A";
}
#pageOthersFaq #tenantContact {
	margin: 40px 0 20px 0;
	padding: 20px 0;
	background: #fff;
}
#tenantContact .contact_name {
	text-align: center;
	margin-bottom: 20px;
	font-size: var(--size-font-l);
	font-weight: 600;
}
#tenantContact dt {
	width: 90px;
	font-weight: 600;
}
#tenantContact dd {
	width: calc(100% - 90px);
}
#tenantContact .contact_note {
	margin-top:20px;
	font-size: var(--size-font-s);
}
/* ================================================
pageOthersProduct : プロダクト情報
================================================ */
#pageOthersProduct #detailBody {
	margin-top: 20px;
	text-align: center;
}
#pageOthersProduct img {
	width: 50%;
}
#pageOthersProduct .text_wrapper {
	margin: 20px 0 0 0;
	font-weight: 500;
}
/* ================================================
pageActionStepInstall : 歩数計アプリインストール
================================================ */
#pageActionStepInstall #detailBody {
	padding: 20px 0;
	margin-bottom: 60px;
}
#pageActionStepInstall #linkagePoint {
	margin-bottom: 20px;
}
#pageActionStepInstall #linkagePoint .point {
	font-weight: 600;
}
#pageActionStepInstall #linkageApp {
	font-weight: 600;
	justify-content: center;
}
#pageActionStepInstall .description {
	font-size: var(--size-font-m);
}
#pageActionStepInstall .install {
	margin-top: 20px;
	padding: 20px;
	text-align: center;
	background: var(--color-secondary-pale);
	border-radius: 10px;
}
#pageActionStepInstall .install .name,
#pageActionStepInstall .install .name span {
	font-weight: 600;
	font-size: var(--size-font-2l);
}
#pageActionStepInstall .install .icon {
	width: 120px;
	height: 120px;
	margin: 10px auto 20px auto;
	padding: 20px;
	background: #fff;
	border: 1px solid #d9dfde;
	border-radius: 20px;
}
#pageActionStepInstall .install ul.download {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#pageActionStepInstall .install ul li img {
	width: 150px;
}
#pageActionStepInstall .install ul li.app img {
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}
#pageActionStepInstall .install ul li.play img {
/* Google上下の空白をカット
	object-view-box: inset(30px 0 30px 0);
*/
}
#modalHowToInstall .user_message {
	text-align: center;
	font-size: var(--size-font-m);
}
#modalHowToInstall .step {
	padding: 10px;
	background: var(--color-secondary-pale);
	border-radius: 10px;
}
#modalHowToInstall .step li {
	margin: 20px 0;
}
#modalHowToInstall .step li:first-child {
	margin: 0 0 20px 0;
}
#modalHowToInstall .step li:last-child {
	margin: 20px 0 0 0;
}
#modalHowToInstall .step li img + img {
	margin-top: 20px;
}
#modalHowToInstall .step dl {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	font-size: var(--size-font-m);
}
#modalHowToInstall .step dt {
	color: var(--color-base-main);
}
#modalHowToInstall details .user_message.text_wrapper {
	margin: 0 0 20px 0;
}
#modalHowToInstall details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: var(--size-font-m);
	font-weight: 600;
	color: var(--color-base-main);
}
#modalHowToInstall details summary::after {
	font-family: FontAwesome;
	content: "\f107";
	transition: all .5s;
	font-size: var(--size-font-l);
}
#modalHowToInstall details[open] summary::after {
	transform: rotate(180deg);
}
#modalHowToInstall details summary .title {
	font-size: var(--size-font-m);
	font-weight: 600;
}
#modalHowToInstall details summary .title span {
	margin-right: 10px;
	padding: 0 10px;
	font-size: var(--size-font-s);
	color: #fff;
	background: var(--color-base-main);
	border-radius: 6px;
}
#modalHowToInstall details[open]:nth-child(1) {
	margin-bottom: 40px;
}
/* ================================================
modalLogout : ログアウト
================================================ */
#modalLogout .modal_body {
	text-align: center;
}
#modalLogout .confirm {
	font-size: var(--size-font-m);
}
/* ================================================
ツールチップツールチップ
================================================ */
#modalNewNickname .modal_body,
#modalNowNickname .modal_body,
#modalCardNo .modal_body,
#modalNowPassword .modal_body,
#modalLoginPassword .modal_body {
	font-size: var(--size-font-m);
}
/* ================================================
小さいスマホ対応 : 入力欄にフォーカス時、ヘッダーとフッター非表示
================================================ */
@media screen and (max-width: 378px) {
	body:has(input[type=text]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus) #header.toolbar,
	body:has(input[type=text]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus) #footerNavi,
	body:has(input[type=text]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus) .list_header {
		display: none;
	}
	body:has(input[type=text]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus) #appView {
		margin: 0 !important;
	}
}
/* ================================================
pageOthersTerms : 利用規約
pageOthersPrivacyPolicy : プライバシーポリシー
================================================ */
#pageOthersTerms .header,
#pageOthersPrivacyPolicy .header {
	width: var(--page-width);
	margin: 0 auto;
}
#pageOthersTerms .body,
#pageOthersPrivacyPolicy .body {
	padding: 20px 0;
	background: #fff;
}
#pageOthersTerms h1,
#pageOthersPrivacyPolicy h1 {
	margin: 20px 0 10px 0;
	font-size: var(--size-font-l);
}
#pageOthersPrivacyPolicy h2:first-child {
	margin-top: 0;
}
#pageOthersPrivacyPolicy h2 {
	margin-top: 20px;
}
#pageOthersPrivacyPolicy p {
	color: #4d4d4d;
	font-size: var(--size-font-m);
}
#pageOthersPrivacyPolicy ol {
	list-style-type: decimal;
	margin-bottom: 10px;
}
#pageOthersPrivacyPolicy ol li {
	color: #4d4d4d;
	font-size: var(--size-font-m);
	margin-left: 20px;
}
.page__content h1,
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5 {
	margin: 0;
	padding: 0;
	font-weight: 600;
	color: #1a1a1a;
	font-size: var(--size-font-n);
}
.page__content h3,
.page__content h4,
.page__content h5 {
	font-size: var(--size-font-m);
}
/* ================================================
areaRankingList : 地区ランキング
================================================ */
#areaRankingMap {
	position: relative;
}
#areaRankingList {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#areaRankingList dt {
	display: none;
}
#areaRankingList dd {
	text-indent: -9999px;
	position: absolute;
	height: 20%;
}
#areaRankingList dd.area_rank_1 {
	width: 20%;
	margin-left: -10%;
	background: url("../images/area_rank/1.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_2 {
	width: 20%;
	margin-left: -10%;
	background: url("../images/area_rank/2.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_3 {
	width: 20%;
	margin-left: -10%;
	background: url("../images/area_rank/3.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_4 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/4.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_5 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/5.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_6 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/6.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_7 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/7.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_8 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/8.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_9 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/9.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_10 {
	width: 12%;
	margin-left: -6%;
	background: url("../images/area_rank/10.svg") top center no-repeat;
}
#areaRankingList dd.area_rank_none {
	width: 10%;
	margin-left: -5%;
	background: url("../images/area_rank/none.svg") top center no-repeat;
}
/* ================================================
pageErrorIndex : エラー
================================================ */
#pageErrorIndex .card_box_shadow {
	margin-top: 40px;
	text-align: center;
}
#pageErrorIndex .card_box_shadow p:first-child {
	font-weight: 600;
}
/* ================================================
modalErrorMessage : エラー
================================================ */
#modalErrorMessage .modal_body {
	text-align: center;
}
/* ================================================
modalRegisterCancel : 入力途中離脱注意
modalRegisterInformation : 登録中止
================================================ */
#apiRequestFailureModal .modal_body,
#modalRegisterCardCancel .modal_body,
#modalRegisterCardCancel .modal_body,
#modalRegisterCancel .modal_body,
#modalRegisterInformation .modal_body {
	text-align: center;
}
/* ================================================
先頭移動ボタン
================================================ */
#pageTop {
	display: none;
	position: fixed;
	right: 12px;
	bottom: 90px;
	width: 44px;
	height: 44px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0px 3px 12px 0 rgba(0, 0, 0, 0.2);
	text-align: center;
	line-height: 44px;
	z-index: 2;
}
/* ================================================
modalHowToTicket : チケットの使い方
================================================ */
#modalHowToTicket dl {
	margin-top: 20px;
	display: block;
}
#modalHowToTicket dl dt {
	font-weight: 600;
	display: block;
}
#modalHowToTicket dl dd {
	margin: 0 0 20px 0;
	display: block;
}
#modalHowToTicket dl dd:last-child {
	margin-bottom: 0;
}
#modalHowToTicket dl dd span {
	font-size: var(--size-font-s);
	color: #4d4d4d;
}
/* ================================================
flow_list : 手順
================================================ */
.flow_list {
	font-size: var(--size-font-s);
	list-style-type: decimal;
	margin-top: 20px;
}
.flow_list li {
	margin-left: 20px;
}
/* ================================================
pageStartIndex : 初回起動
================================================ */
#pageStartIndex #detailBody {
	margin-top: 20px;
	text-align: center;
}
#pageStartIndex img {
	width: 50%;
}
#pageStartIndex .text_wrapper {
	margin: 20px 0 0 0;
	font-weight: 500;
}
/* ================================================
pageQrIndex : QR
================================================ */
#pageQrIndex #detailBody {
	text-align: center;
}
#pageQrIndex img {
	width: 80%;
}
/* ================================================
pageActionDigitalAuthIndex : マイナンバー認証
================================================ */
#pageActionDigitalAuthIndex .card_box {
	text-align: center;
}
#pageActionDigitalAuthIndex .text {
	font-size: var(--size-font-l);
	font-weight: bold;
}
#pageActionDigitalAuthIndex .point {
	font-size: 50px;
	font-weight: bold;
	color: var(--color-accent);
	line-height: 1;
}
#pageActionDigitalAuthIndex .point::after {
	content: "Pt";
	font-weight: normal;
	font-size: var(--size-font-2l);
}
#pageActionDigitalAuthIndex .point_wrapper {
	margin: 20px 0 10px 0;
}
#pageActionDigitalAuthIndex .first_point {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--size-font-l);
	color: var(--color-accent);
}
#pageActionDigitalAuthIndex .first_point .point {
	font-size: var(--size-font-l);
	font-weight: bold;
}
#pageActionDigitalAuthIndex .first_point .point::after {
	content: "Pt";
	font-size: var(--size-font-m);
}
#pageActionDigitalAuthIndex .authed img {
	margin: 24px 0;
	width: 120px;
	height: 120px;
}
#pageActionDigitalAuthIndex button[name="auth"] {
	margin-top: 30px;
}#pageActionDigitalAuthIndex button[name="app"] {
	 margin-top: 20px;
	font-size: var(--size-font-m);
}
#modalDigitalAuthError .messages {
	margin: 40px 0;
	padding: 10px;
	border: solid 1px #d35b5b;
	background: #ffe2e2;
	text-align: left;
	font-size: var(--size-font-s);;
}
/* ================================================
pageActionDigitalAuthInstall : デジタル認証アプリについて
================================================ */
#pageActionDigitalAuthInstall .description {
	font-size: var(--size-font-n);
}
#pageActionDigitalAuthInstall .install {
	margin-top: 20px;
	padding: 20px;
	text-align: center;
	background: var(--color-secondary-pale);
	border-radius: 10px;
}
#pageActionDigitalAuthInstall .install .name,
#pageActionDigitalAuthInstall .install .name span {
	font-weight: 600;
	font-size: var(--size-font-2l);
}
#pageActionDigitalAuthInstall .install .icon {
	width: 130px;
	height: 130px;
	margin: 10px auto 20px auto;
}
#pageActionDigitalAuthInstall .install ul.download {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#pageActionDigitalAuthInstall .install ul li img {
	width: 150px;
}
#pageActionDigitalAuthInstall .install ul li.app img {
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
}