@charset "utf-8";

/* =================================================

--------------------
THE YELLOW MONKEY SSL
-------------------

================================================= */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.sp { display: none !important; }
.sf-toolbar {display: none!important;}/* 開発用ツールバー非表示 */

/*  base
------------------------------ */
body {
	height: 100%;
	font-family: YakuHanJP, -apple-system, Helvetica, Arial, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','Noto Sans Japanese', "メイリオ", sans-serif;
	font-weight: 300;
	font-size: 14px;
	color: #222;
	background: transparent;
	word-break: break-word;
}
img{ width: 100% }
a {color: #222;	-webkit-transition: all .3s ease;transition: all .3s ease; text-decoration: none;}
a:hover {color: #999;}
.btn {text-align: center;}
.btn a, .btn input, .btn button {min-width: 250px; width: auto; display: inline-block;}
.section.mypage .menuList .btn a {width: 250px;}
.btn .main {
	background: #222;
	border: solid 1px #222;
	-webkit-transition: all .3s;
	transition: all .3s;
	cursor: pointer;
	border-radius: 0;
	font-size: 14px;
	padding: 12px 20px;
	box-sizing: border-box;
	color: #efeeea;
}
.btn .main:hover { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8); background: #222;}
.btn .sub {
	border: solid 1px rgba(150,150,150,0.3);
	background: transparent;
	-webkit-transition: all .3s;
	transition: all .3s;
	cursor: pointer;
	border-radius: 0;
	font-size: 14px;
	padding: 12px 20px;
	box-sizing: border-box;
	color: #222;
}
.btn .sub:hover { border-color: rgba(150,150,150,0.8); background: transparent; color: #222;}

.txt {margin: 0 0 15px;text-align: center;}
.bold {font-weight: bold;}
.blockTit {margin: 30px 0 15px;background: #8c886d;}
.lead { margin: 0 0 10px; font-size: 16px; }
.center {text-align: center;}
.rule {color: #9e9241;}
.fs10 {font-size: 10px;}
textarea{ width: 100%; border: 1px solid #ccc; padding: 8px; }
.mb10{ margin-bottom: 10px !important; }
.mb20{ margin-bottom: 20px !important; }
.mb30{ margin-bottom: 30px !important; }

/*  layout
------------------------------ */
#wrapper {
	width: 100%;
	min-height: 100%;
	padding:110px 0 300px;
	position: relative;
	box-sizing: border-box;
}
#wrapper:before {
	content: ' ';
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #EFEEEA;
	will-change: transform;
	z-index: -1;
		pointer-events: none;
}
#container {
	width: 950px;
	margin: 0 auto;
	padding: 0;
	background: transparent;
}
.single .section {padding: 50px;}


/*  header
------------------------------ */
header{
	height: 46px;
	line-height: 46px;
	width: 100%;
	min-width: 900px;
	position: fixed;
	top: 0;
	left: 0;
	transition: all .5s ease;
	z-index: 999;
	background: rgba(0,0,0,0.85);
	border-bottom: 1px solid rgba(255,255,255,0.1);
		display: flex;
	display:  webkit-flex;
}
header .header-cell {
	padding: 0 25px;
	border-left: 1px solid rgba(255,255,255,0.1);
}
header h1 {
	width: 10%;
	border: none;
	position: relative;
}
header h1 a {
	display: block;
	width: 116px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	line-height: 0;
}
header h1 svg *{fill: #9e9241;transition: all .3s ease;
-webkit-transition: all .3s ease;}
header h1 a:hover svg * {fill: #e2dbad;}
header .status-area {font-size: 12px;}
header .status-area span {
	color: #9e9241;
	margin-right: 1em;
}
header .status-area .number span{
	font-family: 'Cormorant Garamond', sans-serif;
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 0 5px;
}
header .nav--base li { display: inline-block;}
header .nav--base li:not(:last-child) {margin: 0 20px 0 0 ;}
header .nav--base li a { position: relative;}
header .nav--base li a::after {
	content: '';
	display: inline-block;
	width: 0;
	border-bottom: 1px solid;
	position: absolute;
	left: 0;
	bottom: -1px;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
header .nav--base li a:hover,
header .nav--base li.current a { color: #e2dbad; }
header .nav--base li a:hover::after,
header .nav--base li.current a::after { width: 100%; }
header .nav-wrap--member li a::after { bottom: -3px; }
/* longin */
header .nav--login {margin-left: auto;}
header .nav--login li a {
	font-size: 11px;
	color: #9e9241;
	display: inline-block;
	position: relative;
	top: -2px;
}
header .nav--login li a:hover {color: #e2dbad;}


/* footer
============================== */
footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #E8E6E0;
	padding: 60px 5%;
	padding: 60px calc(5% + 35px) 60px 5%;
	box-sizing: border-box;
}
footer { color: #888; }
footer svg * { fill: #888; }
footer a { color: #444; opacity: 0.6; text-decoration: none;}
footer a svg * { fill: #444; }
footer a:hover { opacity: 1; }
footer .nav--support {margin: 0 0 60px;}
footer .nav--support li { display: inline-block; }
footer .nav--support li::after {
	content: '/';
	margin: 0 1em;
	opacity: 0.5;
}
footer .nav--support li:last-child::after { content: none; }
footer .nav--support a { font-size: 11px;}
footer .nav--social {padding: 5px 0 0 ; float: right;}
footer .nav--social li {display: inline-block;}
footer .nav--social li a{
	display: block;
	padding: 0 8px;
	font-size: 18px;
}
.nav--social .material-icons {
	font-size: inherit;
	top: 2px;
	position: relative;
}
footer .nav--social li.icon--line{ position: relative; top: 4px;}
footer .nav--language {padding: 7px 40px 0 0; float: right;}
footer .nav--language li {display: inline-block;}
footer .nav--language li label{
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-family: 'Cormorant Garamond', sans-serif;
	font-weight: 600;
	border: 1px solid transparent;
	font-size: 11px;
	display: block;
	cursor: pointer;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
footer .nav--language li.current label,
footer .nav--language li label:hover {padding: 0; border-color :rgba(136, 136, 134, 0.5);}
footer .nav--language li input {display: none;}
footer .copyright {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.15em;
}

/* page-top */
.block--page-top {
	position: fixed;
	bottom: 55px;
	right: 35px;
	z-index: 1000;
	opacity: 1;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.block--page-top a{
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
	background: rgba(0,0,0,0.85);
}
.not-scrolled .block--page-top { opacity: 0; bottom: 45px;}
.block--page-top a::before {
	content: '';
	background: url(/static/theyellowmonkey/fanclub_v2/common/chevron_wht.png) no-repeat center center;
	background-size: 11px 9px;
	width: 100%;
	height: 100%;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	display: block;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.block--page-top a:hover::before{background-position-x: 24px;}



/*  detail
------------------------------ */
/* mypage Top */
.section.mypage .term.status{ text-align: left; margin-bottom: 30px;}
.term.status dt{
	width: 120px;
	float: left;
	clear: left;
	font-weight: normal;
	font-size: 12px;
	padding-top: 3px;
}
.term.status dd:not(:last-child){ border-bottom: 1px solid #e5e5e5; padding-bottom: 15px; margin-bottom: 15px; }

/* regist */
.yearlyBox {margin: 0 0 100px;}
.mailAddress dt,
.qrCode dt {
	font-weight: bold;
	border-left: 3px solid;
	padding-left: 10px;
	margin: 30px 0px 10px;
}
.mailAddress dd .subTxt {margin-top: 10px;}
.tit.rule {margin: 30px 0 10px; font-size: 15px;}
img[width="250px"] {width: 250px;}

/* other */
.section .sectionTit {margin: 0 0 30px;}
.formArea .formList {padding: 30px;}
.supportList a:before, .childList a:before {
	font-family: 'WebHostingHub-Glyphs';
	content: '\f3c9';
	font-size: 0.8em;
	margin: 0 3px 0 0;
}
.mypage ul.errorList li:after {
	font-family: 'WebHostingHub-Glyphs';
	content: '\f316';
	font-size: 0.8em;
	position: absolute;
	left: 0px;
	top: 57%;
	margin: -1em 0 0;
}
.mypage ul.errorList li { position: relative; padding: 0 0 0 13px;}
.section .sectionTit{margin-bottom: 30px;padding: 0 0 15px;}
.single .section{background: #fff;padding: 50px 130px}
.formArea .formList{margin-bottom:20px;padding: 35px 50px 20px 15px;}
.formArea .formList .subTxt{margin:5px 0 0;color: #666;font-size: 0.9em}
.formArea .formList .subTxt.app__rule{color: #cc0000; margin-top: 0;}
.formArea .btn{margin-bottom: 20px;}
.formArea .formList input[type="text"],
.formArea .formList input[type="password"]{
	padding: 5px 8px;
	font-size:16px;
	border: 1px solid #ccc;
}
.formArea #loading img{ width: 20px;}
.section.mypage .term{padding: 20px;}
.qrCode img{ width: 135px; }
.block.continue {
	font-size: 16px;
	padding: 30px;
	border:2px solid #c00;
	margin: 0 0 50px;
}
.block.continue .blockTit{
	color:#c00;
	text-align: center;
	background: none;
	font-size: 20px;
	padding: 0;
	margin: 0 0 15px;
}
.block.continue .formList {
	padding: 10px;
	background: none;
	margin: 30px 0 0 ;
	padding: 0;
}
.block.continue .formList dd {padding-top: 4px;}
.block.continue .formList dd {padding-top: 0;}

.continue .main,
.continue .main:hover {margin-top: 10px; background: #c00; border-color: #c00;}
.continue .formList dt {font-size: 11px; color: #666;}
.continue .formList dd {margin: 0 0 15px; font-weight: bold;}


.formArea .formList { padding: 35px 30px 20px 35px;}
.formArea .formList dt {width: 200px; font-size: 12px;}
.formArea .formList dd {padding-left: 210px;}

/* mypage */
.section.mypage .term{padding: 20px; font-weight: normal; }
.section.mypage .menuList {
	margin: 0 0 30px;
	border-color: #bbb;
}
.section.mypage .menuList li {
	border-color: #bbb;
	padding: 0;
	position: relative;
}
.section.mypage .menuList li::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	color: #999;
	border-right: 1px solid;
	border-top: 1px solid;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	right: 5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.section.mypage .menuList li a {
	display: block;
	padding: 25px 0;
	color: #000;
}
.section.mypage .menuList li a:hover {opacity: 0.7;}
.section.mypage .menuList li .tit {
	font-weight: bold;
	font-size: 16px;
	margin: 0 0 8px;
}
.section.mypage .menuList .txt {
	line-height: inherit;
	margin: 0;
}
.mypage ul.errorList li:after {
	font-family: 'WebHostingHub-Glyphs';
	content: '\f316';
	font-size: 0.9em;
	position: absolute;
	left: 0px;
	top: 57%;
	margin: -1em 0 0;
	color: #c00;
}
.mypage ul.errorList li {
	position: relative;
	padding: 0 0 0 15px;
}

/* mypage-card */
#cardPopUp{margin: 25px 0 45px;}
.memberCard {
	position: relative;
	z-index: -9999;
}
.memberCard .inner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.8);
	z-index: 100;
	-webkit-transition: all .6s ease;
	transition: all .6s ease;
	overflow: hidden;
	opacity: 0;
}
.memberCard .card{
	width: 360px;
	padding: 80px 50px;
	box-sizing: border-box;
	border-radius: 14px;
	box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15), 0px 17px 32px 0px rgba(0, 0, 1, 0.2) ;
	position: absolute;
	top:55%;
	top: calc(50% + 30px);
	left:50%;
	opacity: 0;
	overflow: hidden;
	background:#040303;
	-webkit-transition: all .6s ease;
	transition: all .6s ease;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
	-webkit-transform: scale(0.8) translate(-50%,-50%);
	transform: scale(0.8) translate(-50%,-50%);
	transform-origin: 0 0;
}
.menuOpen .memberCard .inner{opacity: 1;}
.menuOpen .memberCard .card{
	opacity: 1;
	-webkit-transform: scale(1) translate(-50%,-50%);
	transform: scale(1) translate(-50%,-50%);
}
.memberCard .logo{
	width: 250px;
	margin: 0 auto 110px;
}
.memberCard .logo img {width: 100%;}
.memberCard dl{ text-align: center;color: #9e9241;}
.memberCard dt{
	font-size: 0.7rem;
	margin-bottom: 4px;
	opacity: 0.7;
}
.memberCard dt:nth-of-type(2),
.memberCard dt:nth-of-type(3) {display: none;}
.memberCard dd{ font-size:0.95rem; margin-bottom: 20px;}
.memberCard dd:first-of-type{
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	font-family: 'Share Tech', sans-serif;
}
.memberCard dd:last-child {margin-bottom: 0;}
.memberCard dd .course_detail {
	font-size: 0.7rem;
	margin: 5px 0 0;
	letter-spacing: 0.1em;
}
.memberCard dd .course_detail span {
	display: inline-block;
	font-size: 10px;
	margin-left: 8px;
	background: rgba(255,255,255,0.15);
	padding: 0 5px;
	letter-spacing: 0.05em;
	line-height: 1.8;
}
.memberCard .close{
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
	top: 100px;
	right: calc(50% - 250px);
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	opacity: 0;
   	-webkit-transition: all .6s ease;
	transition: all .6s ease;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
	cursor: pointer;
}
.menuOpen .memberCard .close{opacity: 1;}
.memberCard .close::before,
.memberCard .close::after{
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #222;
	position: absolute;
	top: 15px;
	left: 0;
   	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.memberCard .close:hover:before,
.memberCard .close:hover:after {opacity: 0.6;}
.memberCard .close::after{ -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.otherTrigger .blockTit { margin: 30px 0 25px;}
.otherTrigger .btn .sub {
	display: inline-block;
	min-width: 250px;
	width: auto;
	font: 99% arial,helvetica,clean,sans-serif;
}
#otherArea .blockTit { margin-top: 0;}

/* card logo effect */
.memberCard .card.effect__glow .logo {
	position: relative;
	overflow: hidden;
}
.memberCard .card.effect__glow .logo::after {
	content: "";
	display: block;
	position: absolute;
	top: -180px;
	left: 0;
	opacity: 0;
	width: 30px;
	height: 100%;
	background-color: #ffffff;
	transform: rotate(45deg);
	animation: reflection 2s ease-in-out infinite;
	mix-blend-mode: overlay;
}
@keyframes reflection {
	0% {
		transform: scale(0) rotate(45deg); opacity: 0;
	}
	30% {
		transform: scale(0) rotate(45deg); opacity: .5;
	}
	31% {
		transform: scale(4) rotate(45deg); opacity: 1;
	}
	100% {
		transform: scale(50) rotate(45deg); opacity: 0;
	}
}


/* tablet
============================== */
@media screen and (min-width:600px) and ( max-width:960px) {
	#wrapper{ width: 100%;}
	#container { width: 100%; }
	#mainArea.single{ box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; padding: 0 5%; }
	.single .section { background: #fff;  padding: 50px 30px 30px; }
	.btn a, .btn input, .btn button { -webkit-appearance: none; -moz-appearance: button; }
	#loginId{ top: 15px;}
}


/* 退会手続き修正
------------------------------ */
.pageWithdrawal .section.mypage .error{
	text-align: center;
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: bold;
	color: #c00;
}

.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal{
	padding: 20px 4vw;
	background: #f8f8f8;
}
.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .guide_tit{
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 15px;
}

.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .attentionList{margin: 0;}
.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .attentionList li{
	margin: 0 0 10px 0;
	list-style-type: disc;
	list-style-position: inside;
	padding: 0 0 0 1.2em;
	line-height: 1.5;
}
.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .attentionList li:before{
	content: none;
}

.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .pointBox table{
	line-height: 2;
	margin: 0 0 10px;
	border: 1px solid #8c886c;
}

.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .pointBox_tit{
	background: #8c886d;
	color: #fff;
	padding: 5px 20px;
}

.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .pointBox .userPoint{
	font-size: 20px;
	font-weight: bold;
	box-sizing: border-box;
	background: #fff;
	padding: 5px 20px;
	min-width: 180px;
}
.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .pointBox .userPoint span{
	font-size: .8em;
	margin: 0 0 0 .2em;
}

.pageWithdrawal .section.mypage .alertBox.alertBoxWithdrawal .pointBox p a{
	font-weight: bold;
	color: #9e9241;
	text-decoration: underline;
}


/* 問い合わせページ
------------------------------ */

.list--attention.txt--basic {
  margin: 1em auto;
  font-size: 12px;
  width: 90%;
}
.list--attention.txt--basic li {
  padding: 0 0 0 1em;
  text-indent: -0.5em;
  line-height: 1.4;
}
.list--attention.txt--basic li:not(:last-child) {
  margin-bottom: .5em;
}
.list--attention.txt--basic li:before {
  font-family: FontAwesome;
  display: inline-block;
  position: relative;
  top: 0.1em;
  content: '\f111';
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}