@charset "utf-8";
/*-----------------------------------------------------------------------------------


スマホページ用


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

/* メインメニュー iPadサイズ以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){}


/* ●px以下から 1カラム表示
------------------------------------------------------------*/
@media only screen and (max-width:768px){

*{box-sizing: border-box;}
body{
	text-align:center;
	position:static;
	}

#wrapper{}
.sub_page #wrapper{}



/*表示・非表示*/
.sp_none{ display:none !important;}
.sp_only{ display:block;}



body,
#container,
.content{
	padding:0 !important;
	margin:0 !important;}

#container{
	overflow: hidden;
}

#content{
	padding:2% 2%;
}


/*#head_menu{ display:none;}*/
#head_g_navi ul#menu li{ display:none;}
#nav-drawer {min-height:50px;}




/*幅関係*/


html,
body,
#wrapper,
header,
header .inner,
#content,
h1,
#content,
footer,
footer .inner,
#navi-footer,
#logo-footer,
.btn_pagetop,
.mainimage,
.mainimage .mainimage_inner{
	width:100% !important;
	padding:0;
	}

.inner,
#container,
#main,
footer nav{
	width:100% !important;
	
}


.mainimage{ float:none; }

#sidebar nav#side_g_navi{
  display:none;
}


#sidebar{
	width:96% !important;
	float:none;
	text-align:center;
	margin:2%;

	}

/* 2カラムレイアウト対策*/
#sidebar{
  position:inherit;
  top:inherit; left:inherit;
	}

.home #sidebar,
#content #sidebar nav#side_g_navi{
  display:none;

}




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




/*並び順調整*/
/*#sidebar{ order:1;}
#main{ order:2;}*/


/*
.mainimage .bxslider img{ width:100% ;}
.navigation .alignLeft,
.navigation .alignRight{ width:48%;}
.navigation .alignLeft img,
.navigation .alignRight img,
.prev img,
.next img,
.semBox .aR img{ width:auto;}
*/




/*
#sidebar img{
	width:80%;
}

*/

/*
#container{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
 
	-webkit-flex-direction:row;
	-moz-flex-direction:row;
	-ms-flex-direction:row;
	-o-flex-direction:row;
	flex-direction:row;
 
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
 
	
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
	
	}
	*/

/*#side{ order:2;}
#main{ order:1;}
#pagetop{ order:3;}
#pagetop { padding-top:5px; text-align:center !important;}*/


/**/

/*サイド　詳細*/
/*
#sidebar .banner,
#sidebar .side_information{
	display:none;
}

#sidebar .side-navi p img{	width:auto;}
*/

/*
.side_shopinfo{}
.side_shopinfo .pic{ 	float:left; width:40%; margin-right:1%;}
.side_shopinfo .indent{	float:left;	width:59% ; margin:0 0 0 0 !important;}

#sideMenu{  display:none;}
#side .bnr p{ float: left; width:24%;}


#side .blueBg{ clear:both;}

*/






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

　ヘッダー

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




	
header{
	padding:0;
	margin-bottom:5px;
	text-align:left;
	}

header #logo{
	margin:0;
	float:none;
	padding:1%;
	text-align:center;
	}

header #logo p{	margin-right:10%;}
header #logo p.h1{	margin-right:0%;}
header #logo img{ width:70%; }
	



.navi_up{ display:none;}


header #logo_r{ float:none; padding:1%;}
header #logo_r p{ width:30%; float:right;}



header #logo_r #tel_sps{ float:none; margin-right:0em;}
header #logo_r #btn_sns{ float:none; }

header #logo_r p.tel,
header #logo_r p.fax,
header #logo_r p.tel_uketsuke{
	width:50%; float:left;
	}

header #tel_sps p.tel,
header #tel_sps p.tel_uketsuke,
header #tel_sps p.fax{
	font-size:14px;
/*	padding:2px;
	margin:0;*/
	}
header #tel_sps p.tel a{
	font-size:14px;
	}

header #tel_sps p.tel_uketsuke{}	
header #tel_sps p.fax{ font-size:14px;}
header #tel_sps p.tel span,
header #tel_sps p.fax span{}


header #logo_r #btn_sns{
	position:absolute;
	top:5px;
	right:5px;
	}
header #logo_r #btn_sns img{ width:auto;}



/*NAVI*/
header nav{ display:none;}




