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

/* サイト内フォントサイズ ここから*/
body{
    font-size: 1em ;/* 通常サイズは100pxの0.16倍で16pxだよ！ここだけfont-size em！ */
	
}

h1{
    font-size: .2rem;/* 100pxの0.2倍だから20pxだよ！ */
    padding: .5em 0 .5em .75em;/* 20pxにemを掛けるよ！ */
    border-bottom: .05em solid #FFFFFF;
	background-color: #444444;
	color: #ffffff;
}

h3{	margin-left: 7%;
	margin-right: 7%;		
    padding: .5em 0 .5em .75em; /* 上右下左 */
    border-left: .5em solid #DFE89A;
    border-bottom: 1px solid #bbb;
}


h5{	margin-left: 10%;
	margin-right: 10%;		
    padding: .5em 0 .5em .75em; /* 上右下左 */
    border-left: .5em solid #baceff;
    border-bottom: 1px solid #bbb;
	color: #1B2333;}

p.tx{
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom:10px;
}

/*　画像余白をゼロにする　*/
img{
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	font-size: 0;
	line-height: 0;
}



.hogo{
	margin:0 10% 0% 10%;
	background-color: #fff;
}
.hogo p{
	font-weight: 400;
	margin:0 10% 0% 10%;
	}

select.hidden{visibility: hidden;}
/*--------------------------------------
  　　スマホでの表示
--------------------------------------*/
.res-table{
	width:80%;
    margin:2em auto;
	border:#6699ff 1.5px solid;
}
.res-table th{
    padding:3px;
	display:block;
	background-color:#ccddff;
}


.res-table td{
	padding:5px;
	display:block;
	text-align:center;
	background-color:#fff;
}


#main{
width:1000px;
height:436px;	
background-image:url(../images/new_cd/new_cd_06.jpg);
}

#main_bn{
width:303px;
height:73px;
padding:282px 0 0 515px;
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

/*--------------------------------------
  PCでの表示
--------------------------------------*/

.res-table{
	width:80%;
    margin:10px auto;
	font-size:80%;
	border:#6699ff 1.5px solid;　  
}
.res-table tr{
    border-bottom:#ccddff 1px solid;
}
.res-table tr last-child{
	border:none
 }
.res-table th{
	width:25%;   
    padding:5px 10px;
	display:table-cell;
	border-right:#ccddff 1px solid;
	text-align: left;
}

.res-table td{
	width:55%;   
    padding:5px 10px;
	display:table-cell;
	text-align: left;
	background-color:#fff;
}

}	
/*---------------------------------------------------*/
span.b{
	font-weight:500;
}
/* サイト内フォント ここまで*/

img.mao{
	margin:auto;
}

img.mb20{
	margin-bottom: 20px;
}

img.imgR {
	float: right;
	margin:1%;
}
/*ハンバーガーアイコンにするところ*/

header {
  padding:10px;
  background: skyblue;
}

#navi-drawer {
  position: relative;
}

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

/*アイコンのスペース*/
#navi-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

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

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

/*中身*/
#navi-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 230px;/*最大幅（調整してください）*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
#navi-content ul{
	font-size: 1rem;
	color: #87191A;
	line-height: 110%;
	list-style:none;
}

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

#navi-input:checked ~ #navi-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*ハンバーガーアイコンにするところ*/


a img {border-style:none;
}

/*bodyの背景色これも好き　　background:url(../img/bg_br2.gif) background-color:#F0EBEB #f8fbf8;*/
body{
background-color:#F9F6ED;
background-attachment:fixed;
margin:auto;
}

#wrap{
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
width:750px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background:#fff;
padding:0px 0px 0px 0px;
}

p{
margin:0;
font-family:"メイリオ", "ＭＳ ゴシック", "Osaka－等幅";
line-height:1.8em;
}

#wrapper2{
width:1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background:#fff;
padding:0px 0px 0px 0px;
}
.pagetop {
  position: fixed;
  right: 30px;
  display: block;
  padding: 20px;
}


div.pc_box{
	width: auto;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width : 899px ){
.pc { display: none !important; }
.sp { display: block !important; }
}

