/* Generated by less 2.5.1 */
@charset "utf-8";
/*
  フォント設定は「1.0rem=10px」（html、bodyのfont-size設定を動かさない）
  大枠以外classにスタイル設定する。JSに使うclassは「js-**」としている
  タブレットサイズを縲鰀960px、スマホサイズを縲鰀768pxとする
*/
/* basic */
body{
font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, sans-serif;
word-break: break-all;
color: #1A1A1A;
margin: 0 auto;
padding: 0;
}
body a { transition: 0.2s; }
body a:hover { opacity: 0.8; }
a:hover { color: #FF0000; opacity: 0.8; }
ul,
li,
ol { list-style: none outside none; margin: 0; padding: 0; }
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0 auto; }
h1,
h2,
h3 { letter-spacing: 0.15em; }
img { max-width: 100%; }
figure { margin: 0; }

/*Construction*/
#container { width: 100%; margin: 0 auto; background: #fff; background-size: 100% auto; z-index:-10;}

header img { box-shadow: none; }
footer {
	background: #f7a8d3;
	padding:0;
	width: 100%;
	text-align: center;
	line-height: 1.2;
}
footer .foonter-inner { margin: 0 auto; }
footer .copyright { clear: both; color: #ffffff; padding: 1em 0; margin:0; }
footer .copyright a ,
footer .copyright .attention {
	color: #ffffff;
	text-decoration: none;
	font-size:50%;
}





.header_container{
	background:#C80070;
	width:100%
}

h1{
	color: #FFFFFF;
/*	font-weight: 700;
	padding:0.3em;	*/
	height:60px;
	text-align: center;
	background:url("../img/gift_title_bg.png") repeat top center;
	margin:0 auto;
}

h1 span{
	display:block;
	text-indent: -9999px;
	width:320px;
	height: 60px;
	background:url("../img/gift_title.png") no-repeat top center;
	margin:0 auto;
}

.stg h1{
	background-image:none;
	background-color:#0400b5;
}





.main-container {
	max-width: 400px;
	position:relative;
	z-index: 9999;
	margin: 0 auto;
}

/*表示エリア　ロード時は消しておく*/
.loading-section{ display:block; padding:40% 5%; text-align: center; }
.login-section{	display:none; }
.notlogin-section{ display:none; }



/*ログイン済み　プロフィール＆ギフトタイトル*/
.title{
	margin-bottom:3%;
}
.tp{
	margin-top:0;
	background: #FF66E6;
	overflow: hidden;
}
.tg{
	margin-top:3%;
	background: #F384B1;
}


.title > p{
	color:#fff;
	line-height: 1.6em;
	padding:0.3em 0.8em;
	margin:0;
}
.tp > p{
	float:left;
	width:60%;
}
.tg > p{

}

.tp p.logout{
	line-height: 1.6em;
	padding-right:1em;
	float:right;
	width:20%;
}
.tp p.logout a{
	font-size:50%;
	text-align: center;
	display: block;
	background: #FFF;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 20px;
	border: 1px solid #FC7FD0;
	padding:0 3%;
	text-decoration: none;

}
.tp p.logout a:hover{
	font-weight: 400;
	color:#FF0004;
	background: #FFF;
}

/*プロフィールエリア*/
.user_wrap,
.gift_wrap{
	padding:0 4%;
	max-padding-left: 30px;
	max-padding-right: 30px;
}

.user,.gift{
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    zoom: 1;
}

	.user .profile-img{
    	height: 0;
		float: left;
		width: 35.1%;
	}

	.user .profile-img img{
		width: 100%;
		height: auto;
	}

	.user .profile-userinfo{
		float: left;
		width: 56%;
		padding: 0 1% 1% 40%;
		color: #036;
		overflow: hidden;
	}
	.user .profile-userinfo p#nickname{
		margin-top: 5%;
		margin-bottom: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow:  hidden;
		font-size:170%;
	}
	.user .profile-userinfo p#userid{
		font-size:80%;
		margin: 1% 0;
	}

	.user .profile-edit{
	}

	.user .profile-edit input[type=button] {
		padding: 3% 6%;
		margin-top: 7%;
		margin-bottom: 7%;
		font-weight: 400;
	}
	.user .profile-edit input[type=button].pf_button {
		font-weight: 400;
		color: #9e9e9e;
		background-color: #fff;
		border-radius: 4px;
		border: 1px solid #bbb;
	}
	.user .profile-edit input[type=button].pf_button:hover {
		font-weight: 700;
		color: #fff;
		background-color:#838383;
		border-radius: 4px;
		border: 1px solid #636363;
	}

/*ギフト券エリア*/
div.gift_wrap{

}
	div.gift{
		margin-bottom:10%;
		display:none;
	}
	div.gift p{
	}
	div.gift p a{
		display: block;
		width: 94%;
		background-color: #fff;
		border-radius: 12px;
		border: 3px solid #EB98BF;
		color: #ff008b;
		text-decoration: none;
		padding: 2%;
	}
	div.gift p a span.gift-icon{
		display:block;
		float: left;
		width: 25%;
		height: 0;
		margin-bottom: 35%;
}
	div.gift p a span.gift-icon img{
		width: 100%;
		height: auto;
	    overflow: hidden;
	}
	div.gift p a span.gift-name{
		display:block;
		width: 69%;
		line-height: 1.3em;
		margin-bottom:2%;
		padding: 0 1% 1% 30%;
		font-size:180%;
	}
	div.gift p a span.use-gift{
		display:block;
		clear: both;
		text-align: center;
		color: #5e5d61;
	}

	div.gift p a:hover{
		color:#fff;
		background-color: #FF7EBA;
		border: 3px solid #E9368A;
	}
	.gift_wrap .gift-reload{
		text-align:center;
	}
	.gift_wrap .gift-reload a{
		padding:2%;
		display:block;
		text-decoration:none;
		background-color: #fff;
		border: 1px solid #bbb;
		border-radius: 24px;
		color:#aaa;
	}
	.gift_wrap .gift-reload a:hover{
		background-color: #cdcdcd;
		color:#fff;
	}

	.gift_wrap .nogift{
		display:none;
	}
	.gift_wrap .nogift p{
		margin: 20% auto;
		text-align: center;
	}



