@charset "utf-8";

/*--------------------------------------------------------------
レイアウト設定
---------------------------------------------------------------*/
/**
 * 目次
 *
 * 01. ◎全体ラップ
 * 02. ◎ヘッダーステージ
 * 03. ◎センターステージ（メインステージ）
 * 04. ◎フッターステージ
 * 05. ◎ページ上部移動
 * 06. ◎404
 * 07. ◎準備作中ページ
 *
 *（PC-1024px SP-896px以下）
 *（★の箇所は未使用）
 */

a[href^="tel"]{ color:inherit; text-decoration:none; }

/*******************************************************************************
 01. 全体ラップ 　※オープニングに合わせてフェードインさせる
*******************************************************************************/
#container,
#TOP_container{
	position: relative;
	clear:both;
	width: 100%;
	min-width: 1024px;
	overflow: hidden;
	margin: 0px auto;
	border-top: 5px solid #49515b;
	background-color: #fcfbf7;
	background-image: url(../images/bg-stone.png);
	background-repeat: repeat-x;
	background-position: left 0px bottom 380px;
	-moz-animation: fdi 3s ease 0s 1;
	-ms-animation: fdi 3s ease 0s 1;
	-webkit-animation: fdi 3s ease 0s 1;
	animation: fdi 3s ease 0s 1;
}

/*------------------------------------
◎キーフレーム設定
------------------------------------*/
@-moz-keyframes fdi  {
	0% {
		opacity:0;}
	20% {
		opacity:0;}
	100% {
		opacity:1;} }

@-webkit-keyframes fdi  {
	0% {
		opacity:0;}
	20% {
		opacity:0;}
	100% {
		opacity:1;} }

@keyframes fdi  {
	0% {
		opacity:0;}
	20% {
		opacity:0;}
	100% {
		opacity:1; }}

/*------------------------------------
◎アニメーション解説
animation: fadeIn① 2s② ease③ 0s④ 1⑤ normal⑥;
① animation-name　キーフレームアニメーション名を指定。
② animation-duration　1回のアニメーションにかかる時間を指定。
③ animation-timing-function　アニメーションの変化率を指定。
　　　　　　　　　　　　　　　　他に ease、linear、ease-out、ease-in-out や
　　　　　　　　　　　　　　　　オリジナルの変化率を指定できる。
④ animation-delay　アニメーションの開始をいくら遅らせるかを指定。
⑤ animation-iteration-count　アニメーションを何回繰り返すかを指定。
⑥ animation-direction　繰り返し時、往復処理をするかを指定。
------------------------------------*/	

/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#container,
#TOP_container{
	min-width: 100%;
}

}
/***---- ▲SP-896px以下----***/



/*****************************************************************
 02. ヘッダーステージ　
*****************************************************************/
/* ●ヘッダーステージ基本
=================================================*/
#header_stage{
	position: absolute;
	width: 100%;
	height: 100px;
	left: 0;
	z-index: 100;
	margin: 0px auto 0px auto;
}


.header-tel{
	position:relative;
	float:right;
	margin: 20px 20px 0px 0px;
}

.header-tel img,
.header-logo img,
.header-logo{
	transition: 0.5s ;
}

.header-logo{
	position:relative;
	float:left;
	margin: 20px 0px 0px 30px;
}

/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

.header-logo{
	margin: 10px 0px 0px 30px;
}

.header-logo img{
	width:100px;
}

.header-tel{;
	margin: 10px 10px 0px 0px;
}

.header-tel img{
	width:300px;
}

}
/***---- ▲SP-896px以下----***/

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

.header-tel img{
	width:250px;
}

}
/***---- ▲SP-640px以下----***/

/***---- ▼SP-379px以下----***/
@media screen and (max-width:379px){

.header-logo{
	margin: 5px 0px 0px 20px;
}

}
/***---- ▲SP-379px以下----***/



/*******************************************************************************
 03. センターステージ（メインステージ）
*******************************************************************************/
#center_stage_T,
#center_stage{
	position:relative;
	clear:both;
	float:left;
	width: 100%;
	padding: 0px 0px 200px 0px;
	margin: 0px auto 0px auto;
}

#center_stage_T{
	padding: 0px 0px 200px 0px;
}

#center_stage{
	padding: 0px 0px 100px 0px;
}

★#center_stage_A{
	position:relative;
	clear:both;
	float:left;
	z-index:11;
	width: 100%;
	margin: 0px auto 0px auto;
}

★#center_stage_B{
	position:relative;
	clear:both;
	float:left;
	width: 100%;
	margin: 0px auto 0px auto;
}


