@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	ファンクラブ

//////////////////////////////////////////////////////////////////////////////*/


/*------------------------------------------------------------------------------

	共通

------------------------------------------------------------------------------*/

main .contents {
	padding-bottom: 0;
}


/*------------------------------------------------------------------------------

	概要

------------------------------------------------------------------------------*/

/* 冒頭文
------------------------------------------------------------------------------*/

main .beginning .recruitment {
	position: relative;
	padding: 4.75em 4.75em 6.125em;
	background-color: #FFF;
}

main .beginning .recruitment header {
	display: block;
	position: absolute;
	top: -1em;
	left: 4.75em;
	width: 24em;
	height: 24em;
	padding: 2.5em 4.375em;
	background-color: rgba(250,237,0,1);
}

main .beginning .recruitment header > span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

main .beginning .recruitment header > span::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -1.5em;
	background-image: url(../img/membership_fee.svg);
	background-repeat: no-repeat;
	width: 7em;
	height: 7em;
}

main .beginning .recruitment header h2,
main .beginning .recruitment header p {
	position: absolute;
	top: 0;
	writing-mode: vertical-rl;
}

main .beginning .recruitment header h2 {
	right: 0;
	margin-bottom: 0;
	text-align: left;
	font-size: 2em;
	line-height: 1.4;
	text-shadow: 1px 1px 0px rgba(38,161,214,1),-1px 1px 0px rgba(38,161,214,1),1px -1px 0px rgba(38,161,214,1),-1px -1px 0px rgba(38,161,214,1),1px 0px 0px rgba(38,161,214,1),0px 1px 0px rgba(38,161,214,1),-1px 0px 0px rgba(38,161,214,1),0px -1px 0px rgba(38,161,214,1);
	color: #FFF;
}

main .beginning .recruitment header p {
	left: -1em;
	font-weight: bold;
	color: rgba(38,161,214,1);
}

main .beginning .recruitment .line {
	display: block;
	font-feature-settings: normal;
}

main .beginning .recruitment header .symbol {
	-ms-text-combine-horizontal: all;
	-webkit-text-combine: horizontal;
	text-combine-upright: all;
}

main .beginning .explanation {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

body.en main .beginning .explanation {
	font-size: 1.142em;
}

main .beginning .explanation p {
	width: 40%;
	margin-top: 17em;
	font-size: 1.375em;
	font-weight: bold;
	line-height: 2;
	color: rgba(9,91,165,1);
}

main .beginning .explanation .benefits {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 60%;
	margin: 0;
	list-style: none;
}

main .beginning .explanation .benefits li {
	position: absolute;
	width: 230px;
	margin-bottom: 0;
}

main .beginning .explanation .benefits li:nth-child(1),
main .beginning .explanation .benefits li:nth-child(3) {
	bottom: 0;
}

main .beginning .explanation .benefits li:nth-child(1) {
	left: 0;
}

main .beginning .explanation .benefits li:nth-child(2) {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

main .beginning .explanation .benefits li:nth-child(3) {
	right: 0;
}

#content main .beginning .explanation .benefits li span {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 124.4%;
	overflow: visible;
}

main .beginning .explanation .benefits li span::after {
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

main .beginning .explanation .benefits li img {
	position: absolute;
	width: 50%;
	z-index: 1;
}

main .beginning .explanation .benefits .present img {
	top: 45%;
	left: -37%;
}

main .beginning .explanation .benefits .shopping img {
	top: 20%;
	left: -30%;
}

main .beginning .explanation .benefits .mail img {
	top: 30%;
	left: -25%;
}

main .beginning .explanation .benefits li span::after {
	content: "";
	width: 100%;
	height: 100%;
}

main .beginning .explanation .benefits .present span::after { background-image: url(../img/benefits_present.svg);}
main .beginning .explanation .benefits .shopping span::after { background-image: url(../img/benefits_shopping.svg);}
main .beginning .explanation .benefits .mail span::after { background-image: url(../img/benefits_mail.svg);}

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

main .beginning .recruitment header {
	left: 3em;
}

main .beginning .recruitment {
	padding: 3em 3em 5em;
}

main .beginning .recruitment header > span::before {
	left: -2em;
}

main .beginning .explanation .benefits li:nth-child(1) {
	left: 5%;
}

main .beginning .explanation .benefits li {
	width: 220px;
}

}

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

main .beginning .recruitment header {
	width: 22em;
	height: 22em;
	padding: 2em 4em;
}

main .beginning .explanation .benefits li {
	width: 40%;
}

main .beginning .explanation .benefits li:nth-child(1),
main .beginning .explanation .benefits li:nth-child(3) {
	bottom: -2%;
}

}

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

main .beginning .explanation .benefits li:nth-child(1) {
	bottom: 5%;
}

main .beginning .explanation .benefits li:nth-child(3) {
	bottom: 10%;
}

}

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

main .beginning .explanation .benefits li:nth-child(1) {
	left: 12%;
}

main .beginning .explanation .benefits li:nth-child(2) {
	left: 55%;
}

