@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500,700');
/* =================================================
       --------------------
          UVERworld FANCLUB MYPAGE
					PC
       -------------------
================================================= */
/*  base
------------------------------ */
body {
	background:  #f5f5f5;
	height: auto;
	min-height: 100%;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	word-wrap : break-word;
	overflow-wrap : break-word;
}
img{width: 100%}


a,a:link, a:visited{
	color:#000;
	text-decoration:none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

a:hover {
	opacity: 0.6;
}

.btn {margin: 20px 0;}
.btn input,
.btn a {
	width: 290px;
	display: block;
	font-weight: bold;
	cursor: pointer;
	letter-spacing: 0.1em;
	text-decoration: none;
  -webkit-transition: 0.1s ease-in-out;
  -moz-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.btn a.txt-link{position: relative;}
.btn a.txt-link .fa{
	font-size: 1.5em;
	top: 50%;
	position: absolute;
	transform: translateY(-50%);
	right: 2%;
}

.btn input:hover,
.btn a:hover {
	opacity: 0.8;
  filter: alpha(opacity=80);
}

.btn a.sub,
.btn a.sub:hover,
.btn input.sub,
.btn input.sub:hover {
	text-decoration: none;
}

.txt {margin: 0 0 15px;}
.bold {font-weight: bold;}
.blockTit {margin: 30px 0 15px;}
.lead {
	margin: 0 0 10px;
	font-size: 16px;
}
.center {text-align: center;}


/*===============================
  �ł��ςƂ��NjL
==================================*/

#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
		padding:50px 0 430px;
}
#side_line {
    width: auto;
    min-height: 100%;
    position: relative;
}
#container {
	width: 950px;
	margin: 0 auto;
	padding: 0;
	background: transparent;
}
.rule {color:#000;}
.bold {font-weight: bold;}
.fs10 {font-size: 10px;}

.btn .main,
.btn .main:hover {
	padding: 14px 0;
	background: #000;
  border-radius: 50px;
  color: #fff;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.btn .sub,
.btn .sub:hover {
	background: #fff;
	border-radius: 50px;
	color: #000;
	border:1px solid #000;
	letter-spacing: 0.05em;
	cursor: pointer;
}


/* header */
#mypageHeader{height: 130px;background: transparent;}
#mypageHeader h1{width: 400px;position: absolute;left: 50%;top:60px;margin-left:-200px;}
#mypageHeader .loginNav{margin-top: 40px;width: 150px;padding-right: 4%;}
#mypageHeader .loginNav a{
display: block;
padding:5px 0;
text-align: center;
font-weight: bold;
color: #333;
border: 1px solid #999;
border-radius: 30px;
}
#mypageHeader .loginNav a:before{display: none}
#loginId{position: absolute;right:4%;top:50px;background: #eaeaea;padding: 3px 20px;border-radius: 20px;font-size: 12px}
#loginId p{display: inline-block;color: #000;}
#header h1 {background: Transparent;text-align: center;}
#header h1 a {
	background: transparent;
	padding: 55px 0 0;
	display: inline-block;
	margin: 0 0 0 -32px;
}
.alertBox a{text-decoration: underline;color:#009fdf;}
.alertBox{background: #fff0f0;}
.alertBox .error{color:#c00;}

/* 言語切り替え */
.langSelector{display: none!important}
/*
.langBar .langSelector{
	position: absolute;
	top:5px;
	right:6%;
}

.langBar {
	position: absolute;
	top:0;
	width: 100%;
	height: 50px;
	background: #efefef;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 99;
}
.easy-select-box{
  background: #282828;
  border-radius: 50px;
  font-size:13px;
	font-weight: 500;
  color:#fff;
	outline: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.langBar .easy-select-box{background: #ddd;}
#footer .easy-select-box{margin: 0 auto 20px;}
.easy-select-box .esb-displayer{
	position: relative;
	color:#fff;
	cursor: pointer;
  height: 40px;
	line-height:40px;
	padding:0 3px 0 15px;
	text-indent: 5px;
  width: 110px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.langBar .easy-select-box .esb-displayer{color: #000}
.langBar .easy-select-box.open .esb-displayer{opacity: 0.3}
.easy-select-box .esb-displayer:before{
	position: absolute;
	content:'Language';
	left: 18px;
	text-indent: 0;
}
.easy-select-box .esb-displayer:after{
	position: absolute;
	right:17px;
	content:'\f106';
	font-family:'FontAwesome';
	color: #999;
	font-size: 20px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	transform: rotateX(0deg) ;
	-webkit-transform: rotateX(0deg) ;
	-moz-transform: rotateX(0deg) ;
}
.langBar .easy-select-box .esb-displayer:after{content:'\f107';}
.easy-select-box.open .esb-displayer:after{
	transform: rotateX(-180deg) ;
	-webkit-transform: rotateX(-180deg) ;
	-moz-transform: rotateX(-180deg) ;
}
.easy-select-box .esb-displayer:hover {
  filter: alpha(opacity=80);
  -ms-filter: 'alpha(opacity=80)';
  opacity: .8;
}
.easy-select-box:hover .esb-displayer{
	text-decoration:none;
}
.easy-select-box.disabled .esb-displayer,
.easy-select-box:hover.disabled .esb-displayer{
	background-position: 0 -36px;
}
.easy-select-box .esb-dropdown{
  background: #222;
  display: none;
  max-height: 200px;
	margin-top: 5px;
	padding: 5px 0;
  overflow: auto;
  position: absolute;
  z-index: 999;
	width: 190px;
	border-radius: 6px;
}
#footer .easy-select-box .esb-dropdown{
	bottom:110%;
	background: #fff;
}
.easy-select-box  .esb-item{
	padding:5px 3px 5px 20px;
	color:#fff;
	font-weight: normal;
	cursor:pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
#footer .easy-select-box  .esb-item{color: #000}
.easy-select-box .esb-item:hover,
#footer .easy-select-box .esb-item:hover{
	color:#009fdf;
	text-decoration:none;
}


#footer .langSelector{
	width: 115px;
	margin: 0 auto 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#footer #language-selector{
	width: 100%;
  padding: 8px 10px 8px 15px;
  -webkit-appearance: none;
  border: none;
	background: #333;
	color: #fff;
  font-size: 12px;
	text-align: center;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
	font-weight: bold;
}
*/

/* footer */

#footer { position:absolute;bottom:0;padding: 0;width:100%;background: #202020;color: #fff;font-size: 12px;}
#footer a{color: #fff; fill: #fff;}
#footer p.copyright{font-size: 10px;text-align: center;color: #555;}
#footer .inner{width: 960px;margin: 0 auto;padding: 50px 0 40px;}
#footer a:hover{opacity: 0.5;}
#footer .nswLogo {display: none;}
#footer .bandLogo{margin: 0 0 10px;text-align: center;}
#footer .bandLogo img{width: 150px;}
#footer .login {display: none}
#footer .subNavi{margin-bottom: 30px;}
#footer .subNavi li{
	float: left;
	width: 20%;
	font-weight: 500;
}
#footer .subNavi li li{
	float: none;
	width: 100%;
	margin-bottom: 2px;
}
#footer .subNavi li p{margin-bottom: 2px;}
#footer .subNavi li ul{margin-bottom:2px;}
#footer .subNavi li p a{color: #fff;}
#footer .sns {margin-bottom:20px;text-align: center;}
#footer .sns li{
	display: inline-block;
	font-size: 26px;
	margin: 0 15px;
}
#footer p.copyright{text-align: center;}


