@charset "utf-8";


/* 追加style
------------------------------------------------------------*/
a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

img {
transition: 1.0s ;
}


.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.pankuzu li{
 display: inline-block;
 margin-bottom: 20px;
font-size: 12px;
color: #555;
}
 .pankuzu li:after{
 content:" ＞ ";
}

 .pankuzu li:last-child:after{

    content:"";

}


.note {
	padding-left: 1em;
	text-indent: -1em;
}

.clearfloat {
	font-size: 1px;
	line-height: 0px;
	height: 0px;
	clear: both;
}

.bright a:hover img{
 filter: alpha(opacity=50);
-moz-opacity:0.5;
 opacity:0.5;
}

p.indent-1 {
padding-left:1em;
text-indent:-1em;
}

p.indent-2 {
padding-left:2em;
text-indent:-2em;
}

p.indent-1gry {
padding-left:1em;
text-indent:-1em;
color: #c0c0c0;
}

.red_b {
	color: #DB0202;
	font-weight: bold;
}

.futo_b {
  font-weight: bold;
}

.futo_b2 {
  font-weight: bold;
  font-size: 110%;
}

.futomin_b2 {
  font-weight: bold;
  font-size: 130%;
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.futo_b2_migi {
  font-weight: bold;
  font-size: 110%;
  text-align: right;
  line-height: 130%;
}

.futo_b3 {
  font-weight: bold;
  font-size: 120%;
}

.futo_b4 {
  font-weight: bold;
  font-size: 140%;
}

.futo_b5 {
  font-weight: bold;
  font-size: 160%;
}

.futo_bbrown {
  font-weight: bold;
	color: #543f32;
}

.futo_bbrown2 {
  font-weight: bold;
	color: #543f32;
  font-size: 140%;
}

.futo_b3_migi {
  font-weight: bold;
  font-size: 120%;
  text-align: right;
  line-height: 130%;
}

.migi_moji2 {
	line-height: 150%;
	text-align: right;
}

.futo_b3red {
  font-weight: bold;
  font-size: 120%;
  color: #cc0000;
}

.futo_b3blue {
  font-weight: bold;
  font-size: 120%;
  color: #225fab;
}

.futo_b3ao {
  font-weight: bold;
  font-size: 120%;
  color: #009e9f;
}
.futo_b3aka {
  font-weight: bold;
  font-size: 120%;
  color: #660000;
}

.futo_b3wht {
  font-weight: bold;
  font-size: 120%;
  color: #fff;
}

.futo_b3cha {
  font-weight: bold;
  font-size: 120%;
  color: #946c45;
}

.futomoji3 {
	font-size: 15px;
	font-weight: bold;
	line-height: 140%;
	letter-spacing: 0.05em;
	color: #663300;
}

.futo_dred {
	font-weight: bold;
	color: #C33;
}

.blue_b {
	font-weight: bold;
	color: #0066cc;
}

.grn_b2 {
	font-weight: bold;
	font-size: 120%;
	color: #009933;
}

.oomoji {
	font-size: 110%;
	line-height: 180%;
}

.orange {
	color: #ff7f50;
}


.liteblue {
	color: #0099ff;
	font-size: 110%;
	line-height: 170%;
}

.liteblue2 {
	color: #0099ff;
	font-size: 110%;
	line-height: 170%;
	text-align: center;
}

.backred {
	background-color:#cc0000; 
	color:#ffffff;
	}

.backblue {background-color:#0033cc; color:#ffffff;}

.blue {
	color: #36C;
}

.blue14 {
	color: #36C;
	font-size: 14px;
	
}

.wht14 {
	color: #ffffff;
	font-size: 14px;
	
}

.blue2 {
	color: #39C;
}

.red {
	color: #C00;
}

.red_sm {
	color: #C00;
	font-size: 12px;
}

.red_smb {
	color: #C00;
	font-size: 12px;
	font-weight: bold;
}

.darkblue {
  color: #0033cc;
}

.pink {
	color: #F36;
}

.green {
	color: #009933;
}

.green2 {
	color: #009933;
	font-weight: bold;
}


.brown {
	color: #996633;
}

.dbrown {
	color: #663300;
}

.brown_s {
	color: #996633;
	font-size: 12px;
}

.brown2 {
	color: #996633;
	font-weight: bold;
}

.brown14 {
	color: #996633;
	font-size: 14px;
}

.maccha14 {
	color: #c5c56a;
	font-size: 14px;
}

.orange {
	color: #ff6633;
}

.orange2 {
	color: #ff6633;
	font-weight: bold;
}

.wht {
	color: #fff;
}

.gry {
	color: #999;
}

.grycenter {
	color: #999;
	text-align: center;
	font-size: 90%;
}

.c_orange {
	color: #ff6600;
}

.c_green {
	color: #009933 ;
}

.c_gray {
	color: #a0a0a0;
}

.c_brown {
	color: #946c45 ;
}

.c_blue {
	color: #0099ff;
}

.kakomimoji {
	color: #FFF;
	background-color: #F63;
	padding-right: 5px;
	padding-left: 5px;
}

.kakomired {
	color: #FFF;
	background-color: #cc0000;
	padding-right: 5px;
	padding-left: 5px;
}

.kakomiblue {
	color: #FFF;
	background-color: #39C;
	padding-right: 5px;
	padding-left: 5px;
}

.kakomigry {
	color: #FFF;
	background-color: #333;
	padding-right: 5px;
	padding-left: 5px;
}

.sm_center {
	font-size: 12px;
	line-height: 150%;
	text-align: center;
}

.center_moji {
	line-height: 150%;
	text-align: center;
}

.center_dai {
	text-align: center;
	font-weight: bold;
	font-size: 120%;
}

.center_time {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
}

.migi_moji {
	line-height: 150%;
	text-align: right;
}

.sm_moji {
	font-size: 12px;
	line-height: 140%;
}

.sm_nomal {
	font-size: 12px;
	line-height: 90%;
	font-weight: normal;
}

.sm_ao {
	font-size: 12px;
	line-height: 140%;
	color: #0066cc;
}

.s_moji {
	font-size:80%;
	line-height: 140%;
}

.s_moji_migi {
	font-size:80%;
	line-height: 140%;
	text-align: right;
	color: #0066cc;
}

.m_moji {
	font-size: 14px;
	line-height: 160%;
}

.t_moji {
	font-size: 14px;
}

.telmoji {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.telmoji2 {
	font-size: 120%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.no {
	font-size: 90%;
	padding-right: 10px;
	padding-left: 10px;
	float: left;
	border: 1px solid #CCC;
	color: #FFF;
	margin-bottom: 5px;
}

.waku_wht {
	font-size: 120%;
	padding: 5px 15px;
	float: left;
	border: 1px solid #CCC;
	color: #FFF;
	margin: 10px 0;
}

.min_wht {
letter-spacing: 0.1em;
font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size: 180%;
font-weight: bolder;
margin-top: 10px;
color: #fff;
margin-bottom: -10px;
}

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


hr.sen1 {
	height: 1px;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #cc9966;
	margin-top: 20px;
	margin-bottom: 30px;
}

hr.sen {
	height: 1px;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #333333;
	margin-top: 20px;
	margin-bottom: 30px;
}

hr.dot {
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #999;
	margin-bottom: 20px;
}



.img_left {
	width: 300px;
	margin-right: 20px;
	float: left;
}


#tittleImg{
	clear: both;
	line-height: 0;
	text-align: center;
	z-index: 0;
	margin-bottom: 20px;
}


.height60{
	height:60px;
	display:block;
}

.height40{
	height:40px;
	display:block;
}

.height30{
	height:30px;
	display:block;
}

.height20{
	height:20px;
	display:block;
}

.height10{
	height:10px;
	display:block;
}

.clearfloat {
	font-size: 1px;
	line-height: 0px;
	height: 0px;
	clear: both;
}


.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}


.box02 {
	margin-bottom: 30px;
	width: 95%;
	margin-top: 15px;
	margin-left:15px;
}

.box_700 {
	margin:0 auto;
    width: 700px;
	padding: 1%;
}


.box_kakomi {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 0;
	border: 1px solid #999;
}

.box_kakomired {
	margin:0 auto;
    width: 90%;
	padding: 2%;
	border: 1px solid #cc0000;
	background-color: #fff;
}


.box_wht {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 0;
	border-radius: 8px;
	background-color: #fff;
	color: #333;
}

.box_grn {
	float:left;
    width: 95%;
	padding: 10px 10px 0;
	background-color: #006400;
	margin-bottom:15px;
	margin-top: 15px;
	color: #fff;
}

.box_bg1 {
	float:left;
    width: 95%;
	padding: 15px 20px;
	background-color: #ebf6f7;
	margin-bottom:15px;
	margin-top: 15px;
}

.box_bg {
	margin:0 auto;
    width: 95%;
	padding: 10px;
	border: 2px solid #b0e0e6;
	border-radius: 9px;
	background-color: #fff;
}

.box_gray {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 2px 15px;
	border: 1px solid #a9a9a9;
	border-radius: 5px;
	background-color: #eee;
	color: #000;
}


.box_tan {
	margin:0 auto;
    width: 95%;
	padding: 10px 10px 2px 15px;
	border: 1px solid #d2b48c;
	border-radius: 5px;
	background-color: #faf0e6;
	color: #000;
}

.box_tuika {
	margin:0 auto;
    width: 90%;
	padding: 10px 10px 5px 15px;
	border: 1px solid #a9a9a9;
	background-color: #333;
	color: #eee;
}

.box_dot {
margin:0 auto;
width: 92%;
padding: 10px 10px 2px 15px;
border: 2px dotted #7C8282;
}

.box_redline {
margin:0 auto;
width: 93%;
padding: 10px 10px 2px 15px;
border: 1px solid #cc0000;
}

/* BOX3とBOX4を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box3	{
float: left;
width: 200px;
margin-right: 20px;
font-size: 85%;
	line-height: 5px;

}

.box4	{
	float: left;
	width: 200px;
	font-size: 85%;
		line-height: 5px;

}

.box5	{
	float: left;
	width: 430px;
	margin-right:20px;
	margin-bottom:20px;
}

.boxleft	{
	float: left;	
}

.boxleft20	{
	float: left;
	margin-right: 20px;	
}

.boxleft30	{
	float: left;
	margin-right: 30px;	
}

.boxleft2	{
	float: left;
	margin-right: 40px;
	margin-left: 10px;
}

.boxleft3	{
	float: left;
	margin-right: 40px;
	margin-left: 20px;
}

.boxleft4	{
	float: left;
	margin-right: 25px;
	margin-left: 10px;
}

.boxleft5	{
	float: left;
	margin-right: 10px;
	margin-left: 10px;
}

.boxleft7	{
	float: left;
	margin-left: 20px;
}

.box500	{
	float: left;
	width: 500px;
}

.box350r	{
	float: right;
	width: 350px;
}

.box300	{
	float: left;
	width: 330px;
	margin: 10px 30px;
}

.box340	{
	float: left;
	width: 340px;
	margin: 5px 20px;
}

.box325	{
	float: left;
	width: 325px;
	margin: 5px 20px;
}

.box250	{
	float: left;
	width: 250px;
}

.box3retu{
	float: left;
	width: 250px;
	margin: 5px 10px;
}

.box4retu	{
	float: left;
	width: 200px;
	margin: 5px 10px;
}

.boxright	{
	float: right;
}

.kakomi-yel {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  border-radius: 3px;
  transition: .4s;
background: #ffedab;
font-size: 90%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* page top
------------------------------------------------------------*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
}
.pagetop a {
    display: block;
    background-color: #d2691e;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 10px 5px;
	border-radius: 20px;
 filter: alpha(opacity=90);
-moz-opacity:0.9;
 opacity:0.9;
}
 
.pagetop a:hover {
    display: block;
    background-color: #999999;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:10px 10px 5px;
}

/* 施工説明ボタン
------------------------------------------------------------*/

a.cp_btn {
	display: block;
	width: 250px;
	padding: 0.1em;
	text-align: center;
	text-decoration: none;
	color: #20b2aa;
	border: 2px solid #20b2aa;
	border-radius: 3px;
	transition: .4s;
	margin-bottom: 5px;
}
a.cp_btn:hover {
	background: #20b2aa;
	color: #fff;
}

.cp1_btn {
	display: block;
	width: 250px;
	padding: 0.1em;
	text-align: center;
	color: #fff;
	border: 2px solid #20b2aa;
	border-radius: 3px;
	transition: .4s;
	background: #20b2aa;
	margin-bottom: 5px;
}

/* 製品一覧ボタン
------------------------------------------------------------*/

.btn-flat {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #d3d3d3;
  border: solid 2px #d3d3d3;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat:hover {
  background: #426579;
  color: white;
}

/* 製品一覧ボタンブルー
------------------------------------------------------------*/

.btn-blue {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #fff;
  border: solid 2px #00608d;
  border-radius: 3px;
  transition: .4s;
background: #0073a8;
}

.btn-blue:hover {
  background: #00afcc;
  color: white;
}

/* 製品ボタン
------------------------------------------------------------*/

a.dsc_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	text-decoration: none;
	color: #ff6600;
	border: 2px solid #ff6600;
	border-radius: 3px;
	transition: .4s;
	margin-bottom: 10px;
	margin-right: 10px;
	background-color: #ffe4c4;
}
a.dsc_btn:hover {
	background: #ff6600;
	color: #fff;
}

.dsc1_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	color: #fff;
	border: 2px solid #ff6600;
	border-radius: 3px;
	transition: .4s;
	background: #ff6600;
	margin-bottom: 10px;
	margin-right: 10px;
}


