@charset 'utf-8';

/* -------------------------------------------------------- 
	デフォルトスタイル 
 -------------------------------------------------------- */

html, body, noscript, div, span, blockquote, q, form, fieldset, legend,
h1, h2, h3, h4, h5, h6, address, p, pre, menu, ul, ol, li, dl, dt, dd,
table, caption, colgroup, col, thead, tfoot, tbody, tr, th, td, hr,
em, strong, abbr, acronym, dfn, cite, code, var, kbd, samp, bdo, sup, sub,
big, small, b, i, s, u, tt, a, label, br, img, object, iframe, ins, del,
section, nav, article, aside, header, footer, details, summary, figure, figcaption,
time, mark, ruby, rt, rp, wbr, embed, video, audio, source, canvas {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
	word-wrap: break-word;
	word-break: break-all;
	vertical-align: baseline;
	background: transparent;
	border: none;
	outline: none;
}

html, body {
	width: 100%;
	height: 100%;
}

html {
	overflow-x: hidden;
	overflow-y: scroll;
}

body {
	min-height: 100%;
	color: #333;
	line-height: 1.1;
	background: #EEE repeat center top;
	position: relative;
	-webkit-text-size-adjust: 100%;
}

body, input, textarea, select {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Tahoma', 'Verdana', sans-serif;
}

	label, input[type='radio'], input[type='checkbox'], input[type='image'],
	input[type='button'], input[type='submit'], input[type='reset'], button {
		cursor: pointer;
	}

section, nav, article, aside, header, footer,
details, summary, figure, figcaption, menu {
	display: block;
}

ul, ol {
	list-style: none;
}

li {
	list-style-position: outside;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img, input {
	vertical-align: top;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	cursor: help;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

:focus {
	outline: none;
}

::placeholder {
	color: #999;
}

a:link, a:visited {
	color: #F30;
	text-decoration: none;
}

a:hover {
	color: #F30;
	text-decoration: underline;
}

video::-webkit-media-controls-enclosure {
	overflow: hidden;
}

video::-webkit-media-controls-panel {
	width: calc(100% + 33px);
}

br.clear, a[name='anchor'] {
	content: '.';
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 150%;
	white-space: nowrap;
	display: block !important;
	overflow: hidden !important;
	visibility: hidden !important;
	float: none;
	clear: both;
}


/* -------------------------------------------------------- 
	ヘッダー / フッター / アーティクル 
 -------------------------------------------------------- */

header {
	width: 100%;
	padding: 15px 0;
	background: #FFF;
	box-shadow: 0 3px 3px rgb(0 0 0 / 1%);
}

	header .mainTitle {
		max-width: 1080px;
		margin: 0 auto;
		padding: 0 9px;
		font-size: 90%;
		box-sizing: border-box;
		position: relative;
	}

		header .mainTitle * {
			display: inline-block;
		}

		header .mainTitle h1 {
			width: 150px;
		}

		header .mainTitle p {
			display: none;
		}

		header .mainTitle img {
			width: 100%;
		}

		header .mainTitle .test {
			line-height: 15px;
			position: absolute;
			top: 9px;
			right: 9px;
		}

footer {
	width: 100%;
	padding: 24px 0;
	background: #FFF;
	box-shadow: 0 -3px 3px rgb(0 0 0 / 1%);
	position: absolute;
	bottom: 0;
}

	footer > * {
		font-size: 75%;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
	}

	footer ul {
		margin: 0 auto 9px;
		letter-spacing: -0.45em;
	}

	footer li {
		padding: 0 9px;
		letter-spacing: 0;
		border-left: 1px #CCC solid;
		display: inline-block;
	}

		footer li:first-child {
			border-left: none;
		}

		footer li a {
			color: #000 !important;
		}

article {
	width: calc(100% - 90px);
	padding: 30px;
	background: #FFF;
	border-radius: 15px;
	box-shadow: 0 0 9px rgba(0,0,0,0.1);
	transition: all 0.25s;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
}

@media screen and (max-width:1024px) {
	body {
		height: auto !important;
		overflow-x: hidden !important;
	}

	header {
		padding: 17.5px 0 !important;
		text-align: center !important;
		background: transparent !important;
		box-shadow: none !important;
	}

		header .mainTitle .test {
			font-size: 75% !important;
			text-decoration: none !important;
			top: -12.5px !important;
			right: 5px !important;
		}

	footer {
		display: none !important;
		visibility: hidden !important;
	}

	article {
		width: 100% !important;
		min-height: calc(100vh - 69px);
		margin: 0 !important;
		padding: 0 0 15px !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		opacity: 1.0 !important;
		overflow: visible !important;
		position: relative !important;
		z-index: 10 !important;
		top: auto !important;
		left: auto !important;
	}
}


/* -------------------------------------------------------- 
	ログイン・会員登録 
 -------------------------------------------------------- */

article.user {
	width: 390px;
	opacity: 0;
}

#userLogin .process,
#userRegist .process.sms {
	height: 0 !important;
	margin: 15px 0 0;
	padding: 0 !important;
	overflow: hidden;
}

#userRegist .process {
	margin: -30px -30px 30px;
	padding: 30px 60px 15px;
	background: #F9F9F9;
	align-items: center;
	justify-content: center;
	display: flex;
}

	#userLogin .process li,
	#userRegist .process li {
		width: 100%;
		margin: 7.5px 0;
		text-align: center;
		position: relative;
	}

		#userLogin .process li:first-child,
		#userRegist .process li:first-child {
			width: auto !important;
		}

		#userLogin .process li:before,
		#userLogin .process li:after,
		#userRegist .process li:before,
		#userRegist .process li:after {
			content: '';
			background: #D9D9D9;
			vertical-align: middle;
			display: inline-block;
		}

		#userLogin .process li.now:before,
		#userLogin .process li.now:after,
		#userRegist .process li.now:before,
		#userRegist .process li.now:after {
			background: #F83 !important;
		}

		#userLogin .process li:before,
		#userRegist .process li:before {
			width: calc(100% - 15px);
			height: 3px;
		}

		#userLogin .process li:first-child:before,
		#userRegist .process li:first-child:before {
			display: none !important;
		}

		#userLogin .process li:after,
		#userRegist .process li:after {
			width: 5px;
			height: 5px;
			padding: 5px;
			border-radius: 50%;
		}

	#userLogin .process span,
	#userRegist .process span {
		width: 45px;
		margin: -15px 0 0 -15px;
		font-size: 75%;
		line-height: 0.75;
		display: inline-block;
		position: absolute;
	}