.header-bnr{ padding:0; margin:0; text-align:center;}
.header-bnr img{ width:90%;}

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

　SP用　ナビ関連

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


#nav-content,
#nav-drawer{
	display:block;}
	


#nav-drawer {
	position:absolute;
	top:10px;
	left:10px;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
}

/*ハンバーガーアイコン*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #555;
    display: block;
    content: '';
    cursor: pointer;
}
#nav-open span:before {
    bottom: -8px;
}
#nav-open span:after {
    bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
    display: none;/*はじめは隠しておく*/
    position: fixed;
    z-index: 99;
    top: 0;/*全体に広がるように*/
    right: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
}

/*中身*/
#nav-content{
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 85%;
    max-width: 300px;/*最大幅*/
    height: 100%;
    background:#F5F5F5;/*背景色*/
    transition: .3s ease-in-out;/*滑らかに表示*/
    -webkit-transform: translateX(105%);
    transform: translateX(105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
    opacity: .5;
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
}


#nav-content ul{}
#nav-content ul li{
	border-bottom:1px solid #E3E3E3; }
#nav-content ul li a{
	display:block;
	 padding:1em;
	 text-decoration:none;
}
#nav-content ul li a:hover{ background:#FBBB00; color:#FFF;}
#nav-content ul li .menu{ display:none;}
#nav-content ul li li{ display: block; margin:0.2em; border-bottom:0;}
#nav-content ul li li a{ padding:0.5em  1em; background:#EEE;}




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

　サイドバー

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

#sidebar{}

#sidebar .btn-rss{ text-align:right;}
#sidebar .btn-rss img{
	width:auto;
	}

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

　枠＆並び替え

----------------------------------------------------------------------------------------*/
#content #main{
	padding:0 2%;}
	
#content .inner{

	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
}
/*#content #sidebar{
  -webkit-box-ordinal-group:1;
  -ms-flex-order:1;
  -webkit-order:1;
  order:1;
  }
#content #main{
  -webkit-box-ordinal-group:2;
  -ms-flex-order:2;
  -webkit-order:2;
  order:2;
}

*/
#content #sidebar .side-navi{ }
#content #sidebar #side_contact,
#content #sidebar .banner{
	display:none;
  }


/*
#content{
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;

}
#content #sidebar{
-webkit-box-ordinal-group:0;
  -ms-flex-order:0;
  -webkit-order:0;
  order:0;
  }
#content #main{
  -webkit-box-ordinal-group:1;
  -ms-flex-order:1;
  -webkit-order:1;
  order:1;
}
#content #sidebar .banner{
	-webkit-box-ordinal-group:3;
	-ms-flex-order:3;
	-webkit-order:3;
	order:3;

	}
*/



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

　フッター

----------------------------------------------------------------------------------------*/
footer{
	clear:both;
	padding:1em;
	}

footer *{ }

.btn_pagetop{
	clear:both;
	text-align:center;
	padding:10px;
	}
.btn_pagetop img{
	width:auto;
}


footer .clrfix{ padding:2px 0 10px 0; }

#logo-footer,
#navi-footer{ padding-top:5px;}
#logo-footer{
	text-align:center;
}
#logo-footer img{ width:auto;}


footer ul{ text-align:center;}

/*footer li{ padding:0px 2%;}*/
footer li:first-child{border:0;}
footer li a{
	text-decoration:none;
	font-size:80%;
}

footer li a:hover{color:#999;}
footer ul ul{display:none;}



address.copyright{}




/*　入力部分共通　*/

.block{}
.block table{
	width:100% !important;
	}







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

　タイトル1  ＆　共通

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


#contents .title {
	margin-bottom: 18px;
	}

blockquote{
	background:#FDEEEA;
	padding:15px 15px;
	margin-bottom:20px;
	
	}
blockquote h4{
	color:#DD4668;
	font-size:18px;
	text-align:center;
	}
	
	


/* 共通　*/
.contact_box{
	margin-bottom:5px;
	
	padding:15px 2%;
	border:1px solid #FFE4E4;

}
.contact_box p img{ width:auto;}
.contact_box .bnr-tel,
.contact_box .bnr-contact{ margin:0;  width:48%; }

.contact_box .bnr-tel img,
.contact_box .bnr-contact img{ width:100%;}

	

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

　 TOP

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


/*TOP*/
	
.mainimage{
	clear:both;
	height:auto;
	}