.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;
}
.section .sectionTit{margin-bottom: 30px;padding: 0 0 15px;}
.single .section{background: #fff;padding: 50px 130px 30px;}
.formArea .formList{margin-bottom:20px;padding: 35px 50px 20px 15px;}
.formArea .formList .subTxt{margin:5px 0 0;color: #666;font-size: 0.9em}
.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 .menuList .txt{line-height:88px;}
.section.mypage .term{padding: 20px;}
.supportList a:before{display: none}
.supportList li{margin-bottom: 5px}
.txtList {margin-bottom: 20px;padding-left: 1em;}
.txtList li{text-indent: -1em;margin-bottom: 5px}

/* 初回ログインチュートリアル */
#tutorialBg{
	z-index: 2;
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width: 100%;
	background: rgba(0,0,0,0.7);
}
#tutorial {
	z-index: 3;
	position: fixed;
	top:50%;
	left:50%;
	margin: -220px 0 0 -300px;
	width: 600px;
	background: #fff;
	border-radius: 6px;
}
#tutorial .box{
	height: 300px;
	padding: 40px 30px 0 30px;
	text-align: center;
	font-size: 15px;
}
#tutorial .box img{width: 75%;margin: 0 auto 10px}
#tutorial .check{
	margin:-10px 0 20px;
	font-size: 22px;
	font-weight: 500;
	color:#c00;
	font-family: "Roboto" ,sans-serif;
}
#tutorial li:last-child .tit{ margin-top: 100px;}
#tutorial .logo{ width: 350px;margin: 15px auto 25px;}
#tutorial .logo img{ margin: 0 auto;}
#tutorial .tit{
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 22px;
	line-height: 1.4em;
}
#tutorial li:first-child .tit{
	font-size:26px;
	margin: 0 0 25px;
	text-align: center;
	white-space: nowrap;
}
#tutorial li:nth-child(2) .tit{margin-top: 10px}
#tutorial .lead{font-size:18px;}

#tutorial .step{
	width: 83%;
	margin: 0 auto 15px;
	padding-left: 1em;
	font-size: 17px;
	line-height: 1.6em;
	text-align: left;
	text-indent: -1em;
}
#tutorial .step.two{ margin-bottom: 30px}
#tutorial .btn{
	margin: 5px 0 0;
	padding: 10px 0;
	background: #f3f3f3;
	border-radius: 0 0 6px 6px;
}
#tutorial .btn a{width: 220px;}
#tutorial .btn .next{	background: none;}
#tutorial .btn .next:hover{opacity: 1}
#tutorial .btn .next.close{background: #000;color:#fff;}
#tutorial .slick-dots button{
  -webkit-appearance: none;
  padding:0;
  margin: 0;
  width: 8px;
  height: 8px;
  background: #ccc;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 10px;
	border: none;
	outline: 0;
}
#tutorial .slick-dots{margin-top: 10px;text-align: center;}
#tutorial .slick-dots li{display: inline-block;margin: 0 4px;}
#tutorial .slick-dots .slick-active button{background: #000;}

