@charset "UTF-8";

/*--------------- membership ---------------*/

#main h1{
	font-size:1.8em;
	margin-bottom: 1em;
	letter-spacing: 0.2em;
}
#main h1 + .illust{
	margin-bottom: 1em;
}
#main > .inner{
	padding-top:20px;
}

#membership-login .swpm-login-widget-form,
#password-reset .swpm-pw-reset-widget-form {
	border:1px solid #ccc;
	padding:30px 40px;
	margin: 0 auto;
	width:400px;
	border-radius: 10px;
	background-color:#f9f9f9;
}

#membership-login .newmemberarea{
	background-color: #fdecf5;
	width:100%;
	border:none;
	border-radius: 0;
}

#membership-login input[type="text"],
#membership-login input[type="password"],
#password-reset input[type="text"]{
	font-size:1.1em;
	padding:0.5em;
	margin-top: 0.5em;
	width:100%;
}


#membership-login .swpm-login-widget-form .swpm-login-form-submit,
#membership-login .swpm-login-widget-form #register,
#membership-registration .swpm-registration-submit,
#membership-profile .swpm-edit-profile-submit,
#password-reset .swpm-pw-reset-submit{
	display: block;
	width:320px;
	padding:0.4em 1em;
	border-style:none;
	font-size:1.2em;
	background-color: #e5006a;
	color:#fff;
	letter-spacing: 0.1em;
	cursor: pointer;
	border:1px solid #e5006a;
	border-radius: 3px;
	margin: 30px auto;
	text-align: center;
}

/*
#membership-join #main h1{
	font-size:2em;
	padding:1.5em 0 1em;
}
*/
#membership-join #privilege .flex{
	counter-reset: number 0;
}
#membership-join #privilege .flex > div{
	border:1px solid #ccc;
	padding:40px 20px 20px;
	margin:0 0 30px;
	position: relative;
}
#membership-join #privilege .flex > div::before{
	counter-increment: number 1;
	content: counter(number);
	display: flex;
	justify-content: center;
	align-items: center;
	width:2.2em;
	height: 2.2em;
	margin: 0 auto;
	position: absolute;
	border:3px solid #000;
	border-radius: 100%;
	font-size:1.4em;
	font-weight: bold;
	top:10px;
	left: 10px;
}
#membership-join #privilege h2{
	font-size:1.2em;
	padding:1.5em 0;
	position: relative;
	color:#e5006a;
}
#membership-join #privilege h2::after{
	content: '';
	display: block;
	width:0;
	height: 0;
	border:solid 15px transparent;
	border-top:solid 20px #000;
	position: absolute;
	left:calc(50% - 15px);
	bottom:-1em;
}
#membership-join #privilege .flex > div .illust{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 10px;
	height: 200px;
}
#membership-join #privilege .flex > div p{
	font-size: 0.95em;
}

#membership-login .swpm-login-widget-form .swpm-forgot-pass-link,
#membership-login .swpm-login-widget-form .swpm-join-us-help{
	margin-bottom: 0.5em;
}
#membership-login .swpm-login-widget-form .swpm-forgot-pass-link .swpm-login-form-pw-reset-link,
#membership-login .swpm-login-widget-form .swpm-join-us-help .swpm-login-form-register-link{
	color:#e5006a;
	text-align: left;
}
#membership-login .swpm-login-widget-form .swpm-forgot-pass-link .swpm-login-form-pw-reset-link::before,
#membership-login .swpm-login-widget-form .swpm-join-us-help .swpm-login-form-register-link::before{
	content: '\e910';
	font-size: 0.8em;
	font-family: 'ico';
	margin-right: 0.3em;
}

.swpm-username-input{
	margin-bottom: 20px;
}

#membership-join a.btn.join{
	margin: 20px auto;
	background-color:#e5006a;
	color:#fff;
/*	color:#e5006a;*/
	border:none;
}
#membership-join a.btn,
#unsubsribe #continue a.btn{
	display: block;
	width:300px;
	margin:10px;
	padding:1em;
/*	color:#e5006a;*/
	border:1px solid #ccc;
	background-color:#fff;
	border-radius: 2em;
	position: relative;
}
#membership-join a.btn::after ,
#unsubsribe #continue a.btn::after {
	content: '\e902';
	font-family: 'ico';
	position: absolute;
	right: 1em;
	top: calc(50% - 1em);
}