.mainimage .inner{	padding:0;	}
.mainimage .mainimage_icon{	display:none;	}

.mainimage img{ width:100%;}

.mainimage li .mainimage-catch{}

.mainimage li .mainimage-catch p{
	font-size:5vw;
}


/*
.welcome{
	background:none;
	padding:2%;
	text-align:left;
	}

.welcome .line p{margin-bottom:5px;}
*/



/*
#top_main .left{width:auto;}
#top_main .right{}
*/

/*TOP お知らせ*/	
#top-information{	}
#top-information ul{ margin:0 2%  2%  2%;}
#top-information ul li{
	padding:2px 2px 3px 1px;
}
#top-information .cate{ display:none;}




#top-information .btn-datail{}
#top-information .btn-datail img{width:auto;}





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

　ブロック系

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




.layout-2 img{ width:auto; border:10px solid #FFF;}

.layout-2{ text-align:center;}
.layout-2 a img{
	width:100%;
	border:10px solid #E1E9F4;
	}
.layout-2 a:hover img{
	border:10px solid #197CF3;
	}


.layout-7{margin-bottom:2%;	}
.layout-7{margin-left:-1%;}

.layout-7 ul li{
	width:32%;
	margin-left:1%;
	}
.layout-7 img{width:100%;}
.layout-7 ul li span{
   font-size: 2.3vw;
   line-height:1.1em;
}
	

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

  管理画面用

----------------------------------------------------------------------------------------*/
section .btn{
	display:inline-block;
	text-align:center;
	position:inherit;
}

section .btn-edit-pic img,
section .btn img{
	width:auto !important;
}

.insert{
	clear:both;
	padding-top:3px;
	border-bottom:0 px dotted #EEE;
	margin-bottom:3px;
	display:none;/*　一旦スマホではレイアウト追加不可*/

	}
.insert p{
	position:inherit;
	text-align:center;
	}
.insert a{
	position:inherit;
	filter:alpha(opacity=30);
	-moz-opacity:0.30;
	opacity:0.30;
	
	}
.insert a img{
	width:auto !important;
	
}






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

  問合せ

----------------------------------------------------------------------------------------*/
/*#contact th{ width:30%; text-align:left;}
#contact td{ width:70%;}



input.sizeS{ width:90%;}
input.sizeM{ width:90%;}
input.sizeL{ width:90%;}
*/

#contact{}

#contact input[type="text"],
#contact input[type="password"],
#contact input[type="email"],
#contact textarea{
	width:100%;
	}


.contact_tel{
	border-width:5px;
	padding:0.5em;
	}
.contact_tel h2{}
.contact_tel_inner{
	margin:2%;
	}

.contact_tel p.tel,
.contact_tel p.fax{
	line-height:1;
	}

.contact_tel p.tel{
	font-size:6vw;
	background-position: 0 10px;
	padding:2px 0 2px 30px;
	background-size:  18px 18px;
	margin-bottom:5px;
	}
.contact_tel p.fax{
	font-size:5vw;
	background-position: 0 10px;
	padding:2px 0 2px 28px;
	background-size: 16px 16px;
	}
.contact_tel p.tel_uketsuke{
	margin-left:2em;
	margin-bottom:8px;
	font-size:4vw;
	}

.contact_tel p.tel a{}	
	
				  

				


}


/* タブレット系　*/

/* 幅600px以下から  
------------------------------------------------------------*/
@media only screen and (max-width: 600px){

.layout-2 img{ width:96%;}


#contact{}
.component-row {
display: block;
}
.component-row .component-label{
 /* display: block;*/
  width:80%;
  }

.component-row .hissu{
 display: block;
 float:right;

}	  
#contact th,
#contact td{ display:block; width:100%; text-align:left;}
#contact th br{ display:none;}

	
	
	/*　ギャラリー　*/
	.layout-gallery ul li{
		margin:0 0 3px 1%;
		width: 49%;
		}
	.layout-gallery li a{
		display: block;
		border:5px solid #EEE;
		width:100%;
		height:140px;
		overflow: hidden;
	}

	.layout-gallery li a img{
	/*	margin-top:-10px;*/
	}

	.layout-gallery li a:hover{

		border:5px solid #FDEC7C;

	}

} /* ～600 px */