/* デジタル会員証追加 202210*/

/* swiper */
/* bullet */
.block--card .swiper-container{width: 500px;}
.block--card .swiper-pagination{
	left: 50%;
	transform: translateX(-50%) translateY(100%);
	}

.block--card .swiper-pagination-bullet{
		background: #ccc;
		opacity: 1;
	}
.block--card .swiper-pagination-bullet-active{
		background: #000;
	}
.block--card .swiper-pagination-bullet{
		margin: 0 5px;
	}

	/* button */
	.block--card .swiper-button{
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-top: 2em;
	}
	.block--card .swiper-button-prev,
	.block--card .swiper-button-next{
		position: relative;
		color: #000;
		top: 0;
	}

.block--card .swiper-button-prev:after,
.block--card .swiper-button-next:after{
  font-size: 32px;
}

@font-face {
  font-family: 'silom';
  src: url('static/uverworld/fanclub/mypage/font/silom.ttf') format('ttf');
}


:root{
	--rank-black:#241e1f;
	--rank-green:#58ffa3;
	--rank-gold:#e0daa1;
	--rank-purple:#93278f;
	--rank-red:#c1272d;
	--rank-blue:#1f79db;
	--rank-silver:#dfdfdf;
	--rank-bronz:#c69c6d;
}
body.card-show .modal{display: block;}
.modal{
	display: none;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: scroll;
	-webkit-overflow-scrolling:touch;
	background: rgba(255,255,255,0.95);
	z-index: 999;
	transition: none;
}

.modal__inner{
	width: 500px;
	margin: 40px auto 0;
	position: relative;
}
.main_ph{margin: 0;}
.block--card .single .main_ph{
width: 500px; margin: 0 auto;
}
.block--card .card-data{
	position: absolute;
	bottom: 1.5em;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	width: 500px;
	z-index: 15;
	display: flex;
  justify-content: space-between;
}
.rank_black .card-data{color: var(--rank-black);}
.rank_purple .card-data{color: var(--rank-purple);}
.rank_gold .card-data{color: var(--rank-gold);}
.rank_green .card-data{color: var(--rank-green);}
.rank_red .card-data{color: var(--rank-red);}
.rank_blue .card-data{color: var(--rank-blue);}
.rank_silver .card-data{color: var(--rank-silver);}
.rank_bronz .card-data{color: var(--rank-bronz);}
.block--card .card-data .item_nick{
	font-size: 16px;
	margin-left: 4%;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.block--card .card-data .item_id{
	margin-right: 4%;
	font-family: 'silom',obvia-wide, sans-serif;
	font-size: 20px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.rank_black .card-data .item_nic{text-shadow: 0 1px 1px rgba(0,0,0,0.3);}
.rank_purple .card-data .item_nick{color:#690e66;}
.rank_gold .card-data .item_nick{color:#fff8b9;}
.rank_green .card-data .item_nick{color:#0b8643;}
.rank_red .card-data .item_nick{color: #78161a;}
.rank_blue .card-data .item_nick{color:#0d4887;}
.rank_silver .card-data .item_nick{color:#ffffff;}
.rank_bronz .card-data .item_nick{color:#8b5e2c;}


.block--card .block--data{
	width: 70%;
	max-width: 450px;
	margin: 3em auto 6em;
	text-align: center;
	font-size: 15px;
}
.block--data .member_data{
	font-weight: bold;
}
.block--data .member_data dt{ font-size: 11px;margin-bottom:0.2em;opacity: 0.5;}
.block--data .member_data dd{ margin: 0 0 .6em;}



.pop-up {
  margin-bottom: 20px;
}
.pop-up.main{
	border-radius: 7px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.btn.close{
	margin: 0 auto;
	width: 300px;
}
.main.close{
	display: block;
	text-align: center;
	margin: 0 auto;
	font-size: 15px;
	border-radius: 7px;
}
.pop-up.main:hover{
	border-radius: 7px;
}
.main.close:hover{background:#ccc;border-radius: 7px;color: #000;}


/* バースデーメッセージ add 202210*/
.btn.birthday-message{margin-bottom: 40px;}
.btn.birthday-message .main{
	background: #e42d2d;
	border-radius: 7px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* ポイント導入 add 202302*/
.section.mypage .menuList li.general{
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.section.mypage .menuList li.general .btn{margin: 0 20px 0 0;float: none;}
.section.mypage .menuList li.block--point >div{
display: flex;
align-items: center;
justify-content: flex-start;
}
.section.mypage .menuList li.block--point .txt{
	padding: 0;
	margin-bottom: 0;
}
.section.mypage .menuList li.block--point >div .btn{
	float: none;
}

.section.mypage .menuList li.general .txt{
	margin-bottom: 0;
	padding: 0;
}

/* for wovn-languages */
.block--languages-select {
	display: none;
}