@charset "UTF-8";


/*　目次
-------------------------------------------------------------------*/
/*

●書体インポート関連
→Googleフォントのインポートです。

●インポート属性
→レスポンシブの為、PCとSPの切り分け用のCSS記載しております。

●スマホ表示用（フッター下部分に電話するボタン）
→表示はPHPで条件分岐します。

●注意事項ボックス関連
→注意事項のボックスで太線で囲われたボックスになります。
　補足説明、備考欄のボックスも含まれます。

●基本部分
→BODYなどの基本情報を記載しております。
　フッター部分など

●テキスト情報（段落、文字寄せ、蛍光ペン）
→pタグの基本概要です。
　基本は段落の下に10px相当の空白を設け、最後の段落では空白はゼロにします。
　文字を左寄せ、中寄せ、右寄せに関するクラスを記載しております。
　蛍光ペンのクラスを掲載しております。
　文字サイズの定義もしております。

●画像
→画像に関する内容です。

●パンくず
→パンくずに関する情報です。

●pagetop（一番上に戻るボタンの表記）
→画面右下に出現する上に戻るためのボタンです。

●padding / margin / br / width
→padding、marginに関する情報です。

●色
→色の指定です。

●背景色
→背景色の指定です。

●Listタグ
→リストタグに関する情報です。

●button
→CSSで構成された角丸ボタンです。3種類あります。

●タブ
→リストタグをタブを使う際のCSSです。

●jQuery accordion
→アコーディオンのタグです。

●ドロワー補助部分
→ドロワーメニューのCSSです。

●フェードイン
→フェードインに使うJSファイル

●ローディング
→ローディング画面用のCSS

*/

.googlemap-bw iframe {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
  }

/*　書体インポート関連
-------------------------------------------------------------------
@import url(//fonts.googleapis.com/css?family=M+PLUS+1p);

@import url(//fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
@import url(//fonts.googleapis.com/css?family=Montserrat:400,700);

@import url(//fonts.googleapis.com/css?family=Sawarabi+Mincho);
*/
/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Roboto:wght@100;400;500&display=swap');
@import url(//fonts.googleapis.com/css2?family=Roboto:wght@100;400;500&display=swap);
*/
/*英文
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed);
@import url(//fonts.googleapis.com/css?family=Ropa+Sans);
*/
/*hタグフォント
@import url(//fonts.googleapis.com/css?family=Playfair+Display);
@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');




/*　インポート属性
-------------------------------------------------------------------*/

/* 959px以下に適用されるCSS（タブレット用） */
/*@import url("./pc.css")only screen and (min-width:800px);*/
/* 959px以下に適用されるCSS（スマホ） */
/*@import url("./sp.css")only screen and (max-width:799px);*/

#map {
    width: 100%;
    height: 600px;
}
/*　スマホ表示用（フッター下部分に電話するボタン）
-------------------------------------------------------------------*/

#spCall{
	position: fixed; /* 要素の位置を固定する */
	bottom: 0; /* 基準の位置を画面の一番下に指定する */
	right: 0; /* 基準の位置を画面の一番右に指定する */
	padding: 0.5em 1em 1.5em 1em;
	width: 100%;
	background: #111111;
}

#spCall > div{
	display: flex;
	flex-wrap: wrap;
}

#spCall > div > div{
	text-align: center;
	width: 100%;
	font-size: 95%;
	padding: 0 0.5em;
}

#spCall > p{
    text-align: center;
	text-align: center;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: 700;
	color: #FFF;
	margin-bottom: 0.5em;
}

#phoneN{
    display: block;
    padding: 0.25em;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    background-color: #1d8825;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 50px;
    border-radius: 5px;
    color: #fff;
}

#phoneN a,
#mailN a{
    display: block;
    color: #fff;
	text-decoration:none; 
}


#mailN a{
    display: block;
    padding: 0.5em;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    background-color: #fba100;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 50px;
    border-radius: 5px;
    color: #fff;
	width: 100%;
}