main .beginning .explanation .benefits li:nth-child(3) {
	bottom: 13%;
}

}

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

main .beginning .recruitment {
	padding: 1.5em;
}

main .beginning .recruitment header {
	position: relative;
	top: auto;
	left: auto;
	width: 90%;
	height: 72vw;
	margin: -3em auto 0;
	padding: 3em 2em 3em 3.5em;
}

main .beginning .recruitment header > span::before {
	left: -1.5em;
}

main .beginning .explanation p,
main .beginning .explanation .benefits {
	width: 100%;
}

main .beginning .explanation p {
	margin-top: 2em;
	text-align: center;
	line-height: inherit;
}

#content main .beginning .explanation .benefits li {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	transform: none;
	width: 60%;
}

main .beginning .explanation .benefits li:nth-child(1),
main .beginning .explanation .benefits li:nth-child(3) {
	bottom: 0;
}

main .beginning .explanation .benefits li:nth-child(2) {
	margin-top: -5vw;
	margin-bottom: 1em;
	margin-left: auto;
}

main .beginning .explanation .benefits li:nth-child(3) {
	margin-top: -10vw;
}

main .beginning .explanation .benefits .present img {
	top: 55%;
	right: -35%;
	left: auto;
}

main .beginning .explanation .benefits .mail img {
	top: 30%;
	right: -30%;
	left: auto;
}

}


/* キャンペーン
------------------------------------------------------------------------------*/

main .contents .campaign {
	position: relative;
	margin-bottom: 4em;
	padding: 4em 5em;
	background-color: #FFF;
}

main .contents .campaign::before {
	content: "期間限定";
	position: absolute;
	top: -1em;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	margin: 0 auto;
	padding: .5em 1em;
	background-color: rgba(235,103,113,1);
	text-align: center;
	line-height: 1;
	font-weight: bold;
	font-size: 1.25em;
	color: #FFF;
}

main .contents .campaign h2 {
	margin-bottom: 1em;
}

main .contents .campaign h2 span:first-child::after,
main .contents .campaign table th span:first-child::after {
	content: "・";
}

main .contents .campaign .group {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
}

main .contents .campaign .group .text {
	width: 75%;
}

main .contents .campaign .group figure {
	width: 22%;
	margin: 0;
}

main .contents .campaign table {
	margin-bottom: 0;
}

main .contents .campaign table th,
main .contents .campaign table td {
	padding: 1em .75em;
}

main .contents .campaign table th {
	white-space: nowrap;
	text-align: center;
}

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

main .contents .campaign {
	padding-right: 3em;
	padding-left: 3em;
}

}

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

main .contents .campaign {
	padding: 2.5em 1.5em 1.5em;
}

main .contents .campaign h2 span,
main .contents .campaign table th span {
	display: block;
	line-height: 1.4;
}

main .contents .campaign h2 span:first-child::after,
main .contents .campaign table th span:first-child::after {
	display: none;
}

main .contents .campaign .group .text {
	width: 100%;
}

main .contents .campaign .group figure {
	width: 70%;
	margin: 2em auto 0;
}

main .contents .campaign table th,
main .contents .campaign table td {
	font-size: 3vw;
}

}


/* 入会までの流れ
------------------------------------------------------------------------------*/

main .contents .flow {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	padding: 5em 6em 5em 4em;
}

main .contents .flow dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 22%;
	text-align: center;
	line-height: 1;
	font-size: 1.875em;
}

main .contents .flow dt span {
	position: relative;
	display: block;
}

main .contents .flow dt span::before {
	content: url(../img/logo_c.svg);
	display: block;
	width: 80%;
	margin: 0 auto .75em;
}

main .contents .flow dd {
	width: 72%;
	margin-bottom: 0;
}

main .contents .flow dd ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	list-style: none;
}

main .contents .flow dd li {
	position: relative;
	width: 29%;
	margin: 0;
	padding: 2em 2em 5em;
	background-color: #FFF;
	font-size: .875em;
	counter-increment: li_count;
}

main .contents .flow dd li::before {
	content: "STEP" counter(li_count);
	position: absolute;
	bottom: -.075em;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Oswald', sans-serif;
	line-height: 1;
	font-size: 3em;
	color: rgba(233,237,239,1);
}

main .contents .flow dd li::after {
	content: url(../../common/img/icon_arrow_w.svg);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -2.5em;
	width: 1em;
}

main .contents .flow dd li:last-child::after {
	display: none;
}

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

main .contents .flow {
	padding: 3em 0;
}

}

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

main .contents .flow dd li::after {
	right: -2.25em;
}

}

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

main .contents .flow dt {
	width: 100%;
	margin-bottom: 1.5em;
	font-size: 1.5em;
}

main .contents .flow dt span::before {
	width: 100%;
}

main .contents .flow dd {
	width: 100%;
}

main .contents .flow dd li {
	width: 30%;
}

}

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

main .contents .flow dd li {
	width: 100%;
	margin-bottom: 4em;
	padding-bottom: 4em;
}

