/* CSS Document */


/************************************************************
 年齢認証 modal
************************************************************/

.modal { position: fixed; display: none; z-index: 9999; top: 40%; left: 50%; width: 320px; height: 250px; margin: -135px 0 0 -170px; padding: 10px; color: #FFF; text-align: center; border: 1px solid #FFF; border-radius: 10px; }
.modal img { vertical-align: bottom; }
.modal p { font-size: 12px; line-height: 1.6em; margin-bottom: 10px; }
.modal ul { text-align: center; }
.modal li { display: inline; }
.modal a { cursor: pointer; }

/************************************************************
 ローディング
************************************************************/
#page-loading {
  background: #466bda;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 1;
  display: table;
}

.ball-clip-rotate { background: #999; display: table-cell; vertical-align: middle; }


/************************************************************
共通
************************************************************/
body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; line-height: 1.6; background: url(../images/bg.jpg) repeat;}
a:hover img { opacity: 0.5; -webkit-transition: all 1s;　-moz-transition: all 1s;　-ms-transition: all 1s;　-o-transition: all 1s;　transition: all 1s; }
p { color: #565656; }
.contents { max-width: 1200px; text-align: center; margin: auto; padding-bottom: 50px; }
.cf:before, .cf:after { content:""; display: table; }
.cf:after { clear:both }

.cTitle { background: #EF82C2; padding: 10px; font-size: 24px; font-weight: 200; color: #fff; margin-bottom: 20px; }  


/************************************************************
ヘッダー
************************************************************/

header { border-bottom: solid 5px #808080; margin-bottom: 0px;  }
header h1 { float: left; width: 300px; height: 100px; margin: 10px 0px; background: url(../images/headerLogo.png) no-repeat;}
header h1 span { display: none; }
header h2 { float: left; font-family: 'SimHei','Lucida Console'; font-size: 20px; padding: 40px 0 0 20px; }
.header-contents { max-width: 1200px; text-align: center; margin: auto; padding-bottom: 0px; }

@media (max-width:750px) {
	.contents { padding: 0 10px 20px 10px ; }
	
}


/************************************************************
ヘッダーレスポンシブ
***********************************************************/

@media (max-width:750px) {
	header h1 { float: inherit; width: 240px; height: 70px; text-align: center; margin: 10px auto 5px auto; background: url(../images/headerLogoSp.png) no-repeat; }
	header h2 { float: inherit; font-size: 12px; padding: 0 0 5px 0; }
}

/************************************************************
メインヴィジュアル
***********************************************************/
.main-container{ position: relative; background: url(../images/mainBg.jpg) no-repeat; padding-bottom: 45%; height: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%;  }
.mainVisualTxt { position: absolute; overflow: visible; top: 25%; right: 5%; width: 50%; padding-right: 10%; }
.mainCopy { float: left; width: 100%; padding-bottom: 10px; }
.mainCopy2 { position: absolute; float: right; width: 30%; top: -35%; right: 0%; }

/*
.mainvisual{ position: relative; background: url(../images/mainBg.jpg) no-repeat; padding-bottom: 45%; height: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
.mainvisual-txt{ position: absolute; overflow: visible; top: 25%; right: 5%; width: 50%; padding-right: 10%; }
.mainvisual-main-txt{ float: left; width: 100%;	padding-bottom: 10px; }
.mainvisual-sub-txt{ position: absolute; float: right; width: 30%; top: -35%; right: 0%;	 }	
*/
/*SP
---------------*/
@media (max-width: 768px) {
	.mainvisual{
		background: url("../images/mainvisual_bg_sp.jpg")no-repeat;
		padding-bottom: 133%;
		-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}
	.mainvisual-txt{
		position: absolute;
		overflow: hidden;
		top: inherit;
		bottom:5%;
		right: 0;
		left: 0;
		margin: 0 auto;
		padding-right: 0;
		width: 100%;
		padding: 0 20px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		
	}
	.mainvisual-sub-txt-sp{
		display: block;
		float: left;
		width: 100%;
	}
	.mainvisual-sub-txt{
		display: none;
	}

}

/************************************************************
問い合わせ
***********************************************************/
.contactBox { padding: 0% 1% ; }
.contactBoxL { float: left; width: 49%; }
.contactBoxR { float: right; width: 49%; }


/************************************************************
不安・不満
***********************************************************/
.trouble { position: relative; background: url(../images/troubleBg.jpg) no-repeat; padding-bottom: 50%; height: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
.troubleTxt { position: absolute; overflow: visible; top: 5%; left: 10%; width: 80%; }
.troubleCase1 { width: 100%; }
.troubleCase1 ul {  padding : 2% 4% 0% 28%; }
.troubleCase1 ul li { float: left; width: 28%; margin-right: 4%;}
.troubleCase2 { width: 100%; }
.troubleCase2 ul {  padding : 0% 0 0% 32%; }
.troubleCase2 ul li { float: left; width: 28%; margin-right: 4%;}
.troubleSp { display: none; }

/************************************************************
不安・不満レスポンシブ
***********************************************************/
@media (max-width:750px) {
	.trouble { display: none; }
	.troubleSp { display: block; }
	.troubleCase1 ul {  padding : 2%; }
	.troubleCase1 ul li { float: left; width: 31%; margin: 1%;}
	.troubleCase2 ul {  padding : 2%; }
	.troubleCase2 ul li { float: left; width: 31%; margin: 1% 1% 3% 1%;}
}

/************************************************************
ポイント
************************************************************/

.pointSp { display: none; }

/************************************************************
ポイントレスポンシブ
***********************************************************/

@media (max-width:750px) {
	.pointPc { display: none; }
	.pointSp { display: block; }
}

/************************************************************
カウンセラーメッセージ
***********************************************************/
.counselor { position: relative; background: url(../images/counselorBg.jpg) no-repeat; padding-bottom: 50%; margin-top: 40px; height: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
.counselorTxt { position: absolute; overflow: visible; top: 10%; right: 40%; left: 5%; width: 55%; text-align: left; }
.counselorTxt h3 { font-family: 'SimHei','Lucida Console'; color: #FF7BAC; font-size: 2.5em; line-height: 1.2; padding-bottom: 1em; }
.counselorTxt p { color: #565656; }
.counselorTxtSp { display: none; }

/************************************************************
カウンセラーメッセージレスポンシブ
************************************************************/
@media (max-width:750px) {
	.counselor { position: relative; background: url(../images/counselorBgSp.jpg) no-repeat; padding-bottom: 42%; margin-top: 20px; height: 100%; -webkit-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
	.counselorTxt { position: absolute; overflow: visible; top: 30%; right: 20%; left: 5%; width: 75%; text-align: left; }
	.counselorTxt h3 { font-size: 1.4em; line-height: 1.2; padding-bottom: 10px; }
	.counselorTxtSp { display: block; font-size: 12px; text-align: left;}
	.counselorTxt p { display: none; }
}


/************************************************************
女の子の声
************************************************************/
.reviewBox { margin: 20px 0 20px 0px; padding: 20px 0; border-bottom: dotted 2px #585858; }
.reviewBoxGirl { float: left; width: 25%; margin-right: 2%; }
.reviewBoxTxt { float: left; width: 73%; text-align: left; }
.reviewTitle { font-size: 21px; color: #FF7BAC; margin-bottom: 5px; }

/************************************************************
女の子の声レスポンシブ
************************************************************/
@media (max-width:750px) {
	.reviewBox { margin: 10px 0 10px 0px; padding: 10px 0; border-bottom: dotted 2px #585858; }
	.reviewTitle { font-size: 16px; color: #FF7BAC; margin-bottom: 5px; }
	.reviewBox p { font-size: 12px; }
}

/************************************************************
ポイント還元
************************************************************/
.pointoBox { margin: 20px 0 20px 0px; padding: 20px 0; }

@media (max-width:750px) {
	.pointBox { margin: 10px 0 10px 0px; padding: 10px 0; }
}


/************************************************************
店舗一覧
************************************************************/
.shopTitle { color: #fff; font-size: 24px; font-weight: 200; padding: 10px; margin: 1em auto; width: 200px; text-align: center; background: #FF7BAC; }
.shopList { width: 100%; }

.shopList ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple;  -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.shopList ul li { width: 23%; float: left; margin: 0px 2% 5px 0 ; text-align: left; }
.shopList ul li:nth-child(4n) { margin-right: 0; }
.shopList ul li img { margin-bottom: 5px; }
.shopList ul li p { font-size: 10px; line-height: 2; }

.shopTitleBox { text-align: center; padding: 5px; color: #FF7BAC; margin-bottom: 10px; }
.shopTitleBox h3 { font-size: 14px; line-height: 1.2; margin-bottom: 5px; }
.shopTitleBox p { font-size: 10px; }


/************************************************************
レスポンシブ
***********************************************************/
@media (max-width:750px) {
	.shopTitle { color: #fff; font-size: 16px; padding: 5px; margin: 1em auto; width: 150px; }
	.shopList ul li { width: 100%; float: left; margin: 0px 0 5px 0 ; text-align: left; }
	
}


/************************************************************
人気の女の子
************************************************************/
.rankingList ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple;  -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.rankingList ul li { width: 15%; float: left; margin: 0px 2% 20px 0 ; }
.rankingList ul li:nth-child(6n) { margin-right: 0; }
.rankingList ul li img.girls { border: solid 5px #FFD2EE; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.rankingList ul li h3 { color: #D266AD; font-size: 14px; line-height: 1.4; margin-bottom: 5px; }
.rankingList ul li p { font-size: 12px; line-height: 1.6; }


/************************************************************
RECRUIT
************************************************************/
.recruitBox ul { margin: 20px 0 20px 0; text-align: left; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-lines: multiple;  -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.recruitBox ul li { float: left; width: 23.5%; margin: 0px 2% 20px 0; }
.recruitBox ul li:nth-child(4n) { margin-right: 0; }

.recruitBox ul h3 { color: #D266AD; font-size: 16px; line-height: 1.2; margin: 5px 0; }
.recruitBox ul p { font-size: 10px; line-height: 1.6; word-break : break-all; }



/************************************************************
Footer
************************************************************/
footer { background: #F5F5F5; margin-top: 20px; border-top: solid 4px #666; }
.footerList { }
.footerBox { float: left; text-align: left; margin: 2%; width : 46%; }
footer h3 { font-size: 16px; margin-bottom: 20px; }
.footerBox ul {}
.footerBox ul li { border-bottom: solid 1px #CCC; font-size: 12px; padding: 20px 5px 5px 5px; }
.copyright { background: #666; text-align: center; font-size: 12px; color: #fff; padding: 2em 1em; }


/************************************************************
レスポンシブ
***********************************************************/
@media (max-width:750px) {
	.footerBox { text-align: left; margin: 2% 1%; width : 98%; }
	footer h3 { font-size: 12px; margin: 20px auto 10px auto; text-align: center; }
}