/*　注意事項ボックス関連
-------------------------------------------------------------------*/
.important{
	clear: both;
	display: block;
	text-align: center;
	background: #efbfc6;
	border: 5px solid #e76471;
	padding: 0.5em;
	margin: 1em 0;
}

.important0{
	clear: both;
	display: block;
	text-align: center;
	background: #efbfc6;
	border: 5px solid #e76471;
	padding: 0.5em;
	margin: 0;
}


/* 補足説明 */

.hosoku{
	clear: both;
	text-align: center;
	background-repeat: repeat-y;
	font-size: 90%;
	line-height: 150%;
	background: #EEEEEE;
	border: 1px solid #CCCCCC; 
	margin:	0.5em 0;
	padding: 0.5em;
}

/* 備考欄 */
.bikou{
	text-align: center;
	background-repeat: repeat-y;
	font-size: 80%;
	line-height: 150%;
	background: #EEEEEE;
	border: 1px solid #CCCCCC; 
	margin:	0 0 10px 0;
	padding: 10px;
}

.ok{
	text-align: left;
	background-repeat: repeat-y;
	font-size: 100%;
	line-height: 180%;
	color: #007172;
	font-weight: 700;
	background: #cdf4c7;
	border: 10px solid #cdf4c7; 
	margin:	0.5em ;
	padding: 0.5em;
}

.error{
	text-align: left;
	background-repeat: repeat-y;
	font-weight: bold;
	font-size: 100%;
	line-height: 180%;
	background: #f4cac7;
	border: 10px solid #f4cac7; 
	margin:	0.5em ;
	padding: 0.5em;
}


/* チェックポイント
------------------------------------------------*/
.checkPointBox{
	padding: 1em;
	border: 10px solid #30ae7c ;
	background: #fbf2db;
}

.checkPointBox dt{
	color: #30ae7c;
	margin-bottom: 1em;
	font-weight: 700;
	font-size: 120%;
}

.checkPointBox dd{
	margin-bottom: 0.5em;
	padding-bottom: 0;
	color: #000;
}

.checkPointBox ul {
	font-size: 100%;
	list-style-type: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.checkPointBox li {
	margin-bottom: 0.5em;
	position: relative;
}
.checkPointBox li::after {
	content: '';
	display: block;
	position: absolute;
	top: .5em;
	left: -1.5em;
	width: 10px;
	height: 5px;
	border-left: 2px solid #25AF01;
	border-bottom: 2px solid #25AF01;
	transform: rotate(-45deg);
}
.checkPointBox li :last-child{
	margin: 0;
}

/*------------------------------------------------------
このファイルの概要
このファイルは大枠のCSSに関する定義のエリアです。
基本的なCSSはこちらで定義しております。
トップページはtop.css
サブページはsub.cssで定義しております。
------------------------------------------------------*/

/*　基本部分
------------------------------------------------------*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

body,article,section,table,
div,pre,p,blockquote, form,
dl,dt,dd,li,h1,h2,h3,h4,h5,h6, 
embed,object,
header,footer,article,aide,figure{ 
	margin: 0;
	padding: 0;
	vertical-align: baseline; 
	font-size: 100%;
	font-size: 100.01%;
}


body{
	font-weight: 500;
	line-height: 180%;
	font-family: Yu Gothic, Meiryo, sans-serif,メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Verdana, Arial, Helvetica, sans-serif;
	background: #FFF;
	/*background: #DDDDDD;*/
}

#wrap{
	/*background: #EFEFEF;*/
}
/*
#wrap{ 
	display:none;
}*/

address{
	margin: 0;
	padding: 0.5em;
	font-style: normal;
	font-size: 70%;
	margin: 0em;
}

.copyright{
	/*border-top: 3px solid #1f2a34;*/
	background: #000000;
	color: #FFF;
}


.line {
	margin: 2em 0;
	border: none;
	border-top: dashed 1px #CCCCCC;
	height: 1px;
	color: #FFFFFF;
}