main .contents .flow dd li:last-child {
	margin-bottom: 0;
}

main .contents .flow dd li::before {
	left: auto;
	transform: none;
	right: .5em;
}

main .contents .flow dd li::after {
	top: auto;
	right: auto;
	bottom: -3.15em;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}

}


/*------------------------------------------------------------------------------

	入会申請

------------------------------------------------------------------------------*/

main .membership {
	padding: 6.375em 0;
	background-color: #FFF;
}

main .membership h2 {
	margin-top: 3em;
}

main .membership section:first-of-type h2 {
	margin-top: 0;
}

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

main .membership {
	padding: 3em 0;
}

}


/* 個人情報保護方針
------------------------------------------------------------------------------*/

main .membership .privacy {
	margin: 2em 0;
	background-color: rgba(233,237,239,1);
	border: 1px solid rgba(0,0,0,.2);
}

main .membership .privacy h3 {
	position: relative;
	margin-bottom: 0;
	padding: 1em 2em;
	font-weight: bold;
}

main .membership .privacy h3::before,
main .membership .privacy h3::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

main .membership .privacy h3::after {
	display: block;
	content: '＋';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 400;
	border-left: 1px solid rgba(47,60,69,.25);
	width: 3.4em;
	text-align: center;
	overflow: hidden;
	line-height: 2.5em;
}

main .membership .privacy .opened::after {
	content: '－';
}

main .membership .privacy .privacy_detail {
	display: none;
	margin: .5em 2em 2em;
	padding: 0 2em 2em;
	background-color: rgba(255,255,255,1);
}

main .membership .privacy .privacy_detail > section {
	counter-increment: h4_count;
}

main .membership .privacy .privacy_detail h4 {
	margin-bottom: 1em;
	padding: 1.5em 0 .5em;
	border-bottom: 1px solid rgba(9,91,165,.5);
	color: rgba(9,91,165,1);
}

main .membership .privacy .privacy_detail h4::before {
	content: counter(h4_count) ". ";
}

main .membership .privacy .privacy_detail .ssl {
	display: flex;
	padding: .5em 0;
}

main .membership .privacy .privacy_detail .ssl h5 {
	padding-right: 1em;
	line-height: inherit;
	font-size: 1em;
	color: rgba(9,91,165,.8);
}

main .membership .privacy .privacy_detail dl {
	padding: 1em 1.5em;
	background-color: rgba(9,91,165,.05);
}

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

main .membership .privacy .privacy_detail {
	margin-right: 1em;
	margin-left: 1em;
	padding: 0 1.25em 1.25em;
}

}


/* 同意
------------------------------------------------------------------------------*/

main .membership .application .text {
	position: relative;
	padding: 3em;
	border: 1px solid #DDD;
}

main .membership .application .text::before,
main .membership .application .text::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	border-right: 1em solid transparent;
	border-left: 1em solid transparent;
}

main .membership .application .text::before {
	bottom: -1em;
	border-top: 1em solid #DDD;
}

main .membership .application .text::after {
	bottom: -.9em;
	border-top: 1em solid #FFF;
}

main .membership .application label {
	display: block;
	margin-top: 1.5em;
	padding: 1em 2em;
	background-color: rgba(247,233,120,1);
}

main .membership .application span {
	padding-left: .5em;
	font-weight: bold;
}

main .form_button {
	margin-top: 3em;
	opacity: .3;
}

main .form_button a {
	pointer-events: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 65%;
	margin: 0 auto;
	padding: 2.125em 3.5em;
	background-color: rgba(47,60,69,1);
	border-radius: .25em;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.125em;
	color: #FFF;
}

main .form_button.active {
	opacity: 1;
}

main .form_button.active a {
	pointer-events: auto;
}

main .form_button a::before {
	display: block;
	content: url(../img/logo_w.svg);
	width: 45%;
}

main .form_button a span {
	position: relative;
	display: block;
	width: 47%;
	line-height: 1;
}

main .form_button a span::after {
	content: url(../../common/img/icon_arrow_w.svg);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: .4em;
}

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

main .membership .application .text {
	padding: 1.5em;
}

main .form_button a {
	width: 100%;
	padding: 2em;
}

main .form_button a::before {
	width: 40%;
}

main .form_button a span {
	width: 52%;
}

}


/* メンテナンス告知メッセージ関係 */
.maintenance_info {
	margin: 1.5em 0;
	padding: 1.5em;
	border: 3px double #F00;
}

.maintenance_info dl {
	margin: 0 !important;
}

.maintenance_info dt {
	margin: 0 0 1em;
	padding: 0 0 0.25em;
	border-bottom: 1px solid #FF8282;
}

.maintenance_info dt.del {
	margin-bottom: 0.5em;
	padding-bottom: 0;
	border-bottom-color: #999;
}

.maintenance_info dd.del {
	margin: 0 0 1.5em;
}

.maintenance_info dd.del p {
	margin: 0;
	line-height: 1.5;
}

.maintenance_info del {
	color: #999;
	font-size: 12px;
}