@charset "utf-8";

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

	メインビジュアル・ヘッダー

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

.logoarea{
	width:94%;
}

.logoarea .acc{
	position:inherit;
	top:inherit;
	right:inherit;
	width:60%;
	margin:0px auto;
}

.acc a{
	width:80%;
	display:block;
	box-shadow: 0 0 0 2px #FF6633 inset;
	padding:20px 10%;
	font-size:100%;
	line-height:150%;
	text-align:center;
	color:#FF6633;
	background:url(../img/pink-arrow.png) no-repeat 92% center;
	font-weight:bold;
}


.logo{
	text-align:center;
	margin-bottom:30px;
}

.head {
	height: 100px;
	background:#fff;
}

.head .fixbar {
	position: absolute;
	width: 100%;
	top: 760px;
	background:#fff;
}

.head.fixed .fixbar {
	position: fixed;
	top: 0px;
}

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

	グローバルナビ

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

nav ul{
	width:100%;
	margin:0px auto;
}
nav li{
	float:left;
	width:33.3%;
	text-align:center;
}

nav li a.active{
	border-bottom:1px solid #E41D72;}

nav li a{
	display:block;
	padding:20px 20px 20px;
	color:#573933 !important;
	border-bottom:1px solid #DED9D9;
}

nav li a:hover{ border-bottom:1px solid #E41D72;}

.home{	
	background:url(../img/icon-home.png) no-repeat 10% center;
	background-size:10% auto;
}

.treatment{	
	background:url(../img/icon-treat.png) no-repeat 10% center;
	background-size:10% auto;
}

.twitter{
	background:url(../img/icon-twitter.png) no-repeat 10% center;
	background-size:10% auto;
}

.staff{	
	background:url(../img/icon-staff.png) no-repeat 10% center;
	background-size:10% auto;
}

.line{	
	background:url(../img/icon-line.png) no-repeat 10% center;
	background-size:10% auto;
}


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

	Footer

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

footer{ 
	background:#F2F0F0;
	text-align:center;
	margin-top:100px;
	font-size:80%;
}

footer .f-cont{
	width:94%;
	margin:0px auto;
	position:relative;
	padding:230px 0 40px;
}

footer .flogo{
	position:absolute;
	top:-40px;
	left:50%;
	margin:0 0 0 -116px;
}

.flink{
	margin-top:10px;
}

.flink a{
	color:#573933;
}

.copyright{
	background:#583A34;
	color:#fff;
	padding:20px;
}

.foot-mail{
	position:absolute;
	top:25%;
	right:inherit;
	left:50%;
	margin:0 0 0 -58px;
}

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

	ページ共通項

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

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

	下層ヘッダー

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

#un-head{
	width:94%;
}

#un-head .logo{
	text-align:left !important;
}

#un-head .logo img{
	width:230px;
	height:auto;
}

#un-head .top-contact{
	position:absolute;
	bottom:inherit;
	top:40px;
}

#un-head .top-contact img{
	width:220px;
	height:auto;
}

#un-head h1{
	font-size:70%;
	line-height:150%;
	text-align:left;
	margin:0 0 40px 0;
	width:100%;
}

#unnav .head-un .fixbar {
	position: absolute;
	width: 100%;
	top: 330px !important;
	background:#fff;
}

#unnav .head-un.fixed .fixbar {
	position: fixed;
	top: 0px !important;
}

#un-head .access{
	position:absolute;
	right:100px !important;
	bottom:-90px;
	width:60%;
}

#un-head .access a{
	width:75%;
	display:block;
	box-shadow: 0 0 0 2px #FF6633 inset;
	padding:20px 20% 20px 5%;
	font-size:100%;
	line-height:150%;
	text-align:center;
	color:#FF6633;
	background:url(../img/pink-arrow.png) no-repeat 92% center;
	font-weight:bold;
}

#pankuzu{
	width:94%;
}

.un-bg{
	width:100%;
	height:220px;
	margin:254px auto 20px;
	display:table;
    text-align: center;
}

.un-bg > div{
    display:table-cell;
    vertical-align: middle;
	font-size:200%;
	line-height:150%;
	color:#fff;
	text-shadow: 1px 1px 3px #000;
}

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

	index.html（TOP）

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

	MAIN スライダー設定

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

.main-visual{	margin-bottom:10px;}

.main-visual li{
	float:left;
}