/* スマートフォンで見たとき画像がはみ出さなくなるよ */
@media only screen and (max-width : 899px ){
img { max-width: 100%;
	  height:auto;
      margin-left:auto;
      margin-right:auto;}
}
@media only screen and (max-width : 899px ){
#wrap{
max-width:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background:#fff;}
}

.footer{
background:#663300;
width:100%;
line-height:1.2em;
margin-top:30px;
}

p.p_footer{
color:#fff;
font-size:10px;
text-align:center;
}

.p_footer a{
color:#fff;
}


/* sp用のfooter */
@media only screen and (max-width : 899px ){

 p.footer_under{
 margin-top:20px;
 text-align:center;
 background:#666666;
 color:#fff;
 font-size:small;
 padding:5px 0 5px;
 line-height:1;
　}

.footer{
background:#663300;
width:100%;
line-height:1.2em;
margin-top:30px;
}

p.p_footer{
color:#fff;
font-size:10px;
text-align:center;}

.p_footer a{color:#fff;}
}
/* sp用のfooter ここまで */



/* sidenavii */


#navi {
	right: 0px;
	list-style: none;
	margin: 0;
	position: fixed;
	top: 100px;
}

#navi li {
	margin-bottom: 2px;
}

#navi a {
	background: #CCDA83;
	color: #663300;
	display: block;
	font-size: 14px;
	padding: 15px 10px;
	text-decoration: none;
	text-transform: uppercase;
	text-align:center;
	line-height:1.5em;
	font-weight:bold;
	-webkit-border-radius: 5px 20px 5px 20px / 5px 20px 5px 20px;
-moz-border-radius: 5px 20px 5px 20px / 5px 20px 5px 20px;
border-radius: 5px 20px 5px 20px / 5px 20px 5px 20px;

}

#navi a:hover {
	background:#FF9933;
}

#navi .current a {
	background:#FF9933;
	color:#663300;
}

#navi_seikyu{
	position: fixed;
	top:680px;
	right:-280px;
	}

/* sidenavii */

/*header navi　footer*/
header, footer {
    width:100%;
    z-index:2;
    position:fixed;
    background:rgba(255,255,255,.7)}
footer {/*略*/}
/*header menu*/
header {
    display:table;
    font-size:0; /*ul,liが親のfont-sizeを継承して隙間が空くのをリセット*/
    line-height:0}
header h1, navi {
    display:table-cell}
navi {
    text-align:right;
    vertical-align:bottom}
header h1 a img {
    height:40px;
    margin:10px}
header ul {
    font-size:13px;
    line-height:1;
    margin:0 10px 10px 0}
header ul li {
    margin-left:3px;
    display:inline-block}
header ul li::after {content:' |'}
header ul li:last-child::after {content:''}
header ul li a {color:inherit}
	
/*header navi　footer*/


/*お客様の声部分 よそのサイトから*/

/* line 246, ../sass/style.scss */
#kuchikomi {
  background-color: #fff;
  color: #4e4e4e;
  margin: 40px;
}
/* line 249, ../sass/style.scss */
#kuchikomi .title_back {
  background: url(../img/title-back-003.png) no-repeat center center;
  background-size: cover;
  padding: 50px 0;
  margin-bottom: 70px;
}
/* line 255, ../sass/style.scss */
#kuchikomi .title {
  font-size: 32px;
  color: #fff;
  margin: 0;
}
/* line 260, ../sass/style.scss */
#kuchikomi .kuchikomi_content {
  background: url("../img/bk_koe.jpg");
  width: 90%;
  margin: 30px auto;
  border: 1px solid #eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 30px;
}
/* line 267, ../sass/style.scss */
#kuchikomi .kuchikomi_content h3 {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid #9e9e9e;
  position: relative;
}
/* line 274, ../sass/style.scss */
#kuchikomi .kuchikomi_content h3 .info {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 14px;
  font-weight: normal;
}

#kuchikomi .kuchikomi_content_tuma {
  background: url("../img/bk_koe_pink.jpg");
  width: 90%;
  margin: 30px auto;
  border: 1px solid #eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 30px;
}


#qa {
  background-color: #fff;
	color:#4e4e4e;
  margin: 40px;
}

#qa .tx_q {
  font-size: 24px;
  margin: 0;
　padding: 1.5em;/*文字周りの余白*/
  background: url("../img/bk_koe_green.jpg") ;
　margin-bottom:20px;
}

#qa .tx_a{
	 margin-top:10px;
}

#qa .qa_content {
  width: 90%;
  margin: 30px auto;
  border: 1px solid #eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 30px;
}

#qa h4 {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid #9e9e9e;
  position: relative;
}

#qa .qa_content h3 {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid #9e9e9e;
  position: relative;
}

#qa .qa_content h3 .info {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 14px;
  font-weight: normal;
}

#caution {
  background-color: #fff8b5;
	color:#4e4e4e;
  margin: 5%;
}


#caution .ca_content {
  width: 80%;
  margin: 30px auto;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 30px;
}

#caution .tx_q {
  font-size: 24px;
  margin: 0;
　padding: 1.5em;/*文字周りの余白*/
  background: url("../img/bk_koe_pink.jpg") ;
　margin-bottom:20px;
}

#caution .tx_a{
	 margin-top:10px;
}

/*　スマホのフッタ部分の電話番号とか資料請求ボタンだよ　*/

/*641px～PC　PC上では見えないようにする*/
@media screen and (min-width:900px){
	.footer_area{
		display: none;
}	
}
 
/*スマホ～899pxの幅サイズまで*/
@media screen and (max-width:899px){
.footer_area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba( 0, 0, 0, 0.6 );
	z-index: 10000;
}
.footer_area .footer_area_inner {
    position: relative;
    width: 80%;
    margin: 0px auto;
    padding: 10px 0;
	margin-right: 0px;
}
.footer_area .footer_area_inner .footer_area_inner_btn {
    width: 85%;
    padding: 11px 0;
    font-size: 20px;
    font-weight: bold;
    margin-left: 15px;
	line-height: 1.3;
    
}
.inquiry_btn {
    background-color: #068BF1;
    -webkit-border-radius: 3px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
	width: 80%;
    padding: 5px 0;
    font-size: 18px;
    font-weight: bold;
}
.inquiry_btn:link, .inquiry_btn:visited {
    color: #FFFFFF !important;
}
.footer_area_inner span{
	color: #fff;
}
#siteBottom{
	margin-bottom: 85px;
}
	
p.mab10{
	margin:0 0 10 0;
	}	
	
/*sp_CSSでアコーディオンちゃん*/
	/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: auto;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#fff;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #fff;
    opacity: 1;
	border: dotted #008080;
}
	
/*sp　CSSでアコーディオンちゃん*/
	

/*フレーム*/
.inlineframe{
border: solid 1px #808080;
background-color:#FFFFFF;
height:200px;
overflow:auto;
overflow-y:scroll;
overflow-x:hidden;
}
	
	
/*　画像余白をゼロにする　*/
img{
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	font-size: 0;
	line-height: 0;
}

/*	ここからくらいきサイト塩路さんのCSS */
	
#contents{
	width:1000px;
	padding:0 10%;
	margin: 0 10%;
}
	
	
#head{
	width:940px;
	height:100px;
	padding-bottom:3px;
}
	
#head_nav{
	float:right;
	padding:15px;
}

#title{
	float:left;
}
#head_nav{
	float:right;
	padding:15px;
}
#head_nav li{
	float:right;
	list-style:none;
	margin-right: 5px;
}

ul#nav  li {
    float: left;
	list-style-type: none;
}	
	
.clear{
	clear:both;}
	
.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  

.clearfix { display: inline-table; }
	
#content{
	width:700px;
	padding-bottom:20px;
	float:right;
}

/* foot */
#foot{
	clear:both;
	width:100%;
	height:270px;
	background-color:#eef0e4;
}
	
#foot #sitemap{
	width:940px;
	padding:20px 0;
	margin:0 auto;
}

#foot #sitemap .mapcate{
	font-weight:bold;
}
	
#address{
	width:100%;
	height:50px;
	background-color:#dde1c9;
	font-size:11px;
	text-align:center;
	padding:10px;

}

.f_right{
	float:right;}

	
#fotter{
text-align:center;
padding:30px 0;
font-size:12px;
clear:both;
}