/*=======================================
/* ◎センターステージ=レスポンシブ対応
=======================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#center_stage_T{
	background-image: none;
	margin: 0px auto 0px auto;
}

#center_stage_A{
	margin: 0px auto 0px auto;
}

}
/***---- ▲SP-896px以下----***/



/*****************************************************************
 04. フッターコンタクトステージ
*****************************************************************/
#footer_contact_stage {
	position: relative;
	z-index:1;
	bottom:-50px;
	clear:both;
	width: 80%;
	margin: 0px auto 0px auto;
}

#footer_contact_FIELD{
	position: relative;
	padding: 0px 0px 70px 0px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-o-border-radius: 15px;
	-ms-border-radius: 15px;
	background-color: #fff;
	border: 2px solid #49515b;
}

#fcF_icon_AREA{
	position: relative;
	width: 100%;
	text-align:center;
	margin: 0px auto 50px auto;
}
#fcF_icon_AREA a {
	width: 70px;
	display: inline-block;
	vertical-align: top;
	margin: -35px 1% 0px 1%;
}

#fcF_contact_AREA{
	position: relative;
	width: 100%;
	text-align:center;
	margin: 0px auto 0px auto;
}

#fcF_contact_AREA .fcF_title_BOX,
#fcF_contact_AREA .fcF_tel_BOX,
#fcF_contact_AREA .fcF_mail_BOX {
	width: 309px;
	display: inline-block;
	vertical-align: top;
	margin: 0px 10px 0px 10px;
}

.fcF_title_BOX {
	line-height:0;
	border-bottom:1px solid #000;
	padding: 0px 0px 8px 0px;
}

.fcF_mail_BOX {
	width: 309px;
	line-height:0;
	text-align:center;
	border:1px solid #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	padding: 5px 5px 6px 5px;
	margin: 0px auto 0px auto;
}

/***---- ▼SP-1250px以下----***/
@media screen and (max-width:1250px){

#footer_contact_FIELD{
	padding: 0px 0px 40px 0px;
}

#fcF_icon_AREA{
	margin: 0px auto 30px auto;
}

#fcF_contact_AREA .fcF_title_BOX,
#fcF_contact_AREA .fcF_tel_BOX,
#fcF_contact_AREA .fcF_mail_BOX {
	width: 80%;
	margin: 0px 0% 20px 0%;
}

}
/***---- ▲SP-1250px以下----***/

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

#footer_contact_FIELD{
	padding: 0px 0px 20px 0px;
}

#fcF_icon_AREA img {
	width: 60px;
}

#fcF_contact_AREA .fcF_title_BOX,
#fcF_contact_AREA .fcF_tel_BOX,
#fcF_contact_AREA .fcF_mail_BOX {
	width: 80%;
	margin: 0px 0% 20px 0%;
}

.fcF_title_BOX img,
.fcF_tel_BOX img,
.fcF_mail_BOX img{
	width: 80%;
}

}
/***---- ▲SP-640px以下----***/


/*******************************************************************************
 05. フッターステージ
*******************************************************************************/
/* ●フッターステージ基本
=================================================*/
#footer_stage {
	float: left;
	position: relative;
	width: 100%;
	color:#fff;
	border-top: 0px solid #ccc;
	border-bottom: 20px solid #ccc;
	background: #49515b;
	background-image: url(../images/footer_bg_mark.png);
	background-repeat: no-repeat;
	background-size:310px;
	background-position: right -20px top 30px;
	margin: 0px auto 0px auto;
}

#footer_stage_inner {
	float: left;
	position: relative;
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 100px 10% 120px 10%;
}

/*============================================
/* ◎フッターステージ基本=レスポンシブ対応
============================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#footer_stage {
	margin: 0px auto 0px auto;
}

#footer_stage_inner {
	padding: 100px 5% 100px 5%;
}

}
/***---- ▲SP-896px以下----***/



/* ●ロゴ＆事業所番号&住所
=================================================*/
#footer_logo_BOX {
	float: left;
	position: relative;
	font-size:13px;
	margin: 0px 0px 0px 0px;
}

p.company-name {
	float: left;
	position: relative;
	margin: 0px 20px 0px 0px;
}
p.kyoka-number {
	float: left;
	position: relative;
	margin: 3px 0px 0px 0px;
}
p.adress {
	float: left;
	position: relative;
	line-height:1.2;
	margin: 10px 0px 0px 0px;
}




/*=======================================
/* ◎ロゴ＆事業所番号&住所=レスポンシブ対応
=======================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#footer_logo_BOX {
	width: 100%;
}

p.company-name img {
	width: 170px;
}

}
/***---- ▲SP-896px以下----***/

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){



}
/***---- ▲SP-640px以下----***/

/***---- ▼SP-420px以下----***/
@media screen and (max-width:420px){



}
/***---- ▲SP-420px以下----***/