#userLogin dl,
#userRegist dl {
	display: none;
}

	#userLogin dl.step1,
	#userRegist dl.step1 {
		display: block;
	}

	#userLogin dl:not(.step1),
	#userRegist dl:not(.step3,.step4) {
		padding: 30px 0;
	}

#userLogin dt,
#userRegist dt {
	margin: 0 0 20px;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
}

	#userLogin dt:nth-child(3),
	#userRegist dt:nth-child(3) {
		max-width: 275px;
		margin: 25px auto 0;
		padding: 25px 0 0;
		border-top: 2px #DDD dotted;
	}

	#userLogin dt b,
	#userRegist dt b {
		margin-top: 7.5px;
		color: #7F5F3F;
		font-size: 105%;
		display: block;
	}

	#userLogin dt i,
	#userRegist dt i {
		margin-top: 5px;
		color: #F00;
		font-size: 50%;
		display: block;
	}

#userLogin dd,
#userRegist dd {
	margin: 0 9% 15px;
	font-size: 90%;
}

	#userLogin dd span,
	#userRegist dd span {
		margin-top: 20px;
		display: block;
	}

	#userLogin dd strong,
	#userRegist dd strong {
		margin: 0 0 10px;
		color: #3F3F3F;
		font-size: 105%;
		display: block;
	}

	#userLogin dd em,
	#userRegist dd em {
		margin-left: 7.5px;
		color: #F00;
		font-size: 87.5%;
		font-weight: normal;
	}

	#userLogin dd label,
	#userRegist dd label {
		max-width: 275px;
		padding: 5px 2.5px;
		font-size: 97.5%;
		box-sizing: border-box;
	}

	#userLogin dd label {
		margin: 10px auto 0;
		display: block;
	}

	#userRegist dd label {
		margin: 0 5% 5px 0;
		display: inline-block;
	}

	#userLogin dd button,
	#userRegist dd button,
	#userLogin dd input:not([type='checkbox']),
	#userRegist dd input:not([type='radio']),
	#userLogin dd p.caution,
	#userRegist dd p.caution {
		width: 100%;
		margin: 15px auto 0;
		background: #FFF;
		border: 1px #CCC solid;
		box-sizing: border-box;
		display: block;
	}

	#userLogin dd button,
	#userRegist dd button,
	#userLogin dd [type='submit'],
	#userRegist dd [type='submit'] {
		max-width: 250px !important;
		padding: revert !important;
		font-size: 100% !important;
		font-weight: bold !important;
		line-height: 40px !important;
		border-radius: 25px !important;
	}

		#userLogin dd button.or,
		#userRegist dd button.or,
		#userLogin dd [type='submit'].or,
		#userRegist dd [type='submit'].or {
			color: #FFF;
			background: #F93;
			background: -webkit-linear-gradient(#FA3,#F83);
			background: -moz-linear-gradient(#FA3,#F83);
			background: linear-gradient(#FA3,#F83);
			border: none;
		}

		#userLogin dd button.pk,
		#userRegist dd button.pk,
		#userLogin dd [type='submit'].pk,
		#userRegist dd [type='submit'].pk {
			color: #FFF;
			background: #F6B;
			background: -webkit-linear-gradient(#F8B,#F4B);
			background: -moz-linear-gradient(#F8B,#F4B);
			background: linear-gradient(#F8B,#F4B);
			border: none;
		}

		#userLogin dd button.gr,
		#userRegist dd button.gr,
		#userLogin dd [type='submit'].gr,
		#userRegist dd [type='submit'].gr {
			color: #3F3F3F;
			background: #F0F0F0;
			background: -webkit-linear-gradient(#FFF,#DDD);
			background: -moz-linear-gradient(#FFF,#DDD);
			background: linear-gradient(#FFF,#DDD);
			border: 1px #DFDFDF solid;
		}

		#userLogin dd [type='submit'].res,
		#userRegist dd [type='submit'].res {
			color: #F00 !important;
			font-size: 13.5px !important;
		}

	#userLogin dd input:not([type='checkbox']),
	#userRegist dd input:not([type='radio']),
	#userLogin dd p.caution,
	#userRegist dd p.caution {
		max-width: 275px;
		padding: 7.5px;
		font-size: 92.5%;
		border-radius: 5px;
	}

#userRegist dl:not(.step1,.step2) input:not([type='radio']) {
	max-width: 100%;
	margin-top: -2.5px;
}

#userLogin dd input:not([type='checkbox']).error,
#userRegist dd input:not([type='radio']).error {
	background-color: #FDD !important;
	border-color: #F00 !important;
}

#userLogin dd input[type='checkbox'],
#userRegist dd input[type='radio'] {
	margin: 0 5px 0 0;
	display: inline-block;
}

#userLogin dd p.caution,
#userRegist dd p.caution {
	height: 90px;
	word-break: normal;
	overflow: hidden;
	overflow-y: scroll;
}

	#userLogin dd p.caution > b,
	#userRegist dd p.caution > b {
		color: #333;
		font-size: 105%;
	}

	#userLogin dd p.caution > i,
	#userRegist dd p.caution > i {
		color: #F00;
		font-style: normal;
	}