.off{
	display: none;
}

.gallery {
	color:	#fff;
}

.zero{
	margin: 0;
	padding: 0;
	border: 0;
}

.mini{
	font-size: 80%;
	line-height: 180%;
}

/*　テキスト情報（段落、文字寄せ、蛍光ペン、サイズ）
------------------------------------------------------*/
p{
	font-size: 98%;
	margin-bottom: 1em;
}

p:last-child{
	margin-bottom: 0;
}

.textL{
	text-align: left;
}

.textC{
	text-align: center;
}

.textR{
	text-align: right;
}

.bold{
	font-weight: bold;
}

.keikoupenn{
	font-style: normal;
	letter-spacing: -1px;
	color: #CC0000;
	font-size: 120%;
	background:linear-gradient(transparent 60%, #ffd800 60%);
	padding: 0 0.2em;
	margin: 0 0.2em;
}

.keikoupen{
	font-style: normal;
	font-weight: bold;
	letter-spacing: -1px;
	color: #CC0000;
	font-size: 120%;
	background:linear-gradient(transparent 60%, #ffd800 60%);
	padding: 0 0.2em;
	margin: 0 0.2em;
}

.keikoupen0{
	font-style: normal;
	font-weight: bold;
	letter-spacing: -1px;
	color: #CC0000;
	font-size: 120%;
	background:linear-gradient(transparent 60%, #ffd800 60%);
	padding: 0 0.2em;
	margin: 0 0;
}

.font80,.mini{font-size: 80%;}
.font90{font-size: 90%;}
.font120{font-size: 120%;}
.font130{font-size: 130%;}
.font140{font-size: 140%;}
.font150{font-size: 150%;}
.font160{font-size: 160%;}
.font180{font-size: 180%;}
.font200{font-size: 200%;}
.font240{font-size: 240%;}
.lineheight120{line-height: 120%;}
.lineheight150{line-height: 150%;}
.lineheight180{line-height: 180%;}
.lineheight240{line-height: 240%;}


/*　画像
------------------------------------------------------*/
img{
	/*画像下の空白を埋める為のおまじない*/
	vertical-align: bottom;
}

figure aside{
	padding: 0.5em 0;
	font-size: 80%;
	line-height: 150%;
	text-align: center;
}

a.hover:hover {
	opacity: 0.5 ;
	transition: 0.5s;
}

/* 画像寄せ（clear属性が必要） */

.imgLeft,
.imgLeft10{
	float: left;
	margin: 0 1em 1em 0;
}

.imgRight,
.imgRight10{
	float: right;
	margin: 0 0 1em 1em;
}

.imgLeft20{
	float: left;
	margin: 0 1em 0 0;
}

.imgRight20{
	float: right;
	margin: 0 0 1em 1em;
}

.imgLeft05{
	float: left;
	margin: 0 1em 0.5em 0;
}

.imgRight05{
	float: right;
	margin: 0 0 0.5em 1em;
}


/*　パンくず
------------------------------------------------------*/
.pankuzu {
	font-size: 85%;
	line-height: 180%;
	margin: 1em 0;
}

.pankuzu a{
	color: #000;
	text-decoration: none;
}

.pankuzu a:hover{
	color: #f34d71;
}

/*　pagetop（一番上に戻るボタンの表記）
------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 70%;
}
#page-top a {
	background: #222222;
	text-decoration: none;
	color: #fff;
	width: 80px;
	padding: 8px;
	text-align: center;
	display: block;
	border-radius: 0px;
	line-height: 150%;
}
#page-top a:hover {
	text-decoration: none;
	background: #1f2a34;
	transition: all .1s;
}

/*　padding / margin / br / width
-----------------------------------------------------*/
.p05{padding: 0.5em;}
.p10{padding: 1em;}
.p15{padding: 1.5em;}
.p20{padding: 2em;}
.p0500{padding: 0.5em 0;}
.p1000{padding: 1em 0;}
.p1500{padding: 1.5em 0;}
.p2000{padding: 2em 0;}
.p3000{padding: 3em 0;}
.p5000{padding: 5em 0;}
.p10000{padding: 10em 0;}
.p0020{margin: 0 2em}
.p0005{padding: 0 0.5em;}
.p0010{padding: 0 1em;}
.p0015{padding: 0 1.5em;}

.m05{margin: 0.5em;}
.m10{margin: 1em;}
.m15{margin: 1.5em;}
.m20{margin: 2em;}
.m0500{margin: 0.5em 0;}
.m1000{margin: 1em 0;}
.m1500{margin: 1.5em 0;}
.m2000{margin: 2em 0;}
.m0005{margin: 0 0.5em;}
.m0010{margin: 0 1em;}
.m0015{margin: 0 1.5em;}
.m0020{margin: 0 2em;}

.br{margin-bottom: 0.5em;}
.br2{margin-bottom: 1em;}
.br3{margin-bottom: 1.5em;}
.br4{margin-bottom: 2em;}
.br5{margin-bottom: 2.5em;}

.width10{width: 10%;}
.width20{width: 20%;}
.width25{width: 25%;}
.width30{width: 30%;}
.width40{width: 40%;}
.width50{width: 50%;}
.width60{width: 60%;}
.width70{width: 70%;}
.width80{width: 80%;}
.width90{width: 90%;}
.width100,.width100sp{width: 100%;}

.width10auto{width: 10%; margin: auto;}
.width20auto{width: 20%; margin: auto;}
.width25auto{width: 25%; margin: auto;}
.width30auto{width: 30%; margin: auto;}
.width40auto{width: 40%; margin: auto;}
.width50auto{width: 50%; margin: auto;}
.width60auto{width: 60%; margin: auto;}
.width70auto{width: 70%; margin: auto;}
.width80auto{width: 80%; margin: auto;}
.width90auto{width: 90%; margin: auto;}

@media screen and (min-width:800px) { 
/* PCサイズ */
	.width20pc{width: 20%;}
	.width30pc{width: 30%;}
}
@media screen and (max-width:800px) { 
/* タブレットサイズ */
	.width20pc{width: auto;}
	.width30pc{width: auto;}
}

.bgfocus{ background: #fafad6;}


/* 物件検索ボタン */
.bukkenCategory{
	list-style: none;
	padding: 0;
	margin: 1em 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.bukkenCategory li{
	margin: 0.5em 0.1em;
	align-content: space-between;
}

.bukkenCategory a{
	padding: 0.5em 1em;
	text-decoration: none;
	color: #FFF;
	font-weight: 700;
	line-height: 180%;
}


/*　色
-------------------------------------------------------*/
.maincolor{color: #1f2a34;}
.mainColorbg{background: #1f2a34;}
.baibaiColor{background: #85b000;}
.chintaiColor{background: #00b3e0;}
.red,
.error{color: #FF0000;}
.enji{color: #CC0000;}
.white{color: #FFFFFF;}
.pink{color: #f20044;}
.backWhite{background: #FFFFFF;}

/*　背景色
-------------------------------------------------------*/
/* メインカラー専用のボックス 略してエムボックス */
.mBox{
	color: #FFFFFF;
	background: #209ac4;
}

.bgBlack{
	color: #FFFFFF;
	background: #000000;
}



/*グレーのボックス*/
.gBox{
	background: #f7f7f7;
}



/*　listタグ
-------------------------------------------------------*/
ul.list,
ul.list0,
ul.yokolist{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.list li{
	margin: 0;
	padding: 0;
	margin-bottom: 5px;
}


ul.yokolist li{
	margin: 0;
	padding: 0;
	float: left;
}

ul.list0 li{
	margin: 0;
	padding: 0;
}


/*	button
------------------------------------------------------*/
.button0,
.button,
.button2,
.button3{
	width: 95%;
	text-align: center;
	text-decoration: none;
	padding: 0.5em ;
	margin: 1em auto;
	border-radius: 0.5em;
    font-family: brandon-grotesque, sans-serif;
    font-weight: 700;
    font-style: normal;
}

a.button0{
	/*font-family: 'Noto Sans Japanese', sans-serif;*/
	display: block;
	background: #B82341;
	color: #FFF;
}

a.button0:hover{
	background: #d94e6a;
	transition: all .3s;
}


a.button{
	/*font-family: 'Noto Sans Japanese', sans-serif;*/
	display: block;
	background: #1f2a34;
	color: #FFF;
}

a.button:hover{
	background: #d94e6a;
	transition: all .3s;
}


a.button2{
	/*font-family: 'Noto Sans Japanese', sans-serif;*/
	display: block;
	background: #fdba03;
	color: #FFF;
}

a.button2:hover{
	background: #fecc44;
	transition: all .3s;
}

a.button3{
	/*font-family: 'Noto Sans Japanese', sans-serif;*/
	display: block;
	background: #CC0000;
	color: #FFF;

}

a.button3:hover{
	background: #FF0000;
	transition: all .3s;
}


/*　タブ
------------------------------------------------------*/
ul.tab {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.tab li {
	width: 50%;
	float: left;
	margin-right: 0px;
	padding: 10px;
	background-color: #EFEFEF;
	color: #666;
	text-align: center;
	cursor: pointer;
}
ul.tab li:hover {
	color: #FF0000;
}
ul.tab li.active {
	background-color: #bee0fe;
	color: #fff;
}
div.tabContent {
	clear: both;
	border-top: #005bac 2px solid;
	padding: 25px 0;
	width: 100%;
	display: none;
}
div.active {
	display: block;
}

/*　jQuery accordion
------------------------------------------------------*/
@media screen and (min-width:800px) { 
/* PCサイズ */
	.accordion-container .accordion-title {
		position: relative;
		margin: 0;
		padding: 0.625em 0.625em 0.625em 1.625em;
		background-color: #000;
		font-size: 1.25em;
		font-weight: normal;
		color: #fff;
		cursor: pointer;
		margin-bottom: 1em;
	}
	.accordion-container .accordion-title:hover,
	.accordion-container .accordion-title:active,
	.accordion-title.open { 
		background-color: #00aaa7;
	}

	.accordion-container .accordion-title::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 25px;
		width: 15px;
		height: 2px;
		/*縦線に*/
		transform: rotate(90deg);
		background: #fff;
		transition: all .3s ease-in-out;
	}

	.accordion-container .accordion-title::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 25px;
		/*横線*/
		width: 15px;
		height: 2px;
		background: #fff;
		transition: all .2s ease-in-out;
	}

	.accordion-container .accordion-title.open::before {
		transform: rotate(180deg);
	}

	.accordion-container .accordion-title.open::after {
		opacity: 0;
	}

	.accordion-content {
		display: none;
		margin-bottom: 1em;
		/*
		padding-left: 2.3125em;
		padding: 1em 0;*/
		/*border: 1px solid #0079c1;*/
	}

	/* CSS for CodePen */
	.accordion-container {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 1em;
	}


}
@media screen and (max-width:800px) { 
/* タブレットサイズ */
	.accordion-container .accordion-title {
		position: relative;
		margin: 0;
		padding: 1em;
		background-color: #000;
		font-size: 100%;
		font-weight: normal;
		color: #fff;
		cursor: pointer;
		margin-bottom: 1em;
	}
	.accordion-container .accordion-title:hover,
	.accordion-container .accordion-title:active,
	.accordion-title.open { 
		background-color: #00aaa7;
	}

	.accordion-container .accordion-title::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 25px;
		width: 15px;
		height: 2px;
		/*縦線に*/
		transform: rotate(90deg);
		background: #fff;
		transition: all .3s ease-in-out;
	}

	.accordion-container .accordion-title::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 25px;
		/*横線*/
		width: 15px;
		height: 2px;
		background: #fff;
		transition: all .2s ease-in-out;
	}

	.accordion-container .accordion-title.open::before {
		transform: rotate(180deg);
	}

	.accordion-container .accordion-title.open::after {
		opacity: 0;
	}

	.accordion-content {
		display: none;
		margin-bottom: 1em;
		/*
		padding-left: 2.3125em;
		padding: 1em 0;*/
		/*border: 1px solid #0079c1;*/
	}

	/* CSS for CodePen */
	.accordion-container {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 1em;
	}

}

/*　ドロワー補助部分
---------------------------------------------------------*/
#drawer {
	z-index: 19999;
 	color: #FFF;
	position: fixed;
	top: 0;
	right: -250px;
	width: 250px;
	height: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all .2s;
			transition: all .2s;
	background-color: #333;
}
#drawer.open {
	-webkit-transform: translate3d(-250px, 0, 0);
			transform: translate3d(-250px, 0, 0);
}
/* ドロワーが開いたとき、コンテンツ部分にかけるオーバーレイ */
#overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .3);
}

/* 開閉ボタン （IEは除外）*/
.drawer-button {
	z-index: 10000;
	position: absolute;
	right: 0.5em;
	top: 0.5em;
}

@media all and (-ms-high-contrast: none){
 .drawer-button{
    display: none; /* IE10以上 */
}}

#drawer h1{
	font-size: 120%;
	margin: 1em;
}

#drawer ul{
	list-style:none;
	padding: 0;
	margin: 0;
}

#drawer li{
	display: block;
	border-top: solid 1px #666666;
	border-bottom: solid 1px #111111;
}

#drawer a{
	padding: 0.75em;
	text-decoration: none;
	color: #FFF;
	display: block;
}


/*　code（HTML）
---------------------------------------------------------*/
code{
	width: 90%;
	margin: auto;
	word-wrap: break-word;
	margin: 1em auto;
	background: #000000;
	color: #FFF;
	border: 1px solid #999999;
	padding: 1em;
	display: block;
	/*display: none;*/
}

pre p{
	word-wrap: break-word;
}



/*　code（Download）
---------------------------------------------------------*/
#download > a{
    display: block;
	width: 100%;
	font-size: 120%;
	display: block;
	background-color:#F26964;
	border:solid 1px #F26964;
	box-shadow:0px 4px #aa1b15;
    color: #FFF;
    text-decoration: none;
    text-align: center;
	padding: 0.5em 1.0em;
    box-sizing: border-box;
    position: relative;
    top: 0px;
    left: 0px;
    transition: all 0.2s cubic-bezier(.09,1.17,.51,.98);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}


#download > a:hover{
	top:4px;
	background: #ef4b4c;
	transition: all 0.1s;
	border:solid 1px #F26964;
	box-shadow:0px 0px #aa1b15;
}


/*　フェードイン
------------------------------------------------------*/

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

.fadeIn_bottom {
	opacity: 0;
	transform: translate(0, 15%);
	transition: 2s;
}

.fadeIn_bottom.is-show {
	transform: translate(0, 0);
	opacity: 1;
  }

.fadeIn_left {
  opacity: 0;
  transform: translate(-15%, 0);
  transition: 2s;
}
.fadeIn_left.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translate(15%, 0);
  transition: 2s;
}
.fadeIn_right.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/*　ローディング
------------------------------------------------------*/
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #FFFFFF;
	z-index: 1;
  }
  #loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
	text-align: center;
	color: #b19464;
	font-family: "Sawarabi Mincho";
	z-index: 2;
  }
  