.msub-visual li{
	float:left;
	width:49.5%;
	margin:0 1% 0 0;
}

.msub-visual li img{
	width:100%;
	height:auto;
}

.msub-visual li:last-child{	margin:0;}

.msub-visual p:last-child{	
	margin-top:4px;
	font-size:11px;
}

.noslide {
	width: 80%;
	margin: 0 auto;
	height: 400px;
	position:relative;
}

/* 設定 */

.container {
	width: 100%;
	height: 100%;
	padding-bottom:70px;
	overflow:hidden;
}

.sp-container{	display:none;}

.slide_all {
	width: 80%;
	margin: 0 auto;
	height: 400px;
	position:relative;
}

.maincopy{
	position:absolute;
	top:10%;
	left:50%;
	margin:0 0 0 -50%;
}

.top-contact{
	position:absolute;
	bottom:0%;
	right:0%;
}

.maincopy img,
.top-contact img{
	width:100%;
	height:auto;
}



.slide_wrap {
	width: 3360px;
	position: absolute;
	left: 50%;
	margin-left: -1680px;
}

.slide_body {	width: 100%;}

.slide {
	width: 80%;
	font-family: 'arial';
	color: #fff;
	font-size: 50px;
	height: 400px;
	text-align:center;
}

.slide img {
	width: 100%;
	vertical-align: bottom;
}

/* 装飾 */

.container .bx-pager {
	text-align: center;
	height: 25px;
}

.container .bx-pager-item {	display: inline-block;}

.container .bx-pager-item a{
	display: block;
	height: 10px;
	width: 10px;
	text-indent: -9999px;
	background: #999;
	border-radius: 10px;
	margin:10px 8px 0;
}

