@charset "utf-8";
/* CSS Document */

html {
	overflow-x: hidden;
	width: 100%;
	height: 100%;
	font-size: 10px; /* font-size */
	background: #f9faf6;
}
html.wh {
	background: #fff;
}
body {
	overflow-x: hidden;
	height: 100%;
	text-align: center;
	font-size: 1.4em; /* font-size 基本 */
	font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	font-style: normal;
	font-weight: normal;
	line-height: 1.6;
	color: #595959;
	-webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
figure {margin: 0;}

* {
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.mt05 {margin-top: 0.5rem!important;}

.mb0 {margin-bottom: 0!important;}
.mb05 {margin-bottom: 0.5em!important;}
.mb1 {margin-bottom: 1em!important;}
.mb2 {margin-bottom: 2em!important;}
.mb3 {margin-bottom: 3em!important;}
.mb4 {margin-bottom: 4em!important;}
.mb5 {margin-bottom: 5em!important;}

/* .my2 {margin-top: 0.85em !important;margin-bottom: 0.85em !important;} */
.my2 {margin-top: 1.3em !important;margin-bottom: 1.3em !important;}

.m1 {margin: 1em!important;}
.m2 {margin: 2em!important;}

.p2 {padding: 2em; box-sizing: border-box;}
.pl1 {padding-left: 1em;}

.t_l {text-align: left!important;}
.t_c {text-align: center!important;}
.t_r {text-align: right!important;}

.bld {font-weight: bold!important;}

.xs {font-size: 1.0rem !important;}
.sml {font-size: 1.2rem!important;} /* font-size */
.mdl {font-size: 1.65rem!important;} /* font-size */
.lrg {font-size: 2.4rem!important;} /* font-size */
.x_lrg {font-size: 3.2rem!important;} /* font-size */

.nrw {line-height: 1.3!important;}

.nowrap {white-space: nowrap;}

.idt1 {
	padding-left: 1em;
	text-indent: -1em;
}
a {color: #36bce4;}

.red {color: #eb0000;}
.blu {color: #36bce4;}
.blk {color: #282828;}

#wrap {
	overflow: hidden;
	position: relative;
}

/* ==========
header
========== */
header {
	position: relative;
	padding: 1.3rem;
	line-height: 1;
	background: #55c3e9;
	color: #fff;
}
header h1 {
	display: inline-block;
	padding: 0 6rem;
	font-size: 1.7rem; /* font-size */
	font-weight: bold;
	letter-spacing: 0.15rem;
}
header nav {
	position: absolute;
	display: flex;
	right: 0.85rem;
	top: calc(50% - 1.25rem);
}
header nav a,
header nav button {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 1.2rem;
}

/* ==========
main
========== */
main {
	display:block;
	padding: 1rem;
}
h2 {
	margin: 0.5em 0;
	text-align: center;
	font-size: 1.35rem;
	font-weight: bold;
	color: #282828;
}
h2.line span {
	position: relative;
	display: inline-block;
	font-size: 1.6rem;
	color: #595959;
}
h2.line span::before,
h2.line span::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 1px);;
	left: calc(0% - 3.5rem);
	width: 1.5em;
	height: 1px;
	background: #55c3e9;
}
h2.line span::after {
	left: auto;
	right: calc(0% - 3.5rem);
}
.accent {
	text-align: center;
	font-size: 2rem; /* font-size */
	color: #282828;
}
.accent_s {
	font-size: 1.5rem; /* font-size */
}
.accent > span {
	background:linear-gradient(transparent 60%, #ffef00 60%);
}
.accent > span > span {
	font-size: 1.4rem; /* font-size */
	color: #595959;
}
.checkbox {
	padding: 1em 0;
	font-size: 1.1em; /* font-size */
	color: #282828;
}
.checkbox.wide {
	padding: 1.5em 0;
}
.checkbox ul {
	display: inline-block;
	text-align: left;
}
.checkbox li + li {
	margin-top: 0.75em;
}
.checkbox .icheckbox_minimal-blue {
	margin-right: 0.5em;
	transform: translateY(-0.1rem);
}
.checkbox .iradio_minimal-blue {
	margin-right: 0.5em;
	transform: translateY(-0.1rem);
}
.g-box {
	padding: 1.5rem;
	border: solid 1px #55c3e9;
	border-top-width: 3px;
	border-radius: 0 0 0.5rem 0.5rem;
	background: #fff;
}
.using-couponbox {
	margin-top: 0.5rem;
	padding: 0.75rem;
	border: solid 1px #f46887;
	font-weight: bold;
	color: #f46887;
}
.readmore {
	position: relative;
	display: inline-block;
	margin: 2rem 0 2rem;
	padding-left: 2rem;
	font-size: 1.1em;
	font-weight: bold;
}
.readmore::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 8px);
	left: 0;
	width: 8px;
	height: 8px;
	border-bottom: solid 2px #55c3e9;
	border-left: solid 2px #55c3e9;
	transform: rotate(-45deg);
}

/* ==========
ボタン
========== */
button {
	background: transparent;
	font-size: inherit;
}
.btnbox {
	text-align: center!important;
}
.btnbox.border {
	margin-top: 1rem;
	padding-top: 2rem;
	border-top: solid 1px #55c3e9;
}
.btnbox.flex {
	display: flex;
	justify-content: center;
	gap: 0.2rem;
}
.btnbox.flex .btn {
	min-width: auto !important;
}
a.btn,
button.btn {
	display: inline-block;
	height: 3.6rem;
	width: 50%;
	min-width: 18rem;
	margin: 1rem 0;
	padding: 0 3em;
	border-radius: 1.8rem;
	text-align: center;
	line-height: 3.6rem;
	font-weight: bold;
	letter-spacing: 0.1rem;
	background: #36bce4;
	color: #fff;
	text-decoration: none;
}
a.btn.disable,
button.btn.disable 
a.btn:disabled,
button.btn:disabled {
	background: #b3b3b3;
	cursor: default;
}
a.btn > span,
button.btn > span {
	position: relative;
	display: inline-block;
}
a.btn.next > span {
	padding-right: 1.5rem;
}
a.btn.back > span,
a.btn.icon > span,
button.btn.icon > span {
	padding-left: 1.5rem;
}
a.btn.next > span::after,
a.btn.back > span::after {
	content: '';
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
}
a.btn.next > span::after {
	right: 0;
	top: calc(50% - 2px);
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}
a.btn.back > span::after {
	left: 0;
	top: calc(50% - 4px);
	border-left: solid 2px #fff;
	transform: rotate(-45deg);
}
a.btn.back.return,
a.btn.back.cancel {
	border: solid 1px #36bce4;
	background: #edf7fd;
	color: #36bce4;
}
a.btn.back.cancel {
	background: #fff;
}
a.btn.back.return > span::after,
a.btn.back.cancel > span::after {
	border-top: solid 2px #36bce4;
	border-left: solid 2px #36bce4;
}
a.btn.icon > span::after,
button.btn.icon > span::after {
	content: '';
	position: absolute;
	display: block;
	left: -1.25rem;
	top: calc(50% - 1.35rem);
	width: 2.5rem;
	height: 2.5rem;
}
a.btn.icon.upload > span::after,
button.btn.icon.upload > span::after {
	background: url(../img/upload.png) no-repeat 50% 50%;
	background-size: contain;
}
a.btn.icon.map > span::after,
button.btn.icon.map > span::after {
	background: url(../img/map.png) no-repeat 50% 50%;
	background-size: contain;
}
a.btn.icon.rsv_cancel > span::after,
button.btn.icon.rsv_cancel > span::after {
	background: url(../img/cancel.png) no-repeat 50% 50%;
	background-size: contain;
}
a.btn.icon.check > span::after,
button.btn.icon.check > span::after {
	background: url(../img/check.png) no-repeat 50% 50%;
	background-size: contain;
}
a.btn.icon.qr > span::after,
button.btn.icon.qr > span::after {
	background: url(../img/qr.png) no-repeat 50% 50%;
	background-size: contain;
}
a.btn.icon.init > span::after,
button.btn.icon.init > span::after {
	background: url(../img/init.png) no-repeat 50% 50%;
	background-size: contain;
}
a.btn_l,
button.btn_l {
	width: 65%;
	height: 5rem;
	min-width: 20rem;
	border-radius: 2.5rem;
	line-height: 5rem;
	font-size: 1.6rem; /* font-size */
}
a.btn_l.cancel,
button.btn_l.cancel {
	height: calc(5rem - 2px);
	line-height: calc(5rem - 2px);
}
a.btn_l.next > span::after {
	top: calc(50% - 4px);
}
a.btn_l.back > span::after {
	top: calc(50% - 5px);
}
a.btn_line,
button.btn_line {
	width: 90%;
	padding: 2px;
	box-sizing: border-box;
}
a.btn_line span,
button.btn_line span {
	display: block;
	border: solid 1px #fff;
	border-radius: 2.3rem;
	line-height: calc(5rem - 6px);
	box-sizing: border-box;
}
a.btn.btn_coupon {
	background: #f46887;
}
a.no,
button.no {
	background: #b3b3b3;
}

/* ==========
初期設定
========== */
.init header h1 {
	padding: 0 1rem;
}
.init .message_h {
	margin-bottom: 2em;
	padding-left: 7rem;
	background: url(../img/logo.png) no-repeat 0% 50%;
	background-size: 5rem 5rem;
}
.init .message_v {
	margin-bottom: 2em;
	padding-bottom: 7rem;
	background: url(../img/logo.png) no-repeat 50% 100%;
	background-size: 5rem 5rem;
}
.init .message {
	position: relative;
	padding: 1.5rem;
	text-align: left;
	border: solid 1px #f0681e;
	border-radius: 0.5em;
	font-size: 1.1em; /* font-size */
	background: #fff;
	color: #282828;
}
.init .message_h .message::after,
.init .message_v .message::after {
	content: '';
	position: absolute;
	display: block;
}
.init .message_h .message::after {
	right: calc(100% - 1px);
	top: calc(50% - 1.25rem);
	width: 2rem;
	height: 2.5rem;
	background: url(../img/fukidashi.png) no-repeat 50% 50%;
	background-size: contain;
}
.init .message_v .message::after {
	left: calc(50% - 1.25rem);
	top: calc(100% - 1px);
	width: 2.5rem;
	height: 2rem;
	background: url(../img/fukidashi2.png) no-repeat 50% 50%;
	background-size: contain;
}
.init .message.error {
	border: solid 1px #eb0000;
	color: #eb0000;
}
.init .message_h .message.error::after {
	background: url(../img/fukidashi_err.png) no-repeat 50% 50%;
	background-size: contain;
}
.init .message_v .message.error::after {
	background: url(../img/fukidashi2_err.png) no-repeat 50% 50%;
	background-size: contain;
}
.init .checkbox {
	padding: 2em 0 1em;
}
.init form {
	padding-bottom: 2em;
	text-align: left;
}
.init .kana {
	margin-top: 0.75em;
}
.init .odr {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-size: 1.1em; /* font-size */
	font-weight: bold;
	color: #282828;
}
.init .odr.num {
	padding-left: 1em;
	text-indent: -1em;
}
.init .odr.num:first-letter {
	color: #36bce4;
}
.init form > div {
	padding-left: 1em;
}
.init form > div.name,
.init form > div.year {
	display: flex;
	align-items: center;
}
.init form > div.name > div + div {
	width: 13em;
	margin-left: 1rem;
}
.init form > div.name_error > div + div {
	width: auto;
}
.init form > div.year select{
	margin-right: 0.5rem;
}
.init form > div.year > div + div {
	margin-left: 1rem;
}
.init .btnbox {
	display: block;
}
p.cvc a {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	margin: 0 0 0 0.5rem;
	transform: translateY(-0.3rem);
	cursor: pointer;
}
div.cvc input {
	width: 4em;
}
.init .conf {
	margin-top: 1em;
	padding-top: 0.75em;
	border-top: solid 1px #bac5a7;
}
.init .conf:first-of-type,
.init .conf:nth-of-type(4) {
	border-top: none;
}
.init p.read {
	padding: 0.25em 0.5em;
	line-height: 1.3;
	font-size: 1.7rem;
}
.init form > div.btnbox {
	padding-left: 0;
}
.btnbox.confbox {
	padding: 0.75em 0;
}
figure.cvc img {
	width: 60%;
	max-width: 335px;
}

/* ==========
入力系
========== */
input {
	width: 100%;
	padding: 0.5em;
	border: solid 1px #55c3e9;
	border-radius: 0;
	line-height: 1;
	font-size: 1.6rem; /* font-size */
	box-sizing: border-box;
	color: inherit;
	-webkit-appearance: none;
}
input[disabele="disabele"] {
	padding: 0.25em 0.5em;
	border: none;
	font-size: 1.7rem; /* font-size */
	background: none;
	color: #595959;
}
input[name="postal-code"],
input[name="postal-code"].error {
	display: inline-block;
	width: auto;
	margin-right: 0.5em;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

input[type="number"] { -moz-appearance:textfield;}

input:-webkit-autofill {box-shadow: 0 0 0 1000px white inset;}

label {
	white-space: nowrap;
}
.init form > div.name_error {
	display: none;
}
.init form > div.name_error.on {
  display: flex;
}
p.error,
span.error  {
	/*display: block;*/
	/* display: none; */
	margin-top: 0.5em;
	font-size: 1.3rem; /* font-size */
	color: #eb0000;
}
input.error, select.error, button.error {border-color: #eb0000;}
.inline p.error {
  display: inline-block;
}
#expire_error_area {
  display: none;
}
#expire_error_area.on {
  display: block;
}

::placeholder {
	font-weight: normal;
	color: #b3b3b3;
	line-height: 100%;
}
select {
	vertical-align: middle;
	outline:none;
	padding: 0.5em 2.5em 0.5em 1em;
	border: solid 1px #55c3e9;
	border-radius: 0.3rem;
	font-size: 1.6rem; /* font-size */
	color: inherit;
	background: #fff url(../img/select.png) no-repeat 92.5% 50%;
	background-size: 1.5rem 2.5rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select option {
	background-color: #fff;
	color: inherit;
}
select::-ms-expand {display: none;}

input:focus,
select:focus {border-color: #005bbe;}

.icheckbox_minimal-grey {
	top: -1px;
	background-color: #fff;
}
.icheckbox_minimal-grey.disabled {background-color: #a8a8a8;}

/* ==========
マイページ
========== */
.mypage header {
	padding: 0 0 1rem;
	text-align: left;
	line-height: inherit;
	color: inherit;
}
.mypage header .menuhead {
	padding-bottom: 1.5rem;
}
.mypage header .name {
	margin-right: 6rem;
	margin-bottom: 0.5rem;
}
.mypage header .fee {
	padding-left: 6rem;
}
.mypage header .menuhead.noimage .fee {
	padding-left: 0;
}
.mypage header nav {
	top: 3.3rem;
}
.mypage .g-box {
	padding: 0.5rem 1.5rem 1.5rem;
	border-top-width: 1px;
	border-radius: 0.5rem;
}
.mypage .mapwin .g-box {
	padding: 1.5rem;
	border-top-width: 3px;
	border-radius: 0 0 0.5rem 0.5rem;
}
/* .mypage .g-box.state3 {
	padding: 0.5rem 1.5rem 0.5rem;
} */
.mypage .g-box.state3 ul {
	text-align: left;
	line-height: 1.3;
}
.mypage .g-box.state3 ul li + li {
	margin-top: 0.65rem;
}
.mypage header .g-box {
	margin: 0 1rem;
}
.mypage .g-box .head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	font-size: 1.35rem;
}
.mypage .g-box.state3 .head {
	margin-bottom: 0;
}
.mypage .g-box .head h2 {
	display: flex;
	align-items: center;
}
.mypage .g-box .head h2 span {
	display: inline-block;
	line-height: 1;
}
.mypage .g-box .head h2 > span:first-of-type {
	display: flex;
	align-items: center;
	margin-right: 1rem;
	padding: 3px 0;
	border-bottom: solid 1px #55c3e9;
}
.mypage .g-box .head h2 > span:nth-of-type(2) {
	margin-right: 1rem;
	padding: 3px;
	color: #f0681e;
}
.mypage .g-box .head h2 > span:nth-of-type(2).reserved {
	background: #eb0000;
	color: #fff;
}
.mypage .g-box .head h2 > span.plan-1day {
	padding: 3px;
	color: #f0681e;
}
.mypage .g-box .head img {
	width: 1.75rem;
	height: 1.75rem;
	margin-right: 0.5rem;
}
.mypage .g-box .head > div:nth-of-type(2) a {
	position: relative;
	display: inline-block;
	padding-right: 1rem;
	text-decoration: none;
	color: #595959;
}
.mypage .g-box .head > div:nth-of-type(2) a::after {
	content: '';
	position: absolute;
	display: block;
	right: 0;
	top: calc(50% - 4px);
	width: 8px;
	height: 8px;
	border-top: solid 2px #55c3e9;
	border-right: solid 2px #55c3e9;
	transform: rotate(45deg);
}
.mypage header .g-box .thismonth {
	margin: 1.5rem 0;
	line-height: 1;
	font-size: 3.2rem;
}
.mypage main .g-box {
	margin-bottom: 1rem;
}
.mypage main .g-box:last-of-type {
	margin-bottom: 0;
}
.mypage .g-box table.state {
	display: inline-block;
	margin: 0 auto 1rem;
	text-align: left;
	line-height: 1.2;
}
.mypage .g-box table.state th,
.mypage .g-box table.state td {
	padding-top: 1rem;
}
.mypage .g-box table.state th {
	text-align: right;
	white-space: nowrap;
}
.mypage .g-box a.btn,
.mypage .g-box button.btn {
	width: 75%;
}
.mypage .mapwin .g-box a.btn,
.mypage .mapwin .g-box button.btn {
	width: 50%;
}
.mypage .g-box a.btn_l,
.mypage .g-box button.btn_l {
	width: 95%;
}
.mypage .g-box .using-couponbox {
	margin-bottom: 1rem;
}
.mypage .aboutcoupon h2 {
	position: relative;
	display: inline-block;
	font-weight: normal;
	color: #585858;
}
.mypage .aboutcoupon h2::before,
.mypage .aboutcoupon h2::after {
	content: '';
	position: absolute;
	display: block;
	top: 0.25rem;
	width: 1px;
	height: 1.5rem;
	background: #585858;
}
.mypage .aboutcoupon h2::before {
	left: -10px;
	transform: rotate(-15deg);
}
.mypage .aboutcoupon h2::after {
	right: -10px;
	transform: rotate(20deg);
}
.mypage .aboutcoupon ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	text-align: left;
}
.mypage .aboutcoupon li {
	width: 49%;
}
.mypage .aboutcoupon li a {
	display: block;
	padding: 0.75em 0.5em 0.75em 3em;
	border-radius: 0.5rem;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
}
.mypage .aboutcoupon li:first-child a {
	background: #f46887 url(../img/mypage_coupon_wh.png) no-repeat 1rem 50%;
	background-size: 2.4rem;
}
.mypage .aboutcoupon li:last-child a {
	background: #f46887 url(../img/mypage_search_wh.png) no-repeat 1rem 50%;
	background-size: 2.4rem;
}
.mypage .g-box.info,
.mypage .g-box.info .head h2 > span:first-of-type,
.mypage .g-box.info .head > div:nth-of-type(2) a::after {
	border-color: #f0681e;
}
.mypage .g-box.info ul {
	text-align: left;
	line-height: 1.3;
}
.mypage .g-box.info ul li + li {
	margin-top: 1rem;
}
.mypage .g-box.info ul a {
	display: flex;
	color: #585858;
	text-decoration: none;
}
.mypage .g-box.info ul a span:first-of-type {
	flex-shrink: 0;
	width: 3.5em;
}
.mypage .g-box.info ul a span:last-of-type {
	text-decoration: underline;
}
.mypage .g-box.result ul {
	text-align: left;
	line-height: 1.3;
}
.mypage .g-box.result ul li + li {
	margin-top: 0.65rem;
}
.mypage .g-box .card {
	padding-left: 4rem;
	text-align: left;
	background: url(../img/mypage_card.png) no-repeat 0 0%;
	background-size: 3rem;
}
.mypage .g-box.coupon-box {
	border-color: #fff;
}
.mypage .g-box.coupon-box .head h2 > span:first-of-type,
.mypage .g-box.coupon-box .head > div:nth-of-type(2) a::after {
	border-color: #f46887;
}
.mypage .g-box.coupon-box input {
	padding: 1em 0.5em;
	border-color: #b3b3b3;
	text-align: center;
}
.invi-code-send {
	position: relative;
	margin-bottom: 0.5em;
	padding: 1em 0 0.5em;
	border-bottom: solid 1px #f46887;
	font-size: 1.6rem
}
.mypage .g-box.coupon-box .invi-code-send::after {
	content: '';
	position: absolute;
	display: block;
	top: 100%;
	left: calc(50% - 4px);
	width: 0;
	height: 0;
	/* 下向き三角2 */
	border-style: solid;
	border-color: #f46887 transparent transparent transparent;
	border-width: 10px 8px 0 8px;
}
.mypage .g-box.coupon-box .invi-code-send span {
	display: inline-block;
	margin: 0 0.35rem;
}
.mypage .g-box.coupon-box .invi-code-send span.copycode {
	padding: 0.3em 0.5em;
	border: solid 1px #b3b3b3;
	border-radius: 0.5em;
	line-height: 1;
	font-size: 0.8em;
}
.mypage .g-box.coupon-box button,
.registcoupon button.btn,
.registinvitation button.btn,
.sendinvitation button.btn,
.messagepk button.btn {
	background: #f46887;
}
.overlay div.overlayinn.sendinvitation {
	height: 100%;
}
.mypagewin {
	position: fixed;
	overflow: hidden;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
  display: none;
  z-index: 1;
}

/* ==========
お知らせ
========== */
.infopage ul.readme {
	margin: 1em 0 0;
	text-align: left;
}
.infopage ul.readme li + li {
	margin-top: 0.75rem;
}
.infopage ul.readme li {
	background: #f9f9f9;
}
.infopage ul.readme li.noread {
	background: #fff;
}
.infopage ul.readme a {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 2em;
	padding: 0.5rem 2rem;
	border: solid 1px #55c3e9;
	border-radius: 2rem;
	color: #595959;
	text-decoration: none;
}
.infopage ul.readme li.noread span:first-of-type {
	font-weight: bold;
}
.infopage ul.readme li span:first-of-type {
	flex: 1;
	padding-right: 1rem;
}
.infopage ul.readme li span:nth-of-type(2) {
	font-size: 0.85em;
	color: #808080;
}
.infopage ul.readme li.new a::after {
	content: '';
	position: absolute;
	display: block;
	top: -1rem;
	left: 0;
	width: 2.4rem;
	height: 2.4rem;
	border: solid 1px #fff;
	border-radius: 1.2rem;
	box-sizing: border-box;
	background: #f0681e url(../img/bell_wh.png) no-repeat;
	background-size: contain;
}
.infopage .readmore {
	margin-bottom: 0;
}
.infopage .btnbox {
	margin-top: 1rem;
}
/* 詳細 */
.infodatail article {
	padding: 0.5em;
	text-align: left;
}
.infodatail p.date {
	line-height: 1;
	color: #808080;
}
.infodatail h2 {
	padding-bottom: 0.5rem;
	border-bottom: solid 2px #55c3e9;
	text-align: left;
	font-size: 1.05em;
}
.infodatail .txtbody {
	margin: 1.5em 0;
}

/* ==========
利用履歴
========== */
.log ul.tab,
.log_past ul.tab {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0.5rem 0 1.5rem;
}
.log ul.tab li:first-child,
.log_past ul.tab li:first-child {
	border-right: solid 3px #36bce4;
}
.log ul.tab li a,
.log_past ul.tab li a {
	display: block;
	width: 8em;
	line-height: 34px;
	font-size: 1.6rem;
	font-weight: bold;
	text-decoration: none;
}
.log ul.tab li:first-child a {
	padding-left: 0.5rem;
	background: url(../img/bg_log1_on.png) 0 0;
	background-size: cover;
	color: #fff;
}
.log ul.tab li:last-child a {
	padding-right: 0.5rem;
	background: url(../img/bg_log2.png) 100% 0;
	background-size: cover;
}
.log ul.log_list .g-box,
.log_past ul.log_list .g-box {
	padding-bottom: 1rem;
	border-top-width: 1px;
	text-align: left;
	font-size: 1.6rem;
}
.log ul.log_list .g-box {
	padding-bottom: 0.5rem;
}
.log ul.log_list li + li,
.log_past ul.log_list  li + li {
	margin-top: 0.7rem;
}
.log ul.log_list li p + p,
.log_past  ul.log_list li p + p {
	margin-top: 0.7rem;
}
.log ul.log_list li p.date,
.log_past ul.log_list li p.date {
	font-weight: bold;
}
.log ul.log_list li p.icon,
.log_past ul.log_list li p.icon {
	display: flex;
	align-items: center;
	padding: 0.5rem 0;
	line-height: 1.2;
}
.log ul.log_list li p.icon > span:first-of-type,
.log_past ul.log_list li p.icon > span:first-of-type {
	flex-shrink: 0;
	width: 2rem;
	margin-right: 0.5rem;
	z-index: 1;
}
.log ul.log_list img {
	vertical-align: middle;
}
.log ul.log_list li p.icon:nth-of-type(2) {
	position: relative;
}
.log ul.log_list li p.icon:nth-of-type(2)::before {
	content: '';
	position: absolute;
	display: block;
	top: 1.5rem;
	left: 0;
	width: 2rem;
	height: 3.7rem;
	background: url(../img/bg_log3.png) repeat-y 50% 0%;
	background-size: contain;
}
.log ul.log_list li ul.price {
	margin-top: 0.5rem;
}
.log ul.log_list li ul.price li {
	text-align: right;
	margin-top: 0;
	padding: 0.5rem 0;
	font-size: 1.4rem;
}
.log ul.log_list li ul.price li.spread {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
}
.log ul.log_list li ul.price li:first-child {
	font-size: 1.8rem;
	font-weight: bold;
}
.log ul.log_list li ul.price li.spread p.icon {
  flex: 3 3;
}
.log ul.log_list li ul.price li.spread .label {
	font-size: 1.4rem;
  font-weight: normal;
  flex: 2 2;
  text-align: end;
}
.log ul.log_list li ul.price li.spread .bill {
  flex: 2 2;
  text-align: end;
}
.log ul.log_list li ul.price li:nth-child(2) {
	border-top: solid 1px #b3b3b3;
}
.log ul.log_list li ul.price li p.icon {
	padding: 0;
	margin-right: 1em;
	font-weight: normal;
}
/*.log ul.log_list li ul.price li p.icon-error {
	padding: 0;
	margin-right: 1em;
	font-weight: normal;
}*/
.log ul.log_list li ul.price li table {
	display: inline-block;
}
.log ul.log_list li ul.price li table th {
	padding-right: 2em;
	text-align: right;
}
/* 支払い */
.log_past ul.tab li:first-child a {
	padding-left: 0.5rem;
	background: url(../img/bg_log1.png) 0 0;
	background-size: cover;
}
.log_past ul.tab li:last-child a {
	padding-right: 0.5rem;
	background: url(../img/bg_log2_on.png) 100% 0;
	background-size: cover;
	color: #fff;
}
.log_past ul.log_list li p.icon:nth-of-type(3) {
	margin-top: 0;
}
.log_past ul.log_list li span.state {
	padding-left: 0.5em;
	font-weight: bold;
	color: #36bce4;
}
.log_past ul.log_list li span.state.ex {
	color: #eb0000;
}
.log_past .readmore {
	margin-bottom: 1rem;
}

/* ==========
クーポン一覧
========== */
.couponpage .accent {
	margin: 1em 0 0.5em;
	font-size: 1em!important;
}
.couponpage ul.coupon_list > li + li {
	margin-top: 2rem;
}
.couponpage ul.coupon_list > li {
	border: solid 1px #f46887;
	border-radius: 0 0 0.5rem 0.5rem;
	background: #fff;
}
.couponpage h2 {
	margin: 0;
	padding: 1rem;
	background: #f46887;
	color: #fff;
}
.couponpage h2 span {
	position: relative;
	display: inline-block;
	min-height: 2rem;
	padding-left: 2.6rem;
	text-align: left;
	line-height: 1.3;
	font-size: 1.1em;
}
.couponpage h2 span::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 1.3rem);
	left: 0;
	width: 2rem;
	height: 2rem;
	background: url(../img/mypage_coupon_wh.png) no-repeat 0 50%;
	background-size: 2rem;
}
.couponpage ul.coupon_list > li > div {
	position: relative;
	padding: 1rem 2rem 0.5rem;
}
.couponpage ul.coupon_list > li > div::before,
.couponpage ul.coupon_list > li > div::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 1.5rem);
	width: 1rem;
	height: 2rem;
	border: solid 1px #f46887;
	background: #f9faf6;
}
.couponpage ul.coupon_list > li > div::before {
	left: -1px;
	border-left: 0;
	border-radius: 0 1rem 1rem 0;
}
.couponpage ul.coupon_list > li > div::after {
	right: -1px;
	border-right: 0;
	border-radius: 1rem 0 0 1rem;
}
.couponpage ul.coupon_list table {
	display: inline-block;
	margin: 0.5rem auto 0;
	text-align: left;
}
.couponpage ul.coupon_list table th,
.couponpage ul.coupon_list table td {
	vertical-align: top;
	padding: 0.25rem 0;
}
.couponpage ul.coupon_list table th {
	white-space: nowrap;
	line-height: 1.6;
}
.couponpage ul.coupon_list table td {
	line-height: 1.3;
	font-size: 1.3em;
	font-weight: bold;
	color: #282828;
}
.couponpage ul.coupon_list button {
	width: 80%;
	background: #f46887;
}
.couponpage .readmore {
	margin-bottom: 0;
}
.couponpage .readmore::after {
	border-color: #f46887;
}

/* ==========
利用規約・プライバシーポリシー
========== */
.terms ul,
.privacy ul {
	overflow: auto;
	padding: 1em;
	border: solid 1px #55c3e9;
	border-radius: 0.75rem;
	text-align: left;
	background: #fff;
	box-sizing: border-box;
}
.terms ul > li + li,
.privacy ul > li + li {
	margin-top: 2em;
}
.terms ul > li > p:first-of-type,
.privacy ul > li > p:first-of-type {
	margin-bottom: 0.75rem;
	line-height: 1;
	font-size: 1.5rem;
	color: #282828;
}
.terms ul > li > p:first-of-type span,
.privacy ul > li > p:first-of-type span {
	position: relative;
	display: inline-block;
	letter-spacing: 7px;
}
.terms ul > li > p:first-of-type span::after,
.privacy ul > li > p:first-of-type span::after {
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 2px);
	left: calc(100% + 10px);
	width: 1.5em;
	height: 1px;
	background: #55c3e9;
}

/* ==========
ヘルプ
========== */
.help h2 {
	margin: 1.5rem 0 2rem;
}
.help li + li {
	margin-top: 1rem;
}
.help li a {
	position: relative;
	display: block;
	padding: 1rem;
	text-align: left;
	background: #fff;
	color: #282828;
	box-shadow: 0 0 4px #e1e6d2;
	text-decoration: none;
}
.help li a::before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0 solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #55c3e9;
}
.help li a::after{
	content: '';
	position: absolute;
	display: block;
	top: calc(50% - 5px);
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #55c3e9;
	border-right: solid 2px #55c3e9;
	transform: rotate(45deg);
}
.helpinfo {
	margin: 2em 0;
	padding: 1em;
	border: solid 1px #55c3e9;
	border-radius: 0.5rem;
	background: #fff;
}
/* 詳細 */
.help_detail h2 {
	margin-top: 2rem;
}
.help_detail ul li + li {
	margin-top: 1rem;
}
.help_detail ul li:nth-child(odd) {
	position: relative;
	margin-top: 2rem;
	padding-right: 30px;
}
.help_detail ul li:nth-child(odd)::after {
	content: '';
	position: absolute;
	display: block;
	right: 0;
	top: 0.7rem;
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #55c3e9;
	border-right: solid 2px #55c3e9;
	transform: rotate(135deg);
	transition: transform 0.5s;
}
.help_detail ul li:nth-child(odd).on::after {
	transform: rotate(-45deg);
	top: 1.2rem;
}
.help_detail ul li:nth-child(even) {
	display: none;
	padding: 0.5rem 1rem 0.5rem 0;
	border: solid 1px #55c3e9;
	background: #fff;
}
.help_detail ul li > div {
	display: flex;
	text-align: left;
}
.help_detail ul li > div > p:first-of-type {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	margin-right: 0.5rem;
	padding-top: 0!important;
}
.help_detail ul li > div > p:last-of-type,
.help_detail ul li > div > div {
	padding-top: 0.5rem;
}
.help_detail table {
	width: 100%;
	margin: 1rem 0;
}
.help_detail table caption {
	font-weight: bold;
}
.help_detail table th,
.help_detail table td {
	padding: 0.5rem;
	border: solid 1px #b3b3b3;
	font-size: 0.85em;
}
.help_detail table th {
	text-align: center;
	background: #f9f9f9;
	white-space: nowrap;
}
.help_detail table td {
	background: #fff;
}
.help_detail table .nw {
	white-space: nowrap;
}

/* ==========
乗車ルール
========== */
.rule h2 {
	margin-bottom: 2em;
}
.rule main > ul {
	margin: 0 1rem 1rem;
}
.rule main > ul > li + li {
	margin-top: 3rem;
}
.rule h3 {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	text-align: left;
	line-height: 1.3;
	font-size: 1.6rem;
	font-weight: bold;
	color: #282828;
}
.rule h3 span:first-of-type {
	flex-shrink: 0;
	width: 3rem;
	margin-right: 0.5rem;
}
.rule figure {
	margin-bottom: 1.5rem;
	padding: 0 1em;
}
.rule p {
	text-align: left;
}
.rule ul.idt1 li + li {
	margin-top: 1rem;
}

/* ==========
サービスの利⽤⽅法
========== */
.app h2 {
	margin-bottom: 2em;
}
.app ul {
	margin: 0 1rem 1rem;
}
.app li + li {
	position: relative;
	margin-top: 3rem;
	padding-top: 3rem;
}
.app li + li::after {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	left: calc(50% - 3rem);
	width: 6rem;
	height: 1px;
	background: #55c3e9;
}
.app li:last-child {
	margin-bottom: 3rem;
}
.app figure {
	margin-bottom: 1.5rem;
	padding: 0 5em;
}
.app h3 {
	margin-bottom: 1rem;
	line-height: 1.3;
	font-size: 1.6rem;
	font-weight: bold;
	color: #282828;
}