a.ds_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	text-decoration: none;
	color: #008000;
	border: 2px solid #008000;
	border-radius: 3px;
	transition: .4s;
	margin-bottom: 10px;
	margin-right: 10px;
	background-color: #f0fff0;
}
a.ds_btn:hover {
	background: #008000;
	color: #fff;
}

.ds1_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	color: #fff;
	border: 2px solid #008000;
	border-radius: 3px;
	transition: .4s;
	background: #008000;
	margin-bottom: 10px;
	margin-right: 10px;
}


a.mag_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	text-decoration: none;
	color: #946c45;
	border: 2px solid #946c45;
	border-radius: 3px;
	transition: .4s;
	margin-bottom: 10px;
	margin-right: 10px;
	background-color: #fdf5e6;
}
a.mag_btn:hover {
	background: #946c45;
	color: #fff;
}

.mag1_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	color: #fff;
	border: 2px solid #946c45;
	border-radius: 3px;
	transition: .4s;
	background: #946c45;
	margin-bottom: 10px;
	margin-right: 10px;
}


a.eki_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	text-decoration: none;
	color: #3366cc;
	border: 2px solid #3366cc;
	border-radius: 3px;
	transition: .4s;
	margin-bottom: 10px;
	margin-right: 10px;
	background-color: #e5f2ff;
}
a.eki_btn:hover {
	background: #3366cc;
	color: #fff;
}