#membership-join #already,
#unsubsribe #continue{
	background-color:#fdecf5;
}
#membership-join #already h2,
#unsubsribe #continue h2{
	display: inline-block;
	margin-bottom: 1em;
	font-size: 1.2em;
}
#membership-join #already p,
#unsubsribe #continue p{
	width:24%;
	max-width: 260px;
}
#membership-join #already a.btn,
#unsubsribe #continue a.btn{
	width: 100%;
	padding: 0.8em;
}

#membership-registration #main h1{
	font-size:2em;
	padding:0 ;
}
#membership-registration #main h1 + p + p.note{
	font-size: 1em !important;
	margin:0 auto 2em;
	color:#c1272d;
}
#membership-registration #main p.note{
	font-size: 0.9em;
}
#membership-registration #main table,
#membership-profile #main table{
	width:80%;
	margin: 10px auto;
}
#membership-registration #main tr,
#membership-profile #main tr{
	border-bottom:1px solid #ccc;
}
#membership-registration #main th,
#membership-registration #main td,
#membership-profile #main th,
#membership-profile #main td{
	text-align: left;
	padding:1em 0;
}
#membership-registration #main th,
#membership-profile #main th{
	width:33%;
}
#membership-registration #main th label.required::after,
#membership-profile #main th label.required::after{
	content: '※';
	margin-left: 0.2em;
	font-size: 0.8em;
	position: relative;
	top:-0.2em;
	color:#c1272d;
}
#membership-registration #main td,
#membership-profile #main td{
	vertical-align: middle;
	position: relative;
}
#membership-registration #main td select,
#membership-registration #main td input,
#membership-profile #main td select,
#membership-profile #main td input{
	font-size:1.1em;
	padding:0.5em;
}
#membership-registration #main td p.flex,
#membership-profile #main td p.flex{
	justify-content: flex-start;
}
#membership-registration #main td select,
#membership-profile #main td select{
	width: 31%;
	margin-right: 1%;
}

#membership-registration #main p.numrow{
	margin-bottom: 1em;
}
#membership-registration #main .numrow input,
#membership-profile #main .numrow input{
	width:30%;
}
#membership-registration #main .numrow input:not(:last-child),
#membership-profile #main .numrow input:not(:last-child){
	margin-right: 0.2em;
}

#membership-registration #main th span.note,
#membership-registration #main td span.note,
#membership-profile #main th span.note,
#membership-profile #main td span.note{
	display: block;
	font-size: 0.85em;
	color:#666;
}
#membership-registration #main td span.note,
#membership-profile #main td span.note{
	margin-top: 0.8em;
}

#membership-registration #message.updated{
	padding:40px 0 60px;
}
#membership-registration #message.updated .swpm-registration-success-msg a{
	width:15em;
	display: block;
	margin:2em auto 0;
	padding:0.8em 2em;
	text-align: center;
	line-height: 1;
	border-radius: 2em;
	color: #fff !important;
	background-color: #ed64a9;
	font-size: 1rem;
	position: relative;
}
#membership-registration #message.updated .swpm-registration-success-msg a::after{
	content: '\e902';
	font-family: 'ico';
	position: absolute;
	right:0.5em;
	top:calc(50% - 0.5em);
}

#membership-registration #message.error{
	color: #c1272d;
	font-weight:bold;
}

#kiyaku{
	margin: 30px auto 10px;
	width:100%;
	height: 300px;
	padding:20px;
	overflow-y: scroll;
	border:solid 2px #000;
}
#kiyaku + p span{
	display: inline-block;
}
#kiyaku + p span:first-child{
	width: 24em;
	font-weight: bold;
}
#kiyaku + p span:last-child input{
	margin-right: 10px;
}
#kiyaku a{
	text-decoration: underline;
}
.formError .formErrorContent {
	width: 18em !important;
}

#help #main .flex > div{
	border:1px solid #ccc;
	padding:20px;
	text-align: left;
	margin-bottom: 30px;
}
#help #main .flex > div .q{
	font-size: 1.1em;
	padding-bottom: 1em;
	font-weight: bold;
}
#help #main .flex > div a{
	color:#e5006a;
	text-decoration: none;
}
#help #main .illust{
	display: block;
	margin: 0 auto;
	text-align: center;
}
#help #main h1 + .illust{
	margin-bottom: 1rem;
}

#password-reset h1 + p{
	font-size: 1.05em;
	margin-bottom: 2em;
}

#unsubsribe #leave{
	display: block;
	width: 10em;
	margin:2em auto;
	padding:0.5em 0;
	font-size: 1.1em;
	background-color: #000;
	color: #fff;
	border-radius: 5px;
}