.container .bx-pager-item a.active {	background: #000;}

.container .bx-prev {
	left: 42%;
	display:none;
	background: url(../img/controls.png) no-repeat 0 0px;
}

.container .bx-next {
	right: 42%;
	display:none;
	background: url(../img/controls.png) no-repeat -56px 0px;
}


.container .bx-controls-direction a{
	position: absolute;
	top: -900%;
	margin-top: -16px;
	outline: 0;
	width: 56px;
	height: 56px;
	text-indent: -9999px;
	z-index: 9999;
}

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

	ビベーレ堂島の想い

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

.greet{
	width:94%;
	margin:90px auto 60px;
}

.greet div{
	float:none;
	width:390px;
	margin:0px auto 20px;
}

.greet dl{
	float:none;
	width:94%;
	margin:0px auto 20px;
	text-align:center;
}

.greet dl dt{
	font-size:260%;
	line-height:150%;
	margin-bottom:30px;
}

.greet dl dd.sub{
	font-size:120%;
	font-weight:bold;
	margin-bottom:20px;
	color:#E41D72;
}

.greet dl dd h2{
	font-weight:normal;
	margin-bottom:30px;
}

.pbtn a{
	width:80%;
	display:block;
	margin:0px auto;
	box-shadow: 0 0 0 2px #E41D72 inset;
	padding:30px 5%;
	font-size:120%;
	text-align:center;
	color:#E41D72;
	background:url(../img/pink-arrow.png) no-repeat 92% center;
}

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

	よくある悩み

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

.ranking{
	width:94%;
	margin:0px auto 30px;
}

.ranking li{
	width:31.6%;
	float:left;
	margin:0 2.6% 0 0;
	list-style:none;
}

.ranking li img{
	width:100%;
	height:auto;
}

.ranking li:last-child{
	margin:0;
}

.cause{	
	text-align:center;
	font-size:100%;
	font-weight:bold;
	margin:0px 0 10px;
}

.inpac{
	text-align:center;
	font-size:160%;
	font-weight:bold;
	color:#573933;
	margin-bottom:20px;
}

h1{
	text-align:center;
	font-weight:normal;
	width:94%;
	margin:0px auto;
}

.malfunction{
	width:94%;
	margin:60px auto;
	text-align:center;
}

.malfunction h3{
	margin-bottom:40px;}

.malf{
	font-size:160%;
}

.malfunction strong{
	font-size:160%;
}

.beaf{
	width:100%;
}

.check{
	width:100%;
	margin:60px auto;
}

.days{
	text-align:center;
	background:#E41D72;
	padding:30px 0;
	font-size:130%;
	line-height:150%;
	color:#fff;
	margin-bottom:40px;
}

.possibility{
	text-align:center;
	font-size:120%;
	font-weight:bold;
	font-weight:normal;
	color:#E41D72;
	margin-bottom:26px;
}

.cyecklist{
	background:url(../img/un-arrow.png) no-repeat center bottom;
	padding-bottom:50px;
	margin:0 auto 50px;
	width:94%;
}

.cyecklist ul{
	margin:0px auto;
	
}

.cyecklist li{
	float:left;
	width:31.6%;
	margin:0 2.6% 2.6% 0;
	list-style:none;
}

.cyecklist li img{
	width:100%;
	height:auto;
}

.cyecklist li:nth-child(3n){
	margin:0 0 2.6% 0;
}

.ans{
	font-size:120%;
	text-align:center;
}

.sns{
	width:94%;
	margin:60px auto;
}

.sns ul li{
	float:left;
	width:48.2%;
	list-style:none;

}

.sns ul li:last-child{
	float:right;
}

.sns ul li img{
	width:100%;
	height:auto;
}

.bwbtn a{
	width:80%;
	display:block;
	box-shadow: 0 0 0 3px #573933 inset;
	padding:30px 15% 30px 5%;
	font-size:120%;
	text-align:center;
	color:#573933;
	background:url(../img/blown-arrow.png) no-repeat 92% center;
}

.works{
	background:url(../img/treat-bg.jpg) center center;
	background-size:cover;
	padding:60px 0;
}

.works .method{
	text-align:center;
	color:#333;
	font-size:160%;
	margin-bottom:30px;
}

.works ul{
	width:94%;
	margin:60px auto 0;
}

.works li{
	float:left;
	width:48.2%;
	list-style:none;
	margin:0 3.6% 3.6% 0;
}

.works li:nth-child(2n){ margin:0 0 3.6% 0;}

.works li img{
	width:100%;
	height:auto;
}

.works li h4{
	font-size:120%;
	color:#583933;
	margin-bottom:10px;
}

.rbtn a{
	width:60%;
	display:block;
	box-shadow: 0 0 0 2px #E41D72 inset;
	padding:30px 5%;
	font-size:120%;
	text-align:center;
	color:#E41D72;
	margin:0px auto;
	background:url(../img/pink-arrow.png) no-repeat 92% center #fff;
}


.difference{
	width:94%;
	margin:60px auto 0;
}

.diff{
	text-align:center;
	font-size:140%;
	color:#573933;
	margin-bottom:40px;
}

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

	access.html（アクセス）

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

.access-area{
	width:94%;
	margin:0 auto 60px;
}

.ac-think{	margin-bottom:50px;}

.ac-think .fl img,
.ac-think .fr img{
	width:100%;
	height:auto;
}

.th-btn li{
	width:48%;
	float:left;
	margin:0 4% 3% 0;
	list-style:none;
}

.th-btn li:nth-child(2n){
	margin:0 0 3% 0 !important;
}

.th-btn li:last-child{
	margin:0;
	width:100%;
	clear:both;
	float:none !important;
	text-align:center;
	background:#583A34;
}

.promise{
	width:94%;
	margin:0 auto 60px;
}

.promise .stit{
	font-size:180%;
	text-align:center;
	border-top:1px #ddd solid;
	padding:25px 0;
	margin-bottom:50px;
	background:url(../img/un-line.gif) no-repeat center bottom;
}

.promise dd{
	margin-bottom:40px;
}

.promise dd .photo{
	float:left;
	width:38%;
}

.promise dd .txt{
	width:58%;
	float:right;
}

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

	line.html（LINE簡単予約）

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

.line-area{
	width:94%;
	margin:0 auto 60px;
}

.line-swin .fl{
	width:100%;
	float:none;
}

.line-swin .fl h2{
	background:url(../img/line-logo.gif) no-repeat left center;
	color:#FF6633;
	font-size:220%;
	line-height:150%;
	padding:0 0 0 89px;
	margin-bottom:30px;
	min-height:79px;
}

.code{
	background:url(../img/nav-bg.gif) repeat left top;
	padding:20px 50px;
}

.code dt{
	float:none;
	width:160px;
	text-align:center;
	margin:0px auto;
}

.code dd{
	width:380px;
	margin:0px auto;
	float:none;
	padding-top:20px;
}

.linestep img{
	width:100%;
	height:auto;
}

.line-swin .fr{
	display:none;	
}

.line-swin .fl .step{
	font-size:140%;
	text-align:center;
}

.subline{
	font-size:170%;
}

.line-area ul li{
	width:31.6%;
	margin:0 2.6% 0 0;
}

.line-area ul li img{
	width:100%;
	height:auto;
}

.line-area ul li dt{
	font-size:120%;
	margin-bottom:10px;
}

.item{
	background:#FF6633;
	text-align:center;
	color:#fff;
	padding:14px 0;
	font-size:180%;
	font-weight:bold;
	line-height:150%;
	margin:40px 0;
}

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

	staff.html（スタッフ紹介）

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

.staff-area{
	width:94%;
}

.staff-area dl dt{
	width:48.2%;
	float:left;
}

.staff-area dl dd{
	float:right;
	width:48%;
}

.staff-area dl dd ul{
	background:url(../img/nav-bg.gif) repeat left top;
	padding:20px;
	margin-bottom:30px;
}

.staff-area dl dd li{
	float:left;
	padding:5px 10px;
	text-align:center;
	color:#fff;
	background:#573933;
	list-style:none;
	border-radius: 10px;
	margin:0 10px 10px 0; 
}

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

	twitter.html（ツイッター相談）

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

.twitter-area{	width:94%;}

.how-tweet .fl img{
	width:100%;
	height:auto;
}

.how-tweet .fr .twt{
	font-size:170%;
}

.trouble h2{
	font-weight:normal;
	text-align:center;
	line-height:150% !important;
}

.twitter-w{	width:94%;}

.twitter-w img{
	width:100%;
	height:auto;
}

.line-adf{
	margin:0 auto;
	width:100%;
	background:url(../img/line-adf.jpg) no-repeat center top;
	background-size:cover;
	padding:0;
}

.line-adf .fl{
	float:left;
	width:50%;
}

.line-adf .fr{
	float:right;
	width:50%;
	width:160px;
}

.trance{ 
	background-color: rgba(255,255,255,0.6);
	padding:66px 5% 40px;
}

.focs{	margin-bottom:30px;}

.line-adf .bwbtn{
	font-size:90%;
	background-color: rgba(255,255,255,0.6);
}

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

	treatment.html（治療コース）

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

.treatment-area{
	width:94%;
}

.treatment-area h2{
	font-weight:normal;
	line-height:150%;
	margin-bottom:30px;
}

.treatment-area h2 span{
	font-size:180%;
}

.course .fl{
	float:none;
	width:100%;
	text-align:center;
}

.course .fr{
	float:none;
	width:100%;
	text-align:center;
}

.course .fr dt{
	font-size:160%;
	line-height:150%;
	font-family:Arial, Helvetica, sans-serif;
	margin:14px 0 20px;
}

.course .fr dt span{
	color:#fff;
	background:#FF6633;
	text-align:center;
	padding:10px 5px;
	margin-right:15px;
}

.sick ul{
	width:94%;
}

.check-seet{
	width:94%;
	margin:0px auto;
}

.tab{	overflow:hidden;}

.tab li{
	background:#ccc;
	width:28%;
	float:left;
	font-size:90%;
	text-align:center;
	padding:2%;
	line-height:150%;
	list-style:none;
	margin:0 2% 5px 0;
	cursor:pointer;
	background:
		-moz-linear-gradient(45deg,  transparent 0px, #CCCCCC 0px),
		-moz-linear-gradient(135deg, transparent 0px, #CCCCCC 0px),
		-moz-linear-gradient(225deg, transparent 0px, #CCCCCC 0px),
		-moz-linear-gradient(315deg, transparent 10px, #CCCCCC 10px);
	background:
		-o-linear-gradient(45deg,  transparent 0px, #CCCCCC 0px),
		-o-linear-gradient(135deg, transparent 0px, #CCCCCC 0px),
		-o-linear-gradient(225deg, transparent 0px, #CCCCCC 0px),
		-o-linear-gradient(315deg, transparent 10px, #CCCCCC 10px);
	background:
		-webkit-linear-gradient(45deg,  transparent 0px, #CCCCCC 0px),
		-webkit-linear-gradient(135deg, transparent 0px, #CCCCCC 0px),
		-webkit-linear-gradient(225deg, transparent 0px, #CCCCCC 0px),
		-webkit-linear-gradient(315deg, transparent 10px, #CCCCCC 10px);
	background-position: bottom left, bottom right, top right, top left;
	background-size: 51% 51%;
	background-repeat: no-repeat;
}

.tab li:nth-child(3n){
	margin:0 0 5px 0 !important;
}

.tab li:last-child{
	margin-right:0;}

.tab li.select{	
	background:
		-moz-linear-gradient(45deg,  transparent 0px, #FF6633 0px),
		-moz-linear-gradient(135deg, transparent 0px, #FF6633 0px),
		-moz-linear-gradient(225deg, transparent 0px, #FF6633 0px),
		-moz-linear-gradient(315deg, transparent 10px, #FF6633 10px);
	background:
		-o-linear-gradient(45deg,  transparent 0px, #FF6633 0px),
		-o-linear-gradient(135deg, transparent 0px, #FF6633 0px),
		-o-linear-gradient(225deg, transparent 0px, #FF6633 0px),
		-o-linear-gradient(315deg, transparent 10px, #FF6633 10px);
	background:
		-webkit-linear-gradient(45deg,  transparent 0px, #FF6633 0px),
		-webkit-linear-gradient(135deg, transparent 0px, #FF6633 0px),
		-webkit-linear-gradient(225deg, transparent 0px, #FF6633 0px),
		-webkit-linear-gradient(315deg, transparent 10px, #FF6633 10px);
	background-position: bottom left, bottom right, top right, top left;
	background-size: 51% 51%;
	background-repeat: no-repeat;
	color:#fff;
}

.content{	background:url(../img/grid.gif) repeat left top;}

.content > li{
	border-top:5px solid #FF6633;
	padding:40px 60px;
	list-style:none;
}

.hide {display:none;}

.content li:after,
.content dl dd ul:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .content li,
* html .content dl dd ul { zoom:1; }
*:first-child+html .content li,
*:first-child+html .content dl dd ul { zoom:1; }

.content dl{
	float:left;
	width:46%;
}

.content .kos{
	float:right;
	width:50%;
}

.content .kos img{
	width:100%;
	height:auto;
}

.content dl dt{
	text-align:center;
	color:#fff;
	background:#E41D72;
	padding:10px 0;
	font-size:140%;
	margin-bottom:30px
}

.content dl dd .chexck{
	background:url(../img/clipboard.svg) no-repeat left center;
	background-size:24px auto;
	padding:0 0 0 30px;
	font-size:154%;
	margin-bottom:20px;
}

.content dl dd .eng{
	color:#FF6633;
	margin-bottom:20px;
}

.content dl dd ul{	margin-bottom:40px;}

.content dl dd ul li{
	width:48%;
	float:left;
	list-style:none;
	margin:0 4% 2% 0;
}

.content dl dd ul li:nth-child(2n){
	margin:0 0 2% 0;
}

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

	contact.html（お問い合わせ）

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

.contact-bg{
	background:url(../img/contact-bg.jpg) no-repeat center center;
	background-size:cover;
}

.contact-area{
	width:94%;
	margin:0 auto 60px;
}

.sub-tit{
	background:url(../img/news-line.gif) no-repeat left 60%;
	padding:0 0 0 50px;
	font-size:130%;
	font-weight:bold;
	margin-bottom:30px;
}

.un-line{
	width:94%;
	margin:0px auto 50px;
	border-bottom:1px dotted #ccc;
	padding-bottom:20px;
}

.m-form{
	width:94%;
}

.m-form td{
	padding:10px 10px 10px 30px;
	vertical-align:top;
}


.m-form th{
	width:36%;
	padding:10px;
	vertical-align:top;
}

.m-form th span{
	float:right;
	padding:3px 4%;
	background:#EE3523;
	color:#fff;
	margin:0;
}

.m-form td input,
.m-form td textarea{
	border:none;
	padding:14px 10px;
	background:#eee;
}

.long input,
.long textarea{
	width:80%;}
	
.middle input{
	width:60%;
}

.min input{
	width:50px;
}

.min span{
	display:block;
}
	
.short input{
	width:40%;}
	
.submit{
	text-align:center;
	padding:50px 0;
}

.submit .min{
	font-size:80%;
	margin:10px 0 30px;
}

.submit input{
	border:none;
	color:#fff;
	background:#034297;
	padding:20px 80px;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	font-size:130%;
	font-weight:bold;
	cursor:pointer;
}

.submit input:hover{
	background:#023171;
}