.eki1_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	color: #fff;
	border: 2px solid #3366cc;
	border-radius: 3px;
	transition: .4s;
	background: #3366cc;
	margin-bottom: 10px;
	margin-right: 10px;
}

a.sekou_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	text-decoration: none;
	color: #333;
	border: 2px solid #333;
	border-radius: 3px;
	transition: .4s;
	margin-bottom: 10px;
	margin-right: 10px;
	background-color: #eee;
}
a.sekou_btn:hover {
	background: #333;
	color: #fff;
}

.sekou_btn {
	display: block;
	width: 210px;
	padding: 0.1em;
	text-align: center;
	color: #fff;
	border: 2px solid #333;
	border-radius: 3px;
	transition: .4s;
	background: #333;
	margin-bottom: 10px;
	margin-right: 10px;
}


/* --- Q&A --- */

.qaContainer dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #afeeee;
text-indent: -25px;
}
.qaContainer dt:before {
content: "Q.";
font-weight: bold;
margin-right: 7px;
}
.qaContainer dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer dd:before {
content: "A.";
color: #20b2aa;
font-weight: bold;
margin-right: 7px;
}

/* --- Q&A mag--- */

.qaContainer2 dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #ffebcd;
text-indent: -25px;
}
.qaContainer2 dt:before {
content: "Q.";
font-weight: bold;
margin-right: 7px;
}
.qaContainer2 dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer2 dd:before {
content: "A.";
color: #b8860b;
font-weight: bold;
margin-right: 7px;
}

/* --- Q&A coffee--- */

.qaContainer4 dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #cbb994;
text-indent: -25px;
}
.qaContainer4 dt:before {
content: "Q.";
font-weight: bold;
margin-right: 7px;
}
.qaContainer4 dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer4 dd:before {
content: "A.";
color: #7b5544;
font-weight: bold;
margin-right: 7px;
}

/* --- Q&A hs--- */

.qaContainer3 dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #cce6ff;
text-indent: -25px;
}
.qaContainer3 dt:before {
content: "Q";
font-weight: bold;
margin-right: 7px;
}
.qaContainer3 dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer3 dd:before {
content: "A.";
color: #1771c6;
font-weight: bold;
margin-right: 7px;
}


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


/* スマホＰＣ切り替え
----------------------------------*/

@media screen and (min-width: 641px) {
.screensize_sp {display:none;} /*PCで閲覧したら非表示にするスマホ用コンテンツ*/
}
 
@media screen and (max-width: 640px) {
.screensize_pc {display:none;} /*スマホで閲覧したら非表示にするPC用コンテンツ*/
}