@charset "utf-8";

/* ===================================================================
	01 基本設定
	02 リンク設定
	03 フォント設定
	04 clearfix
	05 contents
=================================================================== */

/* 01 基本設定
--------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);
html{color:#000000;text-align:center;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0; vertical-align:top;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{font-size:16px;}legend{color:#000}
body {font-size:14px;text-align:center;line-height:1.6;margin: 0; -webkit-font-smoothing: antialiased;
	  font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif; letter-spacing: 0.1em; font-weight: 200;
}

/* 02 リンク設定
--------------------------------------------------------------------*/
a:link{color:#000000; text-decoration:none;}
a:visited{color:#000000; text-decoration:none;}
a:hover{color:#009cff; text-decoration:none; }
a:active{color:#000000;}

/* 03 フォント設定
--------------------------------------------------------------------*/
.fontS {
	font-size:12px;
}


/* 04 clearfix
--------------------------------------------------------------------*/
ul:after,
ol:after,
dl:after,
.clearfix:after
	{
	content:" ";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

/* 05 contents
--------------------------------------------------------------------*/
.wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
	min-width: 1000px;
}
.pc {
	display: inline;
}
.sp {
	display: none;
}

/* header
--------------------------------------------------------------------*/
header {
 	background: url("../images/headerimg_book.jpg") right center no-repeat;
  	background-size: cover;
	display: block;
	position: relative;
	width: 100%;
	min-width: 1000px;
	height: 340px;
}
	header .inner {
		margin: 0 auto;
		width: 1000px;
		padding-top: 60px;
	}

	header .inner h1{
		font-size: 20px;
		color: #000000;
		font-family: 'Ubuntu', sans-serif;
		font-weight: 500;
		letter-spacing: 0.1em;
	}
	header .inner p{
		color: #000000;
		letter-spacing: 0.1em;
	}

	header .inner .logo{
		width: 100px;
		margin: 0 auto;
	}
	header .inner .logo img{
		width: 100%;
		border-radius: 50%;
	}

	header .inner .text{
		font-size: 12px;
		line-height: 1.4;
	}

	.bgWhite{
		padding-top: 40px;		
		background-color: rgba( 255, 255, 255, 0.65 );
		padding: 20px 0;
	}

/* footer
--------------------------------------------------------------------*/
footer {
	position: relative;
	padding: 40px 0;
	width: 100%;
	background-color: #f4f4f4;
}
	footer .inner {
		text-align: center;
		margin: 0 auto;
		width: 960px;
		font-size: 12px;

	}


/* common
--------------------------------------------------------------------*/
.mr20{
	margin-right: 20px;
}
.mr30{
	margin-right: 30px;
}

.fmid{
	font-size: 18px;
	font-weight: 300;
}


.inner {
	text-align: center;
	margin: 0 auto;
	width: 960px;
}



/* recommend
--------------------------------------------------------------------*/

#recommend {
	width: 100%;
	min-width: 1000px;
	margin: 80px 0;
}

#recommend .lead{
	font-size: 24px;
	font-weight: 300;
	margin-bottom: 40px;
}

.btn a{
	display: inline-block;
	padding: 10px 50px;
	font-size: 16px;
	color: #ffffff;
	font-weight: 400;
	margin: 30px 0 10px;
	border: 1px solid #ffffff;
	line-height: 1;
}
.btn a:hover{
	opacity: 0.6;
	background-color: #ffffff;
	color: #000000;
}

.recommendBox{
	padding: 40px 0;
	color: #ffffff;
}

.recommendBox ul{
	overflow: hidden;
	margin: 0 auto;
	width: 600px;
}

.recommendBox li{
	float: left;
	width: 180px;
	height: 180px;
	margin: 0 10px 30px;
	background-color: rgba( 255, 255, 255, 0.65 );
	border-radius: 50%;
	box-sizing: border-box;
	color: #000000;
}
.recommendBox li p{
	word-wrap: break-word;
	width: 180px;
	height: 180px;
	padding: 10px;
	vertical-align: middle;
	display: table-cell;
	font-weight: 400;
	font-size: 16px;
}

.recommendBox .fmid{
	    font-weight: 500;
}

.ayurveda{
	background: url(../images/img_ayurveda.jpg)no-repeat center center;
	background-size: cover;
}
.pause{
	background: url(../images/img_pause.jpg)no-repeat center center;
	background-size: cover;
}
.breath{
	background: url(../images/img_breath.jpg)no-repeat center center;
	background-size: cover;
}

/**********************************
socialBtn
**********************************/
#socialBtn {
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 50;
	padding:14px;
	background: rgba(255,255,255, 0.5);
}
div.songnovels_content div.sns{
	padding:20px 0 40px 0;
	margin:0;
	height:20px;
	line-height: 1;
}
.tweet{
	padding:0;
	margin:0;
	float:left;
	width:100px;
	line-height: 1;
}
.fb-like{
	padding:0;
	margin:0;
	float:left;
	line-height: 1;
}
.fb_iframe_widget > span {
	vertical-align: baseline !important;
}