/* ●　フッターナビゲーション
=================================================*/
#footer_navi_BOX {
	float: left;
	width: 100%;
	border-bottom: 1px solid #fff;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 20px 0px;
}

#footer_navi_BOX li {
	float:left;
	line-height:1.6;
	transition: 0.5s ;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
}

#footer_navi_BOX li a {
	font-size: 15px;
	text-decoration: none;
	color: #fff;
	padding: 0px 20px 0px 0px;
	transition: 0.5s ;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
}

#footer_navi_BOX li a:hover {
	text-decoration: underline;
}

/*=======================================
/* ◎フッターナビゲーション=レスポンシブ対応
=======================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#footer_navi_BOX {
	width: 100%;
}

#footer_navi_BOX li {
	line-height:1.3;
}

#footer_navi_BOX li a {
	font-size: 14px;
}

}
/***---- ▲SP-896px以下----***/



/* ●　コピーライト・環境
=================================================*/
#footer_etc_BOX {
	float:left;
	width: 100%;
	margin: 25px 0px 0px 0px;
}

p.copyright {
	clear:both;
	font-size: 14px;
	line-height: 1.2;
	margin: 4px 0px 0px 0px;
}

p.operating {
	clear:both;
	font-size: 14px;
	line-height: 1.5;
	margin: 5px 0px 0px 0px;
}

/*=======================================
/* ◎コピーライト・環境=レスポンシブ対応
=======================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#footer_etc_BOX {
	width: 100%;
	padding: 5px 0px 0px 0px;
}

p.copyright {
	font-size: 11px;
}

p.operating {
	font-size: 11px;
}

}
/***---- ▲SP-896px以下----***/


/* ●　イラスト
=================================================*/
#footer_illst_BOX{
	float: left;
	position: relative;
	width: 100%;
	margin: 0px 0px 0px 0px;
}

#footer_illst_BOX .f_illust_left,
#footer_illst_BOX .f_illust_right{
	position: absolute;
	bottom:9px;
}

#footer_illst_BOX .f_illust_left {left:0px;}
#footer_illst_BOX .f_illust_right {right:0px;}

#footer_illst_BOX .f_illust_base {
	position: relative;
	float:left;
	width: 100%;
	height:10px;
	background: #8cc63e;
	margin: 0px 0px 0px 0px;
}

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

#footer_illst_BOX .f_illust_left,
#footer_illst_BOX .f_illust_right {
	width: 120px;
}

}
/***---- ▲SP-640px以下----***/


/*******************************************************************************
 06. ページ上部移動
*******************************************************************************/
#page-top {
	position:fixed;
	bottom:20px;
	right:15px;
	z-index: 999999;
	text-align:center;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

#page-top:hover {
	filter:alpha(opacity=100);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

#page-top a {
	float:left;
}

img.page-top-SP {
	display:none;
}

/*=======================================
/* ◎ページ上部移動=レスポンシブ対応
=======================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#page-top {
	bottom:10px;
	right:5px;
}

img.page-top-PC {
	display:none;
}
img.page-top-SP {
	display:block;
}

}
/***---- ▲SP-896px以下----***/

/***---- ▼SP-640px以下----***/
@media screen and (max-width:640px){

#page-top {
	bottom:5px;
}

}
/***---- ▲SP-640px以下----***/



/*******************************************************************************
 07. 404
*******************************************************************************/
#not404 {
	width: 540px;
	text-align: center;
	font-size: 13px;
	border: 1px solid #42454f;
	margin: 50px auto 0px auto;
	padding: 30px 20px 30px 20px;
}
#not404 img {
	width: 100%;
}
#not404 p {
	margin: 20px 0px 0px 0px;
}

#not404 p a  {
	color: #42454f;
}

#not404 p a:hover  {
	color:#777;
}

/*=======================================
/* ◎404=レスポンシブ対応
=======================================*/
/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#not404 {width: 70%;}

#not404 img {width: 90%;}

}
/***---- ▲SP-896px以下----***/

/***---- ▼SP-480px以下----***/
@media screen and (max-width:480px){

#not404 {width: 95%;}

#not404 img {width: 90%;}

}
/***---- ▲SP-480px以下----***/



/*******************************************************************************
 07. メンテナンス中
*******************************************************************************/
/* ●基本枠
=================================================*/
#maintenance_BOX {
	position: relative;
	float:left;
	width:100%;
	text-align:center;
	overflow: hidden;
	padding: 0px 10% 0px 10%;
	margin: 100px 0px 0px 0%;
}

/***---- ▼SP-896px以下----***/
@media screen and (max-width:896px){

#maintenance_BOX img {
	width:90%;
}

}
/***---- ▲SP-896px以下----***/