/* 幅414px以下から iphone6& plus
------------------------------------------------------------*/
@media only screen and (max-width: 414px){



/*　入力部分共通　*/

.block{}

.block table{
	border:0;}
.block table th,
.block table td{
	display:block;
	width:100%;
	border:solid #D3D3D3 0;
	border-width:0px !important;
	vertical-align:top;
	padding:0.5em;
	}

.block table th{
	color:#333;
	text-align:left;
	}

.block table td{
	padding-bottom:1em;
  background:#F8F8F8;
	
}


.block table.table-fix{
  width:100%;
  display:table;
  }
.block table.table-fix th,
.block table.table-fix td{
	display:table-cell;
	width:atuo;
	border-width:1px !important;
	padding:0.5em 0.2em;
  font-size:3vw;
 
	}
.block table.table-fix th{}
.block table.table-fix td{
  background:#FFF;

}


/*　共通系　*/
.contact_box{
	margin-bottom:5px;
	padding:15px 2%;
	border:1px solid #FFE4E4;

}
.contact_box p img{ width:auto;}
.contact_box .bnr-tel,
.contact_box .bnr-contact{ float:none; margin-bottom:5px;   width:98%; }

.contact_box .bnr-tel img,
.contact_box .bnr-contact img{ width:100%;}


#content section{
	margin:0 2%;
}



/* TOP */
 .welcome .line img{ width:80%; }

#top .bnr ul li{
	width:49%;
	margin-left:1%;
	}


/*見えにくい画像にズームボタン*/
.btn_zoom{ position:relative;}
.btn_zoom:before{

	position:absolute;

	content: url(images/icon_zoom.png);
	bottom:2%;
	left:2%;
	z-index:100;
	
}




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

  問合せ

----------------------------------------------------------------------------------------*/
/*
#contact th,
#contact td{
	display:block;
	width:100%;
	}

*/

/*タイトル*/
h2,h3,h4,h5,h6{
	clear:both;
	}



h1{
	padding:1em;
	font-size:150%;
}


h2{

	font-size:120%;
	padding:3% 1% 2% 1%;
	line-height:1.1em;
	color:#000000;
	
	margin-bottom:2%;
	
}

h3{
	margin:0 0 5px 0;
	padding:3px 5px;
	font-size:100%;
	font-weight:bold;
	text-align:center;
	
}
h4{}





/*　画像　＋　テキスト　*/



.layout-3 .flex,
.layout-4 .flex{ display:block;}


.layout-3 .pic,
.layout-4 .pic{ width:100%; margin:auto;}

.layout-3 .txt,
.layout-4 .txt{ width:100%; margin:0;}

.layout-3 .pic img,
.layout-4 .pic img{
	width:100%;
	border:8px solid #F8F8F8;}



/*
.layout-3 .pic{ float:none;}
.layout-3 .txt{ float:none;}

.layout-4 .pic{ float:none;}
.layout-4 .txt{ float:none;}
*/


	
	



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

  ブログ

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

	
	
#blog .txt{}


.blog-pic{}
.blog-pic ul{}

/*
	.blog-pic ul li{
	width:100%;
	}
.blog-pic ul li a{
	box-sizing:border-box;
	width:100%;
	height:auto;
	display: block; 
	}

.blog-pic ul li img{
	width:100% ;



}
#blog_up .blog-pic ul{ }
#blog_up .blog-pic ul li{
	width:100%; 
	margin-left:0%;
	
}
*/
	
#blog .blog-pic ul li{
	float: none;
	width:100%;
	height: auto;
	display: block;
	
}
#blog .blog-pic ul li a{
	height: auto ;
	display: block;
	overflow:auto;
	}
#blog .blog-pic ul li a img{
	display: block;
	width:100%;
	height: auto;

	position:inherit;
	}

#blog_up .blog-pic .comment{
	height:auto; text-align:left; font-size:90%; line-height:1.3em;
	}


	



}/* ～414 px */




/* 幅320x以下から ヘッダー等微調節 iphone5
------------------------------------------------------------*/
@media only screen and (max-width: 320px){



	/*　ギャラリー　*/

	/*
	.layout-gallery ul li{
		margin:0 5px 3px 0;
		}
	.layout-gallery li a{
		border:5px solid #EEE;
		width:90px;
		height:75px;
	}

	.layout-gallery li a img{
		margin-top:-10px;
	}

	.layout-gallery li a:hover{

		border:5px solid #FDEC7C;

	}
	*/

	

	



}