@charset "utf-8";

body {
    font-family: Oswald, Lato, YuGothic, Shin Go Regular, Yu Gothic, 游ゴシック体, 游ゴシック, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Roboto, メイリオ, Meiryo, Arial, Helvetica, Verdana, sans-serif;
    line-height:1.3; 
}


/* --------------------------------------------------------------------------------
 web fonts　ウェブフォントファイルを変更した場合はv=1.0の数字を変更（キャッシュ対策）
-------------------------------------------------------------------------------- */
@font-face {
    font-family: 'design_plus';
    src: url('fonts/design_plus-v=1.2.eot');
    src: url('fonts/design_plus-v=1.2.eot#iefix') format('embedded-opentype'),
         url('fonts/design_plus-v=1.2.woff') format('woff'),
         url('fonts/design_plus-v=1.2.ttf') format('truetype'),
         url('fonts/design_plus-v=1.2.svg#design_plus') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* アイコンフォント */
.icon-arrow-right:before {
  content: "\e910";
}

.icon-file-text:before {
  content: "\f15c";
}

.icon-share-alt:before {
  content: "\f1e0";
}

.icon-phone:before {
  content: "\f095";
}

.icon-envelope:before {
  content: "\f0e0";
}

.icon-tag:before {
  content: "\f02b";
}

.icon-pencil:before {
  content: "\f040";
}

.icon-close:before {
  content: "\e91a";
  font-family: 'design_plus';
}



/* ----------------------------------------------------------------------
 reset css
---------------------------------------------------------------------- */
html, body, div, span, 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, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
 { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
audio, canvas, video { display:inline-block; max-width:100%; }
html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
ul, ol { list-style:none; }
blockquote , q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; }
a:focus { outline:none; }
ins { text-decoration:none; }
mark { font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; width:100%; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:100%; }
input, textarea { background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); -webkit-appearance: none; border-radius:0; /* Removing the inner shadow, rounded corners on iOS inputs */ }
input[type="checkbox"]{ -webkit-appearance: checkbox; }
input[type="radio"]{ -webkit-appearance: radio; }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }
img { -ms-interpolation-mode:bicubic; }

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

/* レイアウト */
#main_contents { background:#fff; width:100%; position:relative; z-index:10; }
#main_col {
  width:1152px; margin:70px auto 100px; padding:0 20px;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
}
#left_col { width:780px; float:left;  
}
#side_col { width:280px; float:right; }


a { text-decoration: none; }

/*	drawer-nav
--------------------------------------------------*/

.drawer-nav{
	padding-top:80px;
	background: #FFF;
}
.drawer-nav .drawer-menu{
	padding-bottom: 200px;
	
}
.drawer-nav ul{
	border-bottom:1px solid #ccc;
	padding:0 0 0 0;
}
.drawer-nav ul li{
border-top:1px solid #ccc;
}
.drawer-nav ul li.l1{
border-top:1px dotted #ccc;
background-color: #fafafa;	
}
.drawer-nav ul li.l1.l101{
border-top:1px solid #ccc;
background-color: #fafafa;	
}
.drawer-nav ul li.ttl {
display: block;
	color: #000;
	font-size: 12px;
	line-height: 1;
	padding: 10px 0 10px 20px;
}
.drawer-nav ul li a {
display: block;
	color: #000;
	font-size: 12px;
	line-height: 1;
	padding: 10px 0 10px 20px;
	text-decoration: none;
}
.drawer-nav ul li a:hover {
	text-decoration: none;
	color: #ccc;
}
.drawer-nav ul li.l1 a {
	
}
.drawer-nav ul li.l1 a:hover {
	text-decoration: none;
	
}
.drawer-nav ul li.contact a {
	background: #669c35 url(/common_blog/img/yaji_contact.png) no-repeat 0px 12px;
background-size: 16px 9px;
	color: #FFF;
}
.drawer-nav ul li.contact a:hover {
	text-decoration: none;
	background: #eec504 url(/common_blog/img/yaji_contact.png) no-repeat 0px 12px;
background-size: 16px 9px;
	color: #FFF;
}

.drawer-nav .menu_a1 a{
background: url(../../img/menu_plus.png) no-repeat center right;
background-size: 28px 12px;
}
.drawer-nav ul li.menu_a1 a:hover {
	text-decoration: none;
	background: url(../../img/menu_plus.png) no-repeat center right;
	background-size: 28px 12px;
}

.drawer-nav .menu_a2{
display: none;  
}


/*	HEADER
--------------------------------------------------*/
.burgerbtn{
	display: none;
}
@media(max-width:480px){

.burgerbtn{
z-index: 10000;
display: block;
	position:fixed;
	right:0px;
		top:0px;
	margin: 0 0 0 0;
	
}
}

body{
position: relative;

}

/* ----------------------------------------------------------------------
 header.php
---------------------------------------------------------------------- */
#header{
width:100%;
height: 90px;
background: rgba(255,255,255,0.9);
position: relative;
z-index: 100;
}
#header .con{
width:960px;
margin: 0 auto;
z-index: 100;
}
#header .con h1{
float:left;
padding: 19px 0 0;
}
#header .con ul{
float:left;
margin: 19px 0 0 42px;
}
#header .con ul li{
float:left;
padding: 0 25px 0 0;
color: #000 !important;
}
#header .con ul li.l2{
padding: 0 15px 0 0;
}
#header .con ul li:last-child{
padding: 0 0 0 0;
}
#header .con ul li a{
display: block;
font-size: 15px;
line-height: 1;
color: #000;
padding:20px 0;
}

#header .con ul li.l1{

display: block;
font-size: 15px;
line-height: 1;
color: #FFF;
padding:20px 13px 20px 0;
background: url(/common_blog/img/headyaji.png) no-repeat right 25px;
margin: 0 20px 0 0;
}
#header .con ul li.l1 a{
padding: 0;
}
#header .con ul li a:hover,
#header .con ul li:hover{ 
text-decoration: none; 
color: #ccc !important;
}
#header .con .child{
        display: none;
        position: absolute;
		top:50px;
		left:0;
        margin-left: -5px;
        padding: 0;
		width: 100%;
		height: 250px;

}
#header .con .child .wrap{
margin: 40px 0 0;
   background: rgba(255,255,255,0.9);
width: 100%;
		height: 200px;
	
}
#header .con .child ul.p01{
        position: absolute;
		top:40px;
		left:50%;
		margin-left: -282px;
}
#header .con .child ul.p02{
        position: absolute;
		top:40px;
		left:50%;
		margin-left: -162px;
}
#header .con ul.child1{
      
}
#header .con ul.child1 li{
       float:none;
	   /*border-bottom: 1px dotted #999;*/
}
#header .con ul.child1 li a{
    padding: 10px 10px;
    color: #000;
	display: block;
}
#header .con ul.child1 li a:hover{
    /*background:#000;*/
	color: #ccc;
}
#header .con  a.contact{
	float:right;
display: block;
font-size: 15px;
line-height: 1;
color: #FFF;
	margin: 33px 0 0;
padding:6px 8px 6px 28px;
background: #56892d url(/common_blog/img/head_contact.png) no-repeat 5px 7px;

}
#header .con  a.contact:hover{
background: #eec504 url(/common_blog/img/head_contact.png) no-repeat 5px 7px;

}




@media screen and (max-width: 960px) {
#header{
width:100%;
min-width: 960px;
}

}
@media screen and (max-width: 480px) {
	
	#header{
width:100%;
min-width: initial;
	min-width: auto;
}
	#header{
width:100%;
height: auto;
background: rgba(255,255,255,0.9)
}
#header .con{
width:95%;
margin: 0 auto;
}

#header .con h1 img{
width: 100%;
}
#header .con ul{
display: none;
}
#header .con  a.contact{
display: none;
}
#header .con h1{
float:left;
padding: 12px 0 12px;
width: 50px;
}

}


/* パンくずリンク */
#bread_crumb { 
	background:#fff; 
	height:60px; 
	line-height:60px; 
	min-width:960px;
}
#bread_crumb ul { width:920px; margin:0 auto; 

}



#bread_crumb li.home a img{
width: 15px;
}
#bread_crumb li.home:after { display:none; }
#bread_crumb li { color:#000; font-size:14px; display:inline; padding:0 15px 0 0; margin:0 0 0 15px; line-height:130%; position:relative; 

}
#bread_crumb li:after {
  font-family:'design_plus'; content:'\e910'; color:#000; font-size:9px; display:block; position:absolute; left:-20px; top:-1px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#bread_crumb li a { color:#000; }

@media (max-width:480px) {
 #bread_crumb { 
	height:30px; 
	 line-height:30px; 
	min-width: initial;
	min-width: auto;
	 border-bottom: solid 1px #ddd;
}
#bread_crumb ul { 
	width:95%; 
	margin:0 auto; 

}
#bread_crumb li.home a img{
width: 11px;
}
	#bread_crumb li { 
		font-size:9px; 

}
}





/* ----------------------------------------------------------------------
 footer
---------------------------------------------------------------------- */

/* ------------------------------
   loopSlider
------------------------------ */
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 375px;
    overflow: hidden;
    position: absolute;
}
 
.loopSlider {
    margin: 50px auto 0;
    width: 100%;
    height: 375px;
    text-align: left;
    position: relative;
    overflow: hidden;
}
 
.loopSlider ul {
    height: 375px;
    float: left;
    overflow: hidden;
}
 
.loopSlider ul li {
    width: 500px;
    height: 375px;
    float: left;
    display: inline;
    overflow: hidden;
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

 @media screen and (max-width: 480px) {
.loopSliderWrap {
    height: 200px;

}
	 .loopSlider {

    height: 150px;
 
}
 
.loopSlider ul {
    height: 200px;
}
	 
	 .loopSlider ul li {
    width: 200px;
    height: 150px;
   
}
.loopSlider ul li img{
    width: 200px;
    height: 150px;
   
}
}

#footer{
font-size: 14px;
color: #FFF;
}
#footer a{
color: #FFF;
text-decoration: none;
}
#footer a:hover{
color: #ccc;
text-decoration:underline;
}
#foot01{
width: 100%;
	min-width: 960px;
background: #f1f3f5;
padding:50px 0 50px;
}
#foot01 .con{
width: 960px;

margin: 0 auto;
}
#foot01 .con ul{
width: 960px;
}
#foot01 .con ul li{
width: 280px;
float: left;
margin: 0 20px 0;
}

#foot01 .con ul li a{
width: 280px;
height: 280px;
overflow: hidden;
display: block;
position: relative;
background: #000;
	text-align: center;
}
#foot01 .con ul li a img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
	opacity: 0.6;
}
#foot01 .con ul li a img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
	opacity: 1;	
	 z-index: 10;
}
#foot01 .con ul li a div{
width: auto;
position: absolute;
  top: 113px;
  left: 0;
  text-align: center;
  z-index: 10000;
	width: 100%;
}
#foot01 .con ul li a div p{
	display: inline-block;
  margin:0 auto;
  padding:0 15px;
  font-size: 24px;
	text-align: center;
	border: 1px solid #FFF;
  line-height: 52px;
  color: #FFF;
}

@media screen and (max-width: 480px) {
#foot01{
width: 100%;
min-width: initial;
	min-width: auto;
background: #FFF;
padding:0px 0 0px;
}
#foot01 .con{
width: 95%;

margin: 15px auto 0;
}
#foot01 .con ul{
width: 100%;
}
#foot01 .con ul li{
width: 100%;
float: none;
margin: 0 0 15px;
}

#foot01 .con ul li a{
width: 100%;
height: auto;
overflow: hidden;
display: block;
position: relative;
background: #f3f3f3;
	text-align: center;
}
#foot01 .con ul li a img {
	display: block;
	float: left;
	transition-duration: 0;	/*変化に掛かる時間*/
	opacity: 1;
	width: 30%;
}
#foot01 .con ul li a img:hover {
	transform: scale(1);	/*画像の拡大率*/
	transition-duration: 1;	/*変化に掛かる時間*/
	opacity: 1;	
	 z-index: 10;
}
#foot01 .con ul li a div{
	float: right;
width: auto;
  text-align: center;
  z-index: 10000;
	width: 70%;
	position: static;
}
#foot01 .con ul li a div p{
	display: block;
  margin:-10px 0 0 ;
  padding:0 0;
	width: 70%;
	position: absolute;
	top:50%;
  font-size: 20px;
	font-weight: bold;
	text-align: center;
	border: none;
	
	font-size: 20px;
  line-height: 20px;
  color:#72ba37;
	}

#foot01 .con ul li a:hover{
  background-color:  #eee;
	}	
}

#foot02{
width: 100%;
min-width: 960px;
background: #404040;
padding:22px 0;
position: relative;
}
#foot02 a.page-top{
display: block;
position: absolute;
top:22px;
left:50%;
margin: 0 0 0 420px;
}
#foot02 .con01{
width: 920px;
margin: 0 auto;
	padding: 0 20px;

}
#foot02 .consp{
display: none;
}
#foot02 .con01 ul{
width: 320px;
float: left;

}
#foot02 .con01 ul:nth-child(3n){
width: 140px;
float: left;
margin: 0 !important;
padding-right: 0 !important;

}
#foot02 .con01 ul li{
margin: 0 0 5px;
}
#foot02 .con01 ul li a{
}

@media screen and (max-width: 480px) {
#foot02{
width: 100%;
min-width: initial;
	min-width: auto;
padding:30px 0 140px;
}
#foot02 a.page-top{
display: block;
position: absolute;
top:0;
left:0;
margin: 0 0 0 0;
width:100%;
text-align: center;
background: linear-gradient(#fff 50%, #404040 50%);
}
#foot02 .con01{
display: none;
}
#foot02 .consp{
display: block;
width: 90%;
padding:15px 0;
margin: 0 auto;
font-size: 12px;
}
#foot02 .consp ul{
width: 50%;
float: left;
}

}

#foot03{
width: 100%;
min-width: 960px;
background: #000;
padding:22px 0 0;
}
#foot03 .con01{
width: 920px;
padding:0 20px 0;
margin: 0 auto;
}
#foot03 .copy{
width: 100%;
padding:0 0 40px;
font-size: 12px;
color: #FFF;
margin: 70px auto 0;
text-align: center;
}
#foot03 .con01 .iin{
width: 280px;
margin: 0 40px 30px 0;
float: left;
}
#foot03 .con01 .iin:nth-child(3n){
width: 260px;
margin: 0 0 30px 0 !important;
padding-right: 0 !important;
float: left;
}
#foot03 .con01 .CArea{
width: 320px;
float: left;
}
#foot03 .con01 .RArea{
width: 280px;
float: left;

}
#foot03 .con01 p{
font-size: 14px;
margin: 0 0 5px;
}
#foot03 .con01 p.tel{
font-size: 24px;
line-height: 1;
background: url(/common_blog/img/foottel.gif) top left no-repeat;
background-size: 21px 21px;
padding:0 0 0 24px;
}

#tel_box{
	display:none;
}



/* ------------------------------
  スマホ電話番号下固定
------------------------------ */



@media screen and (max-width: 480px) {
#foot03{
	display:none;	
}

#tel_box{
display:block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10000;
}


#tel_box .tel_box_inner {
position: relative;
    width: 100%;
    margin: 0px auto;
}


#tel_box .tel_box_inner .hoscom{
font-size: 22px;
line-height: 1;
text-align: center;	
padding: 7px 0 !important; 
background-color:#fdb913;
}

#tel_box .tel_box_inner ul.hos{
width: 100%;
background-color:#80c342;
}

#tel_box .tel_box_inner ul.hos li{
display: inline-block;
padding: 12px 0 15px;
width: 33%;
float: left;
background-color:#80c342;
border-right: solid 1px #fff;
text-align: center;

}
#tel_box .tel_box_inner ul.hos li.last{
width: 33%;
margin: 0 0 0 0 ;
border-right: transparent !important;

}


#tel_box .tel_box_inner ul.hos li p.tel{
font-size: 19px;
line-height: 1;
background: url(../../img/telico.png) top center no-repeat;
background-size: 21px 21px;
padding:28px 0 0 0;
font-color:#fff !important;
}


#tel_box .tel_box_inner a:hover,
#tel_box .tel_box_inner a:active{
color: inherit;
font-color:#fff !important; 
background-color:#0C9;
}

#tel_box .tel_box_inner ul.hos a:hover li{
	background: rgba(255,255,255,0.1);
}

}