@media screen and (max-width:414px) {

	/*--------------- membership ---------------*/

	#main h1{
		letter-spacing: 0.1em;
	}
	#main h1 + .illust{
		width:90vw;
		margin:0 auto 1em;
	}
	#main h1 + .illust img{
		width:100%;
		height: auto;
	}

	#membership-login .swpm-login-widget-form,
	#password-reset .swpm-pw-reset-widget-form {
		width:90vw;
		padding:30px 15px;
	}
	#membership-login .newmemberarea{
		width:100%;
		padding:30px calc(5vw + 15px);
		border:none;
	}
	#membership-login input[type="text"],
	#membership-login input[type="password"],
	#password-reset input[type="text"]{
		font-size:1.1em;
		padding:0.5em;
		width:100%;
	}

	#membership-login .swpm-login-widget-form .swpm-login-form-submit,
	#membership-login .swpm-login-widget-form #register,
	#membership-registration .swpm-registration-submit,
	#membership-profile .swpm-edit-profile-submit,
	#password-reset .swpm-pw-reset-submit{
		width:100%;
		padding:0.5em 0;
		font-size:1.4em;
		margin: 1em auto;
	}

/*
	#membership-join #main h1{
		font-size:2em;
		padding:1.5em 0 1em;
	}
*/

	#membership-join #privilege .flex > div{
		border:1px solid #ccc;
		padding:15px;
		margin:0 0 30px;
	}
	#membership-join #privilege .flex > div::before{
		width:1.8em;
		height: 1.8em;
		font-size:1.3em;
		top:7px;
		left: 7px;
	}

	#membership-join #privilege h2::after{
		bottom:-1.5em;
	}
	#membership-join #privilege .flex > div .illust{
		min-height: 0;
		height: 45vw;
		padding:25px 0 0;
	}
	#membership-join #privilege .flex > div:nth-child(n+3) .illust{
		height: 30vw;
	}
	#membership-join #privilege .flex > div .illust img{
		width: auto;
		height: 100%;
	}
	#membership-join #privilege .flex > div .illust + p{
		font-size: 0.9em;
		text-align: left;
	}


	#membership-join a.btn.join{
		width:20em;
		font-size: 1.1em;
	}

	#membership-join #already p,
	#unsubsribe #continue p{
		width:100%;
		max-width: 20em;
		margin: 5px auto;
	}
	#membership-join #already a.btn,
	#unsubsribe #continue a.btn{
		margin: 0;
	}

/*
	#membership-registration #main h1{
		font-size:2em;
		padding:0 0 0.5em;
	}
	#membership-registration #main p.note{
		font-size: 0.9em;
	}
*/
	#membership-registration #main table,
	#membership-profile #main table{
		width:90vw;
		margin: 2em auto 0;
		border-top:1px solid #ccc;
	}
	#membership-registration #main tr,
	#membership-profile #main tr{
		border-bottom:1px solid #ccc;
	}
	#membership-registration #main th,
	#membership-registration #main td,
	#membership-profile #main th,
	#membership-profile #main td{
		width: 100%;
		display: block;
		text-align: left;
		padding:1em 0 0.2em;
	}
	#membership-registration #main td,
	#membership-profile #main td{
		padding:0.5em 0 1em;
	}
	#membership-registration #main td select,
	#membership-registration #main td input,
	#membership-profile #main td select,
	#membership-profile #main td input{
		width: 100%;
		font-size:1.2em;
		padding:0.5em;
	}
	#membership-registration #main td .flex select,
	#membership-profile #main td .flex select{
		margin-bottom: 0.5em;
	}

	#kiyaku + p span:last-child input{
		width:auto !important;
	}

	#help #main h1 + .illust{
		margin-bottom: 1rem;
	}
	#help #main .flex > div{
		width:100%;
		position: relative;
		min-height: 25vw;
		padding-left: 30vw;
	}
	#help #main .flex > div .illust{
		width: 30vw;
		position: absolute;
		left:-1vw;
		top:calc(50% - 15vw);
	}
	#help #main .illust img{
		width:100%;
		height: auto;
	}
	#help #main .flex > div .q{
		font-size: 1.1em;
		padding-bottom: 1em;
		font-weight: bold;
	}
	#help #main .flex > div a{
		color:#e5006a;
		text-decoration: none;
	}

	#password-reset h1 + p{
		font-size: 1.05em;
		margin-bottom: 2em;
	}

	#unsubsribe #leave{
		display: block;
		width: 10em;
		margin:2em auto;
		padding:0.5em 0;
		font-size: 1.1em;
		background-color: #000;
		color: #fff;
		border-radius: 5px;
	}


}