span.loading {
	margin-bottom: 1em;
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	vertical-align: middle;
	-webkit-animation: loading_animation 3.8s linear infinite;
	animation: loading_animation 3.8s linear infinite;
  }
  span.loading span {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
  }
  span.loading:before, span.loading:after, span.loading span:before, span.loading span:after {
	position: absolute;
	display: inline-block;
	content: " ";
	width: 23px;
	height: 23px;
  }
  span.loading:before {
	left: 0;
	top: 0;
	background-image: -webkit-gradient(radial, 25 25, 0, 25 25, 25, from(transparent), color-stop(0.81, transparent), color-stop(0.82,rgba(248,151,140,0.5)), color-stop(0.98, rgba(248,151,140,0.5)), color-stop(0.99, transparent), to(transparent) );
	background-image: -webkit-radial-gradient(25px 25px, 25px 25px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent 99%, transparent);
	background-image: radial-gradient(25px 25px at 25px 25px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent);
  }
  span.loading:after {
	right: 0;
	bottom: 0;
	background-image: -webkit-gradient(radial, -2 -2, 0, -2 -2, 25, from(transparent), color-stop(0.81, transparent), color-stop(0.82,rgba(248,151,140,0.5)), color-stop(0.98, rgba(248,151,140,0.5)), color-stop(0.99, transparent), to(transparent) );
	background-image: -webkit-radial-gradient(-2px -2px, 25px 25px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent 99%, transparent);
	background-image: radial-gradient(25px 25px at -2px -2px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent);
  }
  span.loading span:before {
	left: 0;
	bottom: 0;
	background-image: -webkit-gradient(radial, 25 -2, 0, 25 -2, 25, from(transparent), color-stop(0.81, transparent), color-stop(0.82,rgba(248,151,140,0.5)), color-stop(0.98, rgba(248,151,140,0.5)), color-stop(0.99, transparent), to(transparent) );
	background-image: -webkit-radial-gradient(25px -2px, 25px 25px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent 99%, transparent);
	background-image: radial-gradient(25px 25px at 25px -2px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent);
  }
  span.loading span:after {
	right: 0;
	top: 0;
	background-image: -webkit-gradient(radial, -2 25, 0, -2 25, 25, from(transparent), color-stop(0.81, transparent), color-stop(0.82,rgba(248,151,140,0.5)), color-stop(0.98, rgba(248,151,140,0.5)), color-stop(0.99, transparent), to(transparent) );
	background-image: -webkit-radial-gradient(-2px 25px, 25px 25px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent 99%, transparent);
	background-image: radial-gradient(25px 25px at -2px 25px, transparent, transparent 81%, rgba(248,151,140,0.5) 82%, rgba(248,151,140,0.5) 98%, transparent);
  }
  
  @-webkit-keyframes loading_animation {
	0% {
	  -webkit-transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	}
  }
  @keyframes loading_animation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }


/* よくある質問
-------------------------------------------------*/

#faqArea{
	width: 100%;
	padding: 50px 0;
	margin: auto;
	background: #dddddd;

}

#faqArea > div{
	width: 900px;
	padding: 1em;
	margin: auto;
	font-size: 100%;
	line-height: 180%;
	background: #FFF;
	margin-bottom: 2em;
}
#topfaq{
	background: #FFF;
	width: 100%;
	margin: auto;
	padding: 0;
}

#topfaq dl{
	font-size: 100%;
	text-align: left;
}
#topfaq dt{

	padding: 10px;
	color: #0377be;
	background: #bae5ff;
	font-weight: bold;
}

#topfaq dd{
	line-height: 240%;
	padding: 20px;
}


#topfaq dt::before {
    content: "Q:" ;
    margin-right: 10px;
}

#topfaq dd::before {
    content: "A:" ;
    color: #990000;
    margin-right: 10px;
}

/*　メールフォーム確認画面
------------------------------------------------------*/
.wtn_copyright{display: none;}



/*　clear属性
------------------------------------------------------*/

.cr{
	clear: both;
}

.clear{
	text-align: right;
	clear: both;
}

.clearfix:after {
	 content: ".";
	 display: block;
	 clear: both;
	 height: 0;
	 visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */


.clearfixsp:after {
	 content: ".";
	 display: block;
	 clear: both;
	 height: 0;
	 visibility: hidden;
}
.clearfixsp { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfixsp { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */