@charset "utf-8";

/*
Theme Name: Sarah House
Author: サラハウス
Author URL: http://www.sarah-house.jp/
*/

/* =============================================================================
   HTML5 表示定義
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   ベース
   ========================================================================== */
html, body {
  width: 100%;
}
html { height: 100%; font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #2e1d08;
	font-size:16px;
}
html, body, div, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	vertical-align: top;
}
button, input, select, textarea { font-family: sans-serif; color: #222; }

img, object, embed, video {	max-width: 100%; height:auto; }
img {
	vertical-align: top;
}

/*clearfix*/
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

.clearer {clear: both; display: block; margin: 0;	padding: 0;	height: 0; line-height: 1px; font-size: 1px;}
.clSp5 {clear: both; display: block; margin: 0 0 2px 0;	padding: 3px 0 0 0;	height: 0; line-height: 1px; font-size: 1px;}
.clSp10 {clear: both; display: block; margin: 0 0 5px 0;	padding: 5px 0 0 0;	height: 0; line-height: 1px; font-size: 1px;}
.clSp20 {clear: both; display: block; margin: 0 0 10px 0;	padding: 10px 0 0 0;	height: 0; line-height: 1px; font-size: 1px;}
.clSp30 {clear: both; display: block; margin: 0 0 15px 0;	padding: 15px 0 0 0;	height: 0; line-height: 1px; font-size: 1px;}
.clSp40 {clear: both; display: block; margin: 0 0 20px 0;	padding: 20px 0 0 0;	height: 0; line-height: 1px; font-size: 1px;}

/* =============================================================================
   リンク
   ========================================================================== */
a:link { color: #2e1d08; }
a:visited { color: #2e1d08; }
a:hover { color: #7B7878; }
a:active { color: #2e1d08; }

/* =============================================================================
   リスト
   ========================================================================== */
ul, ol {
  list-style: none;
  list-style-image: none;
  margin: 0 auto;
  padding: 0;
}
dd { margin: 0; }

/* =============================================================================
   共通
   ========================================================================== */
/* ==================================================== header */
header {
	text-align: left;
	background-color: #ffffff;
}

/* =============================================================================
   汎用
   ========================================================================== */
.clear {clear: both;}

/*外余白*/
.mgb10 {
	margin-bottom:10px !important;
}
.mgb15 {
	margin-bottom:15px !important;
}
.mgb20 {
	margin-bottom:20px !important;
}
.mgb30 {
	margin-bottom:30px !important;
}
.mgb40 {
	margin-bottom:40px !important;
}
.mgb50 {
	margin-bottom:50px !important;
}
.mgb60 {
	margin-bottom:60px !important;
}
.mgb80 {
	margin-bottom:80px !important;
}
.mgb100 {
	margin-bottom:100px !important;
}

/*内余白*/
.pdw5 {
	padding:0 5px;
}
.pdw10 {
	padding:0 10px;
}
.pdw15 {
	padding:0 0 15px;
}
.pdb10 {
	padding:0 0 10px 0;
}
.pdb20 {
	padding:0 0 20px 0;
}
.pdb30 {
	padding:0 0 30px 0;
}

/*揃え*/
.textR {
	text-align: right;
	display: block;
}
.textC {
	text-align: center;
	display: block;
}
.flL {
	float: left;
	display: block;
}
.flR {
	float:right;
}

/*区切りライン*/
.clLine {
	clear: both;
	display: block;
	margin: 0 0 20px 0;
	padding: 20px 0 0 0;
	height: 0;
	line-height: 1px;
	font-size: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E6E6E6;
}
/*区切りライン間隔小*/
.clLine8 {
	clear: both;
	display: block;
	margin: 0 0 8px 0;
	padding: 8px 0 0 0;
	height: 0;
	line-height: 1px;
	font-size: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E6E6E6;
}

/*画像ボタンエフェクト*/
.btnImg:hover {
	filter: alpha(opacity=0.8);
	-ms-filter: alpha(opacity=0.8);
	opacity: 0.6;
}

/*文字サイズ*/
.fs10 {
	font-size:10px;
}
.fs11 {
	font-size:11px;
}
.fs12 {
	font-size:12px;
}
.fs13 {
	font-size:13px;
}
.fs14 {
	font-size:14px;
}
.fs15 {
	font-size:15px;
}
.fs18 {
	font-size:18px;
}
.fs21 {
	font-size:21px;
}
.fs24 {
	font-size:24px;
}

.lh12 {
	line-height:1.2;
	display: inline-block;
}
.lh14 {
	line-height:1.4;
	display: inline-block;
}
.lh16 {
	line-height:1.6;
	display: inline-block;
}
.lh18 {
	line-height:1.8;
	display: inline-block;
}
.lh20 {
	line-height:2;
	display: inline-block;
}

/*タイプ*/
.ffMin {
	font-family: "游明朝", YuMincho, "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Times New Roman", serif;
}
.ffTalking {
  font-family: 'トーキング', Talking;
}

/*ウェイト*/
.fwb {
	font-weight:bold;
}

/*字間*/
.ls24 { letter-spacing: 0.24em; 
}

/*色*/
.fcBlue01 {
	color: #06C;
}
.fcBlue02 {
	color: #03F;
}
.fcBlue03 {
	color: #33C;
}
.fcRed01 {
	color: #842f5d;
}
.fcRed02 {
	color: #B92248;
}
.fcRed03 {
	color: #F69;
}
.fcOrg01 {
	color: #F60;
}
.fcPpl01 {
	color:#990099;
}

/* ボタン */
.returnBtnWrap {
  text-align:center;
}
.returnBtn {
  border: 3px solid #2e1d08;
  background-color: transparent;
  color: #fff;
  transition: .6s all;
  position: relative;
  text-align: center;
  margin: auto;
  display: inline-block;
}
.returnBtn::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #2e1d08;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.returnBtn::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(0);
  transform-origin: 50% 50%;
  opacity: 0;
  z-index:-1;
}
.returnBtn a {
  color:#FFFFFF;
  text-decoration: none;
  padding: 18px 30px;
  display:block;
}
.returnBtn:hover {
  color: #2e1d08;
}
.returnBtn:hover a {
  color: #2e1d08;
}
.returnBtn:hover::after {
  transform: scale(1);
  opacity: 1;
}


/* ===========================================================================================================================
		デスクトップレイアウト : 641 px ～最大 1200 px 
============================================================================================================================*/
body {
	font-size: 16px;
	line-height: 1.5em;
  min-width:1200px;
}

#wrapper {
  position:relative;
  width:100%;
  overflow:hidden;
  text-align:center;
}

br.brsp {
	display:none;
}
br.brSp {
	display:none;
}
br.brPc {
	display:block;
}
.spImg {
  display:none;
}

/* ==================================================== header */
.slicknav_menu { /*スマホメニュー非表示*/
	display:none;
}

/* header */
#headerTop {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    padding: 5px 0 0 0;
    line-height: 1;
    z-index:9000;
    border-bottom:2px solid #2D2D2D;
}
 
#headerTop a,
#headerTop {
    color: #fff;
    text-decoration: none;
}

#headerWrap {
  text-align: left;
  position: relative;
  padding:0;
  margin: 0 auto;
  width:1200px;
  height: 128px;
}

#pageTitle {
  font-size: 0.63em;
  color: #E4ADA2;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 5px;
  right: 5px;
  font-family: 'Libre Baskerville', serif;
}

#headerLogo {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    bottom: 10px;
  transition: all .5s;
}
 
/* transition */
#headerWrap,
#headerTop,
#headerTop:after,
#headerLogo,
#headerNav,
#headerNav ul li,
#headerNav ul li a,
#headerSns {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
/* Fixed */
#headerTop.fixed {
  height:48px;
  background: rgba(255,255,255,.9);
}
#headerTop.fixed #headerWrap {
	height:auto;
}
#headerTop.fixed #pageTitle {
  display:none;
}
#headerTop.fixed #headerLogo {
  width: 168px;
  position: absolute;
  top:0;
  left:0;
}
 
#headerTop.fixed:after {
  width: 100%;
  margin-top: 10px;
}

#headerNav {
  margin: 0;
  padding: 8px 0 0;
  position:absolute;
  bottom: 10px;
  right:0;
}
#headerTop.fixed #headerNav {
  padding:0;
  top:0;
}
#headerNav > ul {
	display:table;
	margin:0 auto;
}
#headerNav > ul li.menu-item {
	display:table-cell;
	position:relative;
  z-index: 1;
}
#headerNav > ul li.menu-item a{ 
  display: block;
  color: #666;
  text-decoration: none;
}
#headerNav > ul li.menu-item a:hover,
#headerNav > ul li.current-menu-item a,
#headerNav > ul li.current-menu-parent a,
#headerNav > ul li.current-post-ancestor a {
  color: #000;    
}
 
#headerNav > ul li.menu-item a:hover {
  background-color: #EEE;
}
 
#headerNav ul li ul.sub-menu {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  border-top: 1px solid #EEE;
}
#headerNav ul li:hover ul.sub-menu {
  display: block;
}
#headerNav ul li ul.sub-menu li{
  float: none;
  padding: 0;
	display:block;
}
#headerNav ul li ul.sub-menu li a {
  border: 1px solid #eee;
  border-top: none;
  padding: 10px;
  background-color: #FFF;
  color: #666;
  text-align: left;
  display: block;
  white-space: nowrap;
}
#headerNav ul li ul.sub-menu li.current-menu-item a {
  display: block;
  background-color: #FBF3FE; 
}

#headerNav ul li.revBtn {
	position:absolute;
	top: -41px;
	right: 6px;
}
	#headerTop.fixed #headerNav ul li.revBtn {
		position: relative;
		top: inherit;
		right: inherit;
		padding-left: 15px;
	}

#headerSns {
	position:fixed;
	top: 200px;
	right:10px;
}
	#headerTop.fixed #headerSns {
		position:fixed;
		top:80px;
		right:10px;
	}
#headerSns ul li {
	display:block;
	padding:5px 0;
	text-align: right;
}


/* ============================================================ contents */
.contentsWrap {
  width: 1200px;
  clear: both;
  text-align: left;
  margin: 0 auto;
  position: relative;
}
.contentsWrapSub {
	width: 1200px;
	clear: both;
	text-align: left;
	margin: 0 auto;
	padding-top: 240px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 80px;
	position: relative;
}

#contentsMain {
	float: left;
	width: 100%;
	padding: 0;
	font-size: 0.88em;
	line-height: 1.8;
	margin: 0 -300px 0 0;
	position: relative;
}
#contentsMainPd {
	width:auto;
	margin: 0 300px 0 0;
	padding: 0;
}

.contentsIn {
	width: 640px;
}
.contentsIn2 {
	width: 620px;
}

/******* content ********/
.main_content {
	overflow:hidden;
	width:750px;
	margin:0px auto;
}
.main_content .main_title{
	text-align:center;
	margin-bottom:25px;
}
.main_content section{
	margin-bottom:60px;
	overflow:hidden;
}

/* crumbs */
ul.crumbs{
	overflow:hidden;
	zoom:1;
	height:45px;
	width:750px;
	margin:0px auto;
}
ul.crumbs li{
	float:left;
	line-height:45px;
	margin-right:10px;
	color:#FAC500;
}
ul.crumbs li:after{
	content:">";
}
ul.crumbs li.cur:after{
	content:"";
}
ul.crumbs li span{
	font-size:90%;
	color:#FAC500;
}
ul.crumbs li a{
	font-size:90%;
	margin-right:10px;
	color:#FAC500;
}


#sidebar{
	width:195px;
	float:left;
}
#right_content{
	width:785px;
	float:right;
	margin-bottom:60px;
}

/* ============================================================ sideNav */
#sideNav {
	display: block;
	width: 300px;
	float: right;
	position: relative;
	text-align: left;
	background-color: #FFFFFF;
}

#sideNav h1,
#sideNav .sBtn {
  height: 52px;
  background-color: #000000;
  color: #FFFFFF;
  text-align: left;
  margin: 0 0 15px 0;
  padding: 0 15px;
  line-height: 52px;
}
#sideNav h1 a,
#sideNav .sBtn a {
	display: block;
	color: #FFFFFF;
	height: 52px;
	line-height: 52px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.06em;
	text-decoration: none;
}
#sideNav h1 img,
#sideNav .sBtn img {
	vertical-align:middle;
}

#sideNewsWrap,
#sideBlogWrap {
	overflow:auto;
	padding:0 14px;
}
#sideNewsWrap dt,
#sideBlogWrap dt {
	font-size:0.63em;
}
#sideNewsWrap dd,
#sideBlogWrap dd {
	font-size:0.68em;
}
#sideNewsWrap dd a,
#sideBlogWrap dd a  {
	text-decoration: none;
	color: #FF0086;
}
#sideNewsWrap { height: 112px; }
#sideBlogWrap { height: 112px; }
#sideFbWrap { height: 277px; }

/* ==================================================== footer */
footer {
  text-align: center;
  position: relative;
  clear: both;
  background-color: #231815;
}

#footerSns ul {
  display:table;
}
#footerSns ul li {
  display:table-cell;
	padding:0 10px;
}

#footerSns {
	padding:15px;
}

#footerNav li {
	display: -moz-inline-box;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	font-size:12px;
}
#footerNav li a {
	color:#FFFFFF;
	padding:0 10px;
	text-decoration:none;
}
#footerNav li a:hover {
	color: #C8C8C8;
}
#footerNav ul:before,
#footerNav li:after {
	content:"  |  ";
	color:#999;
	font-size:14px;
}

#footerEnd {
  padding: 20px 0;
}

#footerCopy {
  text-align: center;
  clear: both;
  color: #FFF;
}
#footerCopy small {
	font-size: 11px;
}

#pageTopWrap{
	position: fixed;
	right: 5%;
	bottom: 50px;
	display: none;
	z-index: 9999;
}
#pageTop{
	overflow:hidden;
	margin:0 auto;
}
#pageTop p{
	text-align:right;
}

/* 404 */
#page404 {
	padding: 240px 240px;
	text-align: center;
	line-height: 2em;
}

/* ===========================================================================================================================
		▲デスクトップレイアウト▲
============================================================================================================================*/