/* ==========
操作方法
========== */
.howto ul.index {
	margin-top: 1.5em;
	text-align: left;
	line-height: 1;
}
.howto ul.index li {
	box-shadow: 0 0 10px #e1e6d2;
}
.howto ul.index li + li {
	position: relative;
	margin-top: 3em;
}
.howto ul.index li + li::after {
	content: '';
	position: absolute;
	display: block;
	top: -2.25em;
	left: calc(50% - 3.6rem);
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #35bde5 transparent transparent transparent;
	border-width: 2.5rem 3.6rem 0 3.6rem;
}
.howto ul.index a {
	position: relative;
	display: block;
	padding: 1rem 1.5rem;
	text-decoration: none;
	color: #282828;
	background: #fff;
}
.howto ul.index a::before,
.howto ul.index a::after {
	content: '';
	position: absolute;
	display: block;
}
.howto ul.index a::before {
	top: 1px;
	left: 1px;
	width: 5px;
	height: calc(100% - 2px);
	background: #55c3e9;
}
.howto ul.index a::after {
	top: calc(50% - 4px);
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #35bde5;
	border-right: solid 2px #35bde5;
	transform: rotate(45deg);
}
/* 詳細 */
.howto h2.line {
	margin: 2rem 0 1.5rem;
}
.howto .howto_list {
	margin: 0 1rem;
}
.howto .howto_list li {
	margin: 0 0.5rem;
}
.howto .howto_list li + li{
	margin-top: 1rem;
	padding-top: 3rem;
	border-top: solid 1px #55c3e9;
}
.howto .howto_list figure {
	margin-bottom: 1.5rem;
}
.howto .howto_list h3 {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
	text-align: left;
	line-height: 1.3;
	font-size: 1.6rem;
	font-weight: bold;
	color: #282828;
}
.howto .howto_list h3 span:first-of-type {
	flex-shrink: 0;
	width: 3rem;
	margin-right: 0.5rem;
}
.howto .howto_list h3 span:last-of-type {
	padding-top: 0.7rem;
}
.howto .howto_list p {
	text-align: left;
}
.howto .btnbox {
	margin: 1em 0;
}