#userLogin dd p.sub,
#userRegist dd p.sub {
	max-width: 260px;
	margin: 20px auto 0;
	color: #666;
	font-size: 87.5%;
	text-align: center;
	position: relative;
}

	#userLogin dd p.sub > a,
	#userRegist dd p.sub > a {
		margin: 1.5px;
		color: #333;
		text-decoration: underline;
		display: inline-block;
	}

		#userLogin dd p.sub > a:first-child,
		#userRegist dd p.sub > a:first-child {
			margin: -5px auto 10px;
			font-weight: normal;
		}

		#userLogin dd p.sub > a.girl {
			margin-right: 15px;
			color: #F39;
		}

		#userLogin dd p.sub > a.shop {
			margin-left: 15px;
			color: #F73;
		}

#userLogin.shop dt > span,
#userLogin.girl dt > span {
	padding: 0 7.5px 0 25px;
	background: transparent no-repeat 0 25%;
	background-size: auto 82.5%;
	display: inline-block;
}

#userLogin.shop dt > span {
	background-image: url('../img_common/shop.svg');
}

#userLogin.girl dt > span {
	background-image: url('../img_common/girl.svg');
}

@media screen and (max-width:1024px) {
	#userLogin .process,
	#userRegist .process,
	#userRegist .process.sms {
		margin: 0 0 30px;
		padding: 30px 45px 15px;
	}

	#userLogin dl,
	#userRegist dl {
		padding: 0 !important;
	}

	#userLogin dt,
	#userRegist dt {
		font-size: 135% !important;
	}

	#userLogin dd,
	#userRegist dd {
		font-size: 87.5% !important;
	}

	#userLogin.shop dt > span,
	#userLogin.girl dt > span {
		background-size: auto 90% !important;
	}
}


/* -------------------------------------------------------- 
	利用規約 
 -------------------------------------------------------- */

article.rule {
	width: 900px;
	opacity: 0;
}

.ruleTitle,
.ruleText {
	max-width: 850px;
	padding: 15px 25px;
}

.ruleTitle {
	font-size: 180%;
	text-align: center;
}

.ruleText * {
	color: #3F3F3F;
	line-height: 1.2;
	display: block;
	position: relative;
}

.ruleText strong {
	margin-top: 5px;
	font-size: 120%;
}

.ruleText em {
	margin-top: 15px;
	font-size: 105%;
}

.ruleText span {
	margin: 7.5px;
	font-size: 90%;
}

	.ruleText span.num {
		padding-left: 17.5px;
		padding-right: 5px;
	}

	.ruleText span i {
		position: absolute;
		left: 0;
	}

@media screen and (max-width:1024px) {
	.ruleTitle {
		padding: 30px 15px 15px;
		font-size: 135%;
	}

	.ruleText {
		padding: 15px;
		font-size: 90%;
	}

		.ruleText strong {
			margin-top: 0;
			font-size: 105%;
		}
}