.profile_wrap:after,
.gift_wrap:after{
  content: "";
  clear: both;
  display: block;
}





/*未ログイン*/
.notlogin-section div.login{
	text-align: center;
	margin-top:15%;

}
	.notlogin-section div.login p{

	}
	.notlogin-section div.login p.login-info{
		color:#E9368A;
		font-size:140%
	}
	.notlogin-section div.login p.login-info2{
		color:#676767;
	}
	.notlogin-section div.login p.login-btn{
		margin: 5% 0;

	}
	.notlogin-section div.login p.login-btn a{
		display: block;
		width: 80%;
		background-color: #fff;
		border-radius: 12px;
		border: 3px solid #EB98BF;
		font-size:200%;
		color: #ff008b;
		text-decoration: none;
		padding:4% 2%;
		margin:0 auto;
	}
	.notlogin-section div.login p.login-btn a:hover{
		color:#fff;
		background-color: #FF7EBA;
		border: 3px solid #E9368A;
	}

.notlogin-section div.banner{
	text-align: center;
	margin:20% 8% 0;
}
	.notlogin-section div.banner p{
		margin-bottom:2%;

	}
	.notlogin-section div.banner a{

	}
	.notlogin-section div.banner a img{
		width:100%;
		height: auto;

	}



/*ご利用方法*/
.main-container .howto{
	padding :2% 5%;
}
.main-container .howto .lead{
	border: 1px dotted #BBBBBB;
	background: #ECECEC;
	padding:3%;
	margin-bottom:15%;
}

.main-container .howto .return_to_top{
	display: block;
	border-radius: 12px;
	border: 1px solid #EB98BF;
	color: #ff008b;
	background-color: #fff;
	text-decoration: none;
	text-align: center;
	padding:2%;
	margin-right:60%;
	margin-top:2%;
	margin-bottom:4%;
}
.main-container .howto .return_to_top a{
		display: block;
		background-color: #fff;
		color: #FF67B9;
}

.howto h4{
	margin-top:15%;
	line-height: 1.2em;
}
.howto .htimg{
	width:100%;
	margin:2% 0 15% 0;
	border:#CCCCCC solid 1px;
}
.howto .htimg img{
	width:100%;
	height: auto;
}
.howto p.qanda{
	padding:1% 0 5%;
}

.howto p.qanda span.qus{
	display: block;
	padding:2%;
	background: #CBCBCB;
	font-weight: 700;

}
.howto p.qanda span.ans{
	display: block;
	padding:2% 2% 6% 2%;
	background:#F7F7F7

}

/*特別メッセージ*/
.info_important{
    width: 80%;
	max-width: 460px;
	border:#ee2f84 solid 2px;
	padding:10px;
	color:#414141;
	font-display: 100%;
	margin: 3% auto 5% auto;
}
.info_important ul{
	max-width: 400px;
	margin:0 auto;
}
.info_important ul li{
	padding-bottom: 0;
}
.info_important .title{
    color:#ee2f84;
}


/*下部注意書き*/
.notice{
	border-top:#676767 dotted 2px;
	padding:5% 5% 0;
	color:#414141;
	font-display: 85%;
	margin-top:3%;
	margin-bottom:0;
}
.notice ul{
	max-width: 400px;
	margin:0 auto;
}
.notice ul li{
	padding-bottom:6%;
}


/* フッター =================================== */

.page-topLink {
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 80%;
    border: 4px solid #ef6eaa;
    color: #ef6eaa;
    width: 20px;
    padding: 13px 10px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
}

.db{
	font-size:60%;
}
/*PC------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
html { font-size: 80%;}


	.sp { display: none; }
.tb { display: block; }
.pc { display: block; position: relative; z-index: 9999; }
.spBr { display: none; }
.pcBr { display: block; }
.tabBr { display: none; }

.main-container { }





/* haro_root_element =================================== */
div#haro_root_element { overflow: hidden; }
}


/*SP------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 960px) {
html { font-size: 100%;}
.notlogin-section div.login p.login-btn a{
	font-size:160%;
}
.user .profile-userinfo p#nickname{
	font-size:128%;
}
.user .profile-edit input[type=button] {
	margin-top: 5%;
	margin-bottom:20%;
	font-size:70%;
}

div.gift p a span.gift-name{
	font-size:140%;
}
div.gift p a span.use-gift{
	font-size:70%;
}
.notlogin-section div.login p.login-info{
	font-size:100%
}
.notlogin-section div.login p.login-info2{
	font-size:75%;
}
.gift_wrap .gift-reload{
	font-size:80%;
}

.main-container .howto{
	font-size:90%;
}

.pc { display: none; }
.tb { display: none; }
.sp { display: block !important; position: relative; z-index: 9999; }
.pcBr { display: none; }
.spBr { display: block; }

/* タイトル =================================== */
.main-container { /*margin-bottom: 1em;*/}



/* Page Top =================================== */
/*.page-topLink { display: none !important; }*/
footer .footer-inner > div { margin: 0 auto !important; }