/* ==========
MAP
========== */
body.map {
	position: fixed;
	width: 100%;
}
.map #wrap {
	height: 100%;
}
.map .mapcanvas,
.map .mapoverlay,
.mypage .mapoverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.map .mapoverlay,
.mypage .mapoverlay {
	display: none;
	background: rgba(0,0,0,0.5);
  z-index: 1;
}
.mapstate1,
.mapstate2 {
	height: 100%;
}
.map .info {
	position: relative;
	margin-bottom: 0.5rem;
	padding: 1rem;
	border-radius: 0.5rem;
	text-align: left;
	background: #f9faf6;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
.map .info1 {
	padding-right: 3rem;
	line-height: 1.15;
}
.map .info3 {
	padding-right: 3rem;
	line-height: 1.15;
	color: red;
}
.map .infohead {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: solid 1px #dce1d2;
	line-height: 1.3;
}
.map .infohead p:first-of-type {
	white-space: nowrap;
}
.map .infohead p:nth-of-type(2) {
	flex: 1;
}
.map .infohead a {
	padding-top: 0.2rem;
	font-weight: bold;
	text-decoration: none;
	color: #eb0000;
	white-space: nowrap;
}
.map .info1 button.closebtn {
	position: absolute;
	top: calc(50% - 1.25rem);
	right: 0.5rem;
	width: 2.5rem;
	height: 2.5rem;
}
.map .info2 .infobody {
	display: flex;
	justify-content: space-between;
	align-items: top;
}
.map .info2 button {
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	margin-left: 2rem;
	/* border: solid 1px #b3b3b3; */
	border: solid 1px #66CCFF;
	/* border: solid 1px #55c3e9; */
	border-radius: 2.5rem;
	background: #fff url(../img/map3.png) no-repeat 50% 50%;
	background-size: contain;
	box-sizing: border-box;
}
.map footer {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	padding: 0 1rem 1rem;
	box-sizing: border-box;
}
.map footer a,
.map footer button {
	position: absolute;
	display: block;
	bottom: 2rem;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
.map footer .help2,
.map footer .place  {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	bottom: 3rem;  /*insert*/
}
.map footer .help2 {
	left: 2rem;
}
.map footer .place {
	left: 7.5rem;
}
.map footer .qrbtn,
.map footer .endbtn {
	width: 90px;
	height: 90px;
	border-radius: 45px;
	left: calc(50% - 45px);
	bottom: 3rem; /*1rem*/
}		
.map footer .endbtn {
	font-size: 1.6rem; /* font-size */
	font-weight: bold;
	border: solid 1px #fff;
	background: -webkit-linear-gradient(top, #57c3ea, #00afe2);
	background: linear-gradient(to bottom, #57c3ea, #00afe2);
	color: #fff;
}
.map footer .menubtn {
	width: 58px;
	height: 58px;
	border-radius: 29px;
	right: 2rem;
	bottom: 3.5rem; /*1.5rem*/
}
.map .overlay .camera,
.mypage .overlay .camera {
	height: 80vw;
}

/* ==========
MAP上ウィンドウ
========== */
.mapwin {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-radius: 0.5rem 0.5rem 0 0;
	background: #f9faf6;
  z-index: 1;
}
.mapwin > div {
	overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-block: contain;
  overscroll-behavior-inline: contain;
  overscroll-behavior-y: contain;
	height: 100%;
}
.mapwinhead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0.5rem 3.5rem;
	line-height: 1.2;
	font-size: 1.8rem;
	font-weight: bold;
	background: #55c3e9;
	color: #fff;
	box-sizing: border-box;
}
.mapwinhead.portname {
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
}
.mapwinclose,
.mapwinclose2 {
	position: absolute;
	top: 0.4rem;
	right: 0.6rem;
	width: 2.8rem;
	height: 2.8rem;
	padding: 0;
	border-radius: 1.4rem;
	background: #55c3e9;
}
.mapwinbody {
	padding: 1rem;
}
.couponbox {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 4.6rem;
	margin: 0.5rem 0;
	padding: 0 1em 0 2em;
	border: solid 1px #f46887;
	line-height: 1.2;
	font-size: 1.3rem; /* font-size */
	font-weight: bold;
	letter-spacing: 0;
	background: url(../img/bg_coupon1.png) no-repeat 0 0, url(../img/bg_coupon2.png) no-repeat 100% 100%;
	background-size: contain;
	background-color: #f46887;
	color: #fff;
	box-sizing: border-box;
}
/* 車体情報表示 */
.mapwin.scooters {
	top: 15%;
	bottom: auto;
	height: 85%;
	max-height: 85%;
}
.mapwin.scooters .mapwinbody {
	text-align: left;
}
.mapwin.scooters .mapwinbody > ul.slide {
	margin-bottom: 1.5rem;
}
.prev_icon,
.next_icon {
	position: absolute;
	z-index: 1;
	width: 25px;
	height: 25px;
	top: calc(50% - 35px);
}
.prev_icon {
	left: 0;
}
.next_icon {
	right: 0;
}
.slick-dots {
	position: relative;
	z-index: 1;
	margin-top: -3.5rem;
	margin-bottom: 1rem;
	text-align: center;
}
.slick-dots li {
	display: inline-block;
	height: 10px;
	width: 10px;
	margin: 0 1rem;
	border-radius: 5px;
	font-size: 0;
	background: #ccc;
}
.slick-dots li.slick-active {
	background: #36bce4;
}
.mapwin.scooters ul.slide {
  min-height: 56vw;
}
.mapwin.scooters table.port {
	width: 100%;
	margin-bottom: 1rem;
}
.mapwin.scooters table.port th,
.mapwin.scooters table.port td {
	vertical-align: top;
	padding: 0.5rem 0;
	border-bottom: solid 1px #d8d8d8;
	line-height: 1.3;
}
.mapwin.scooters table.port tr:last-of-type th,
.mapwin.scooters table.port tr:last-of-type td {
	border-bottom: none;
}
.mapwin.scooters table.port th {
	width: 5.5em;
	white-space: nowrap;
}
.mapwin.scooters .number {
	margin-bottom: 1rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	text-align: center;
	background: #cceaf7;
}
.mapwin.scooters .number a {
	display: inline-block;
	margin: 0 1rem 0 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 2.5rem;
	line-height: 1;
	font-size: 0.9em;
	text-decoration: none;
	background: #fff;
	color: #595959;
}
.mapwin.scooters table.port div.address {
	display: flex;
}
.mapwin.scooters table.port div.address button {
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	margin-left: 4rem;
	/* border: solid 1px #b3b3b3; */
	border: solid 1px #66CCFF;
	/* border: solid 1px #55c3e9; */
	/* border: solid 1px #3366CC; */
	border-radius: 2.5rem;
	background: #fff url(../img/map3.png) no-repeat 50% 50%;
	background-size: contain;
	box-sizing: border-box;
}
.mapwin.scooters p.reservable {
	padding-top: 1rem;
	font-weight: bold;
}
.mapwin.scooters ul.bikes {
	margin-top: 0.5rem;
}
.mapwin.scooters ul.bikes > li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1.5rem 1.5rem 1.5rem;
	border: solid 1px #55c3e9;
	border-top-width: 3px;
	border-radius: 0 0 0.5rem 0.5rem;
	background: #fff;
}
.mapwin.scooters ul.bikes > li + li {
	margin-top: 1rem;
}
.mapwin.scooters ul.bikes table th {
	vertical-align: top;
	white-space: nowrap;
	padding-top: 1rem;
}
.mapwin.scooters ul.bikes table td {
	vertical-align: top;
	padding-top: 1.5rem;
	line-height: 1.3;
}
.mapwin.scooters ul.bikes figure {
	display: inline-block;
	vertical-align: middle;
	width: 3rem;
	height: 3rem;
}
.mapwin.scooters ul.bikes a.btn {
	width: auto;
	min-width: auto;
	margin-left: 0.5rem;
	padding: 0 2.5em;
	white-space: nowrap;
}
/* 予約 */
.bikenum {
	display: flex;
	justify-content: center;
	text-align: left;
	font-size: 1.8rem;
}
.bikenum.reserved {
	font-size: 1.4rem;
}
.bikenum figure {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: 0.7rem;
}
.bikenum div {
	padding: 0.4rem 0;
}
.bikenum.reserved div {
	padding-top: 0.6rem;
}
.mapwin.selectendport {
	bottom: auto;
	top: 0;
	width: calc(100% - 2rem);
	margin: 1rem;
	border-radius: 0.5rem;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
	z-index: 0;
}
.mapwin.reservation .accent {
	padding: 1.5rem 0 2rem;
}
/* 利用開始 */
.mapwin.selectplan {
	top: 15%;
	bottom: auto;
	height: 85%;
    max-height: 85%;
}
.mapwin.selectplan2 {
	top: 15%;
	bottom: auto;
	height: 85%;
    max-height: 85%;
	overflow: auto
	/* display: none !important; */
}
.mapwin.selectplan .nouse-coupon {
	display: none;
	margin-top: 1rem;
}
/* クーポンを使う */
.mapwin.usecoupon {
	top: 15%;
	bottom: auto;
	height: 85%;
  max-height: 85%;
}
.mapwin.usecoupon .mapwinhead {
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}
.mapwin.usecoupon .readmore {
	margin-bottom: 1rem;
}
/* 利用中 */
.mapwin.onboard {
	bottom: auto;
	top: 0;
	width: calc(100% - 2rem);
	margin: 1rem;
	border-radius: 0.5rem;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
  z-index: 0;
}
.mapwin.onboard a {
	padding: 1rem;
	font-weight: bold;
	text-decoration: none;
	color: #eb0000;
	white-space: nowrap;
	float: right;
}
/* 利用終了 */
.mapwin.stopboarding {
	top: 15%;
	bottom: auto;
	height: 85%;
  max-height: 85%;
}
.overlayinn.attention figure {
	width: 6rem;
	margin: 0 auto;
}
.overlayinn.attention h2 {
	margin-bottom: 1em;
	font-size: 1.1em;
	color: #eb0000;
}
.overlayinn.attention button.btn {
	background: #eb0000;
}
/* 利用終了 - QRコード使用時 */
.mapwin.stopboarding-qr button.qr {
	width: 110px;
	height: 110px;
	margin-bottom: 1.5rem;
	border-radius: 55px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
/* 利用終了 - 成功 */
.mapwin.thanks .bikenum div:first-of-type {
	margin-right: 1em;
}
.mapwin.thanks .bikenum figure:last-of-type {
	margin-right: 0;
	padding-top: 0.1rem;
}
.mapwin.thanks .bikenum div:last-of-type {
	padding-top: 0.5rem;
	font-size: 0.85em;
}
.mapwin.thanks h2 {
	margin: 2rem 0;
	font-size: 1.25em;
}
.mapwin.thanks table {
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}
.mapwin.thanks table th,
.mapwin.thanks table td {
	vertical-align: top;
	line-height: 1.2;
}
.mapwin.thanks table tr:first-of-type th,
.mapwin.thanks table tr:first-of-type td {
	padding-bottom: 1rem;
}
.mapwin.thanks table th {
	white-space: nowrap;
}

/* ==========
overlay
========== */
.overlay {
	position: relative;
	z-index: 1;
	display: none;
  min-height: 100vh; /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}
.overlay > div {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.overlay div.overlayinn {
	position: relative;
	width: 80%;
	min-width: 300px;
	max-width: 600px;
	max-height: 90%;
	background: #fff;
}
.overlay div.overlayinn > div {
	overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-block: contain;
  overscroll-behavior-inline: contain;
  overscroll-behavior-y: contain;
	height: 100%;
	padding: 2rem;
	box-sizing: border-box;
}
.overlay div.overlayinn button {
	width: 85%;
	max-width: 450px;
}
.overlay div.overlayinn button.closebtn {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
}
.mypage .overlayinn h2,
.mypage-user .overlayinn h2,
.mypage-credit .overlayinn:not(.cvc) h2 {
	font-size: 1.6rem;
}
.mypage .overlay div.overlayinn:not(.attention) button.btn,
.mypage-user .overlay div.overlayinn button.btn,
.mypage-credit .overlay div.overlayinn:not(.cvc) button.btn {
	width: 100%;
	height: 4.4rem;
	line-height: 4.4rem;
	border-radius: 2.2rem;
}
/* クーポン */
.overlay div.showcoupon {
	width: 100%;
	margin: 0 1rem;
	background: none;
}
.overlay div.showcoupon h2 {
	font-size: 1.35rem;
}
.overlay div.showcoupon > div {
	padding: 0;
}
.overlay div.showcoupon button.closebtn {
	top: -3rem;
	right: 0;
  pointer-events: none;
}
div.showcoupon.couponpage ul.coupon_list > li > div::before,
div.showcoupon.couponpage ul.coupon_list > li > div::after {
	background: #808080;
}

/* ==========
menu
========== */
.overlay div.overlayinn.menu {
	position: absolute;
	left: 110%;
	width: 80%;
	height: 100%;
	max-width: none;
	max-height: none;
	text-align: left;
	background: #f9faf6;
	transition: left 0.5s;
}
.overlay div.overlayinn.menu.on {
	left: 20%;
	transition: left 0;
}
.overlay div.overlayinn.menu > div {
	padding: 0;
}
.menuhead,
.menubody {
	padding: 2rem 2.5rem;
}
.menuhead {
	background: #55c3e9;
	color: #fff;
}
.menuhead .name {
	display: flex;
	align-items: center;
	margin-bottom:1rem;
	line-height: 1.3;
	font-size: 1.6rem; /* font-size */
	font-weight: bold;
}
.menuhead .name > div {
	overflow: hidden;
	flex-shrink: 0;
	width: 5rem;
	height: 5rem;
	margin-right: 1rem;
	border-radius: 2.5rem;
	border: solid 2px #fff;
	box-sizing: border-box;
}
.menuhead .fee {
	font-size: 1.2rem;
}
.menubody li + li {
	margin-top: 2rem;
}
.menubody li:nth-child(3){
	padding-bottom: 2rem;
	border-bottom: solid 1px #55c3e9;
}
.menubody li a {
	display: flex;
	align-items: center;
	text-decoration: none;
	font-size: 1.1em; /* font-size */
	color: #595959;
}
.menubody li a figure {
	width: 2.4rem;
	height: 2.4rem;
	margin-right: 1rem;
}
.overlay div.overlayinn.menu .closebtn {
	top: 28px;
	right: 100%;
	width: 36px;
	height: 36px;
	border-radius: 5px 0 0 5px;
	background: #55c3e9;
}

/* 通信中アニメーション */
.loadinganim_layer {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  display: none;
}

.loadinganim_layer .loadinganim {
  position: fixed;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: transparent;
  border-radius: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loadinganim_layer .loadinganim .loader {
  display: inline-block;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  transform: translateZ(0);
  -webkit-animation: loadinganim 1s infinite linear;
  animation: loadinganim 1s infinite linear;
  text-indent: -9999px;
  overflow: hidden;
}

@-webkit-keyframes loadinganim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loadinganim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#page_loading {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: white;
  display: block;
}

#page_loading .page_loading_anim {
  position: fixed;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: transparent;
  border-radius: 10px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#page_loading .page_loading_anim .loader {
  display: inline-block;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 4px solid #ccc;
  border-radius: 50%;
  border-top-color: transparent;
  transform: translateZ(0);
  -webkit-animation: loadinganim 1s infinite linear;
  animation: loadinganim 1s infinite linear;
  text-indent: -9999px;
  overflow: hidden;
}


.mapwin {
  z-index: 1;
}
.mapwin.usecoupon {
  z-index: 2;
}


/* ポップアップ(注意喚起) */
.notes {
	/* display: flex; */
	/* justify-content: center; */
	font-size: 12pt;
	font-weight: bold;
	padding-top: 1rem;
	padding-bottom: 1rem;
	/* padding-left: 0.5rem; */
}
/* .notes-red {
	color: red;
	text-decoration: underline;
} */
.howtobox1 {
	display: flex;
	font-size: 14pt;
	font-weight: bold;
	/* color: red; */
	text-align: left;
	padding-top: 1.8rem;
	padding-bottom: 0.4rem;
	padding-left: 3rem;
}
.howtobox2 {
	display: flex;
	font-size: 14pt;
	font-weight: bold;
	/* color: red; */
	text-align: left;
	padding-top: 0.5rem;
	padding-bottom: 1rem;
	padding-left: 3rem;
}
.comment {
	font-size: 11pt;
	font-weight: bold;
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
}