/*
Theme Name: tatami-akiyoshi theme
Theme URI: tatami-akiyoshi.jp
Author: miraikogeisya taniwaki
Author URI: http://miraikogeisya.com/
Version: 1.0
*/

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

/*google font notosans使用のための*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*ボックスシャドウ*/
.shadow{
box-shadow:3px 3px 2px 0px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.8); }

/*がちゃ*/
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 10px 10px;
  min-width: 160px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FF0;
  text-align: center;
  font-weight: bold;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #FF0;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}
.gacha{
text-align: center;
padding-bottom: 20px;
}
.gacha img {
    display: block;
    margin: 0 auto;
    width: 150px;
}

/* マージンボトム
-----------------------------------------------------------------------------*/
.mb5 { margin-bottom: 5px;}
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb18 { margin-bottom: 18px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.mt5 { margin-top: 5px;}
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt100 { margin-top: 100px; }

.mr5 { margin-right: 5px;}
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr18 { margin-right: 18px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr45 { margin-right: 45px; }
.mr50 { margin-right: 50px; }
.mr100 { margin-right: 100px; }
.mr150 { margin-right: 150px; }
.mr160 { margin-right: 160px; }
.mr165 { margin-right: 165px; }

.ml5 { margin-left: 5px;}
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }
.ml45 { margin-left: 45px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }
.ml70 { margin-left: 70px; }
.ml100 { margin-left: 100px; }
.ml150 { margin-left: 150px; }
.ml160 { margin-left: 160px; }
.ml165 { margin-left: 165px; }

/* フロート回り込み解除
----------------------------------------------- */
.clearfix { width:100%; }
.clearfix:after {content: ".";display: block;visibility: hidden;height: 0.1px;font-size: 0.1em;line-height: 0;clear: both;}


.center {
	text-align:center;}
	
/* for PC */
@media only screen and (min-width:737px){
.pc_none,
#foot-action .btn01,#foot-action .btn02{
	display:none;
	}

.container{
	width:960px;
	margin:0px auto;
	height:auto;
	display:block;
}
.container:after{ overflow:hidden;}

/*フーバー画像緑色*/
.green {
	width:			300px;
	height:			250px;
	position:		relative;
	overflow:hidden;
	display:block;
	margin:0 0 10px;	
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
}

#top .green {
	width:			300px;
	height:			250px;
	position:		relative;
	overflow:hidden;
	display:block;
	margin:0 0 0;	
	-webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.green .caption {
	width:300px;
	height:250px;
	line-height:36px;
	font-size:		16px;
	color:			#fff;
	text-align: left;
	margin:130px 0 0 0px;
	padding-left:		0px;
}
.green .caption span{ width:160px; position:relative; display:block;}
.green .caption span:after{ position: absolute; content: url(img/icon.png); top:-10px; right:0; -webkit-transition:	all 0.3s ease; transition: all 0.3s ease;}
.green .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(50,150,0,0.9);
	-webkit-transition:	all 0.3s ease;
	transition:		all 0.3s ease;

}
.green:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left:		80px;	/* 右にずらす */
}

/* slider
----------------------------------------------- */
#keyimg{
	width:100%;
	height:450px;
	overflow:hidden;
	clear:both;
	background: #73bd1e;
	padding:30px 0;
}
#keyimg .bx-slider{ }
#keyimg .bx-viewport {
  background: transparent !important;
  border: 0;
  overflow: visible !important; //両サイドが表示される
  height: 450px !important;
  //z-index: 1; //スマホやタブレットでスワイプできないときに指定
}
.bx-wrapper{ position:relative;}
.bx-wrapper .bx-prev {
	position:absolute;
	width:40px;
	height:40px;
	top:50%;
	left:-30px !important;
	background:url(img/bt01.png) no-repeat;
	font-size:0;
	margin-top:-20px;
}
.bx-wrapper .bx-next {
	position:absolute;
	width:40px;
	height:40px;
	top:50%;
	right:-30px !important;
	background: url(img/bt02.png) no-repeat;
	font-size:0;
	margin-top:-20px;
}
/* header
----------------------------------------------- */
#header{
	width:960px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	padding:30px 0 10px;
	background: url(img/common/h_bg.png) 215px 10px no-repeat;
	position: relative;
}
#header:after {
    content: '土日も見積もり電話受付しております。（休日の場合は受付後、平日に折り返しご連絡致します）';
    position: absolute;
    top: 10px;
    left: 44%;
    font-size: 12px;
    font-weight: bold;
    white-space: pre;
}
#header .logo {
	width:210px;
	height:50px;
	float:left;
	margin-right:150px;
}
#header .tel { float:right; margin-top:3px;}
#header .mail { float:right; margin: 0 0 10px 30px;}

/* header nav
----------------------------------------------- */
ul#nav {
	width:100%;
	height: 60px;
	background:#329600;
	border-bottom:#fff100 2px solid;
	overflow:hidden;
}
ul#nav li.bt01,
ul#nav li.bt02,
ul#nav li.bt03,
ul#nav li.bt04,
ul#nav li.bt05,
ul#nav li.bt06{
	width:137px; float:left;
}
ul#nav li.bt07{
	width:138px; float:left;
}

/* #hero
----------------------------------------------- */
#hero { width:100%; height:300px; line-height:300px; text-align:center; font-size:40px; background-image:url(img/bg.png),url(img/about00.jpg); background-position:left top,center center; background-size:auto,cover; background-repeat:repeat,no-repeat;}
#hero h2{ font-family: 'Noto Sans Japanese', sans-serif; font-weight:800; color:#FFFFFF; line-height:300px;}

/* top greeting
----------------------------------------------- */
.top {
	width:100%;
	padding: 60px 0;
}
.top .container {
	width:1000px;
	background:url(img/cont01_bg.png) right 60px no-repeat;
	margin: 0 auto;
	padding:60px 0;
}
.top .container .ttl {
	width:550px;
	float:left;
	margin: 0 auto;
	margin-bottom:10px;
}
.top .container .tx {
	width:500px;
	float:left;
	margin: 0 auto 30px;
	text-align:left;
	line-height:1.8em;
}
.top .container .btn {
	clear:both;
	width:260px;
	margin:0 auto;
}

/* top2 products
----------------------------------------------- */
.top2 {
	width:100%;
	background: #dafed6 url(img/common/bg_g.png) center top no-repeat;
	height: 680px;
	padding: 60px 0 30px;
}
.top2 .ttl {
	width:332px;
	margin: 0 auto 30px;
	height: 70px;
}
.top2 .container {
	width:960px;
	display:flex;
   -webkit-justify-content: space-between; /* Safari */
   justify-content: space-between;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

.top2 .container .bt01{
	width:300px;
	height:240px;
	display:block;
	padding:0;
	margin-bottom:30px;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	text-align:center;
}

.top2 .container .pdbox .name,
.top2 .container .pdbox .btn {
	text-align:center;
	clear:both;
	margin:0;
}

.top2 .container .pdbox .photo {
	margin:0;
border-top:#fff100 2px solid;
border-bottom:#fff100 2px solid;}

/* top3 service
----------------------------------------------- */
.top3 {
	width:100%;
	background-image: url(img/bg.png), url(img/common/bg_img.png);
	background-repeat: repeat,no-repeat;
	background-position: left top,center center;
	background-size: auto,cover;
	height: 670px;
	padding: 60px 0;
}
.top3 .ttl {
	width:778px;
	margin: 0 auto 30px;
	height: 70px;
}
.top3 .container  {
	width:960px;
	display:flex;
   -webkit-justify-content: space-between; /* Safari */
   justify-content: space-between;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}
.top3 .container .svbox {
	width:300px;
	height:240px;
	display:block;
	padding:10px 0;
	margin-bottom:30px;
	background:url(img/common/striped01_bg.png) ;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	text-align:center;
}
.top3 .container .svbox01{
	width:300px;
	height:250px;
	float:left;
	text-align:center;
	color:#FFF;
	box-sizing:border-box;
	background:url(img/top03_01.png) no-repeat;
	padding:170px 20px 20px;
	border:1px solid #fff;
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}
.top3 .container .svbox02{
	width:300px;
	height:250px;
	float:left;
	text-align:center;
	color:#FFF;
	box-sizing:border-box;
	background:url(img/top03_02.png) no-repeat;
	padding:170px 20px 20px;
	border:1px solid #fff;
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}
.top3 .container .svbox03{
	width:300px;
	height:250px;
	float:left;
	text-align:center;
	color:#FFF;
	box-sizing:border-box;
	background:url(img/top03_03.png) no-repeat;
	padding:170px 20px 20px;
	border:1px solid #fff;
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}
.top3 .container .svbox04{
	width:300px;
	height:250px;
	float:left;
	text-align:center;
	color:#FFF;
	box-sizing:border-box;
	background:url(img/top03_04.png) no-repeat;
	padding:170px 20px 20px;
	margin:20px 0 0 160px;
	border:1px solid #fff;
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}
.top3 .container .svbox05{
	width:300px;
	height:250px;
	float:right;
	text-align:center;
	color:#FFF;
	box-sizing:border-box;
	background:url(img/top03_05.png) no-repeat;
	padding:170px 20px 20px;
	margin:20px 160px 0 0;
	border:1px solid #fff;
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}

.top3 .container .svbox .no {
	float:left;
	text-align:left;
	clear:both;
	margin:5px 0 0 20px;
}
.top3 .container .svbox .tx {
	float:left;
	text-align:center;
	clear:both;
	width:300px;
	font-size:18px;
	color:#FFFFFF;
	margin:30px 0 0 0;
}


/* top4 seko
----------------------------------------------- */
.top4 {
	width:100%;
	background: #dafed6;
	padding: 60px 0 30px;
}
.top4 .ttl {
	width:332px;
	margin: 0 auto 30px;
	height: 70px;
}
.top4 .container {
	width:960px;
	display:flex;
   -webkit-justify-content: space-between; /* Safari */
   justify-content: space-between;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

.top4 .container .skbox {
	width:300px;
	display:block;
	padding:0;
	margin-bottom:30px;
}
.top4 .container .skbox p{
	width:300px;
	height:250px;
	overflow:hidden;
}
.top4 .container .skbox p img{
	-webkit-border-radius:6px 6px 0 0 ;
    border-radius:6px 6px 0 0 ;
}
.top4 .container .skbox .tx {
	height:30px;
	padding:10px;
	text-align:left;
	color:#FFFFFF;
	-webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
	background:url(img/common/striped01_bg.png);
	font-size:14px;
	border-top:3px solid #FF0;
	font-weight:bold;
}


/* top5 contact
----------------------------------------------- */
.top5 {
	width:100%;
	height: 200px;
	overflow:hidden;
}
.top5 .container {
	margin:0 auto;
	width:960px;
	background:url(img/common/toi_bg02.png) top center no-repeat;
	padding: 74px 0 0 0;
	height: 126px;
	color: #000;
}
.top5 .container .mail {
	float:right;
	width:230px;
	height: 51px;
}

/* top6 map
----------------------------------------------- */
.top6 {
	width:100%;
	height:304px;
	border-bottom: 30px solid #329600;
	border-top: 30px solid #329600;
}
.top6 .container {
	width:100%;
	height: 300px;
	border-top:2px #fff100 solid;
	border-bottom:2px #fff100 solid;
}

/* footer
----------------------------------------------- */
#footer {
	clear:both;
	height:auto;
	overflow:hidden;
	margin:0;
	padding:20px 0;
	background: #73bd1e;
	line-height: 1.8em;
	color:#FFFFFF;
	}
#footer .f_navi {
	width: 960px;
    height: 20px;
    margin: 10px auto 30px;
}
#footer ul#flexBox{
  display:flex;
  height:20px;
  justify-content:space-around;
  font-weight:bold;
  }
 
#footer ul#flexBox li{
	width:16.5%;
	height:20px;
	display:block;
	text-align:center;
	border-left:1px #FFFFFF solid;
}
#footer ul#flexBox li a span{
	font-size:70%;
	line-height:1em;
	}
#footer ul#flexBox li:last-child{
	border-right:1px #FFFFFF solid;
}

#footer ul#flexBox2{
	width:660px;
  display:flex;
  justify-content:space-between;
 margin: 0 auto;
}
 
#footer　ul#flexBox2 li{
	width:auto;
}

#footer .container {
	clear:both;
	width:960px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	padding:20px 0;
	line-height: 1.2em;
	color:#FFFFFF;
	}
	
/* sub_header
----------------------------------------------- */
#sub_header{
	height:286px;
	overflow:hidden;
	clear:both;
	text-align: center;
	width: 100%;
	border-bottom:#fff100 2px solid;
}
.tatami_h{
	width: 100%;
	background:url(img/tatami_header.png) top center no-repeat;}

/* sub_footer
----------------------------------------------- */
#sub_footer{
	height:460px;
	overflow:hidden;
	clear:both;
	text-align: center;
	width: 100%;
}
.tatami_f{
	width: 100%;
	background-image:url(img/message.png);
	background-repeat:no-repeat;
	background-size:cover;
	}	
	
/*bread
----------------------------------------------- */
#bread {
	width:100%;
	padding:20px 0 17px;
	background:#329600;
	font-size:14px;
	color:#FFFFFF;
	overflow:hidden;
	border-top:#fff100 2px solid;
	}
#bread ol { overflow:hidden;}
#bread ol li {
	list-style:none;
	width:auto;
	padding-right:15px;
	float:left;
	position:relative;
	}
#bread ol li:first-child{ padding:0 15px 0 25px;}
#bread ol li:first-child:before {
	font-family: FontAwesome;
	content: '\f015';
	font-size:140%;
	margin-right:5px;
	position:absolute;
	top:0px;
	left:0;
	}
#bread ol li:after {
	content:'　\f105';
	font-family: FontAwesome;
	}
#bread ol li:last-child:after {
	content: ' ';}
	
/*tatami
----------------------------------------------- */
.tatami  {
	width:100%;
	height: auto;
	padding: 60px 0 0;

}
.tatami_ttl {
	width:702px;
	margin: 0 auto 60px;
	height: 48px;
	
	}
.tatami01 {
	background:url(img/tokucho01_bg.png) left top no-repeat;
	padding-left:380px;
	width:420px;
	height:370px;
	margin:0 auto;
	}
.tatami02 {
	background:url(img/tokucho02_bg.png) right top no-repeat;
	padding-right:380px;
	width:480px;
	height:370px;
	margin:0 auto;
	}
.tatami03 {
	background:url(img/tokucho03_bg.png) left top no-repeat;
	padding-left:380px;
	width:430px;
	height:370px;
	margin:0 auto;
	}
.tatami04 {
	background:url(img/tokucho04_bg.png) right top no-repeat;
	padding-right:380px;
	width:480px;
	height:370px;
	margin:0 auto;
	}
	

/* お客様の感想
----------------------------------------------- */
#review article h3 img { display:block; margin:90px auto 90px;}
#review article .container .wrap{ width:800px; margin:0 auto 50px; background:#DAFED6; padding:30px; box-sizing:border-box; text-align:center;}
#review article .container .wrap h4{ margin:0 0 10px;}
#review article .container .wrap img{ width:740px; height:auto;}

/* 会社概要
----------------------------------------------- */
#about article{ padding:90px 0 0;}
#about article h3 img { display:block; margin:90px auto 90px;}
#about article .container .wrap{ width:800px; margin:0 auto 50px; background:#DAFED6; padding:30px; box-sizing:border-box; text-align:center;}
#about article .container .wrap h4{ margin:0 0 10px;}
#about article .container .wrap img{ width:740px; height:auto;}
#about article .container .wrap table{ background-color:#fff; font-size:120%;}
#about article .container .wrap table tr th{ width:36%; box-sizing:border-box; padding:20px; text-align:right; border-bottom:1px dashed #9BFD91;}
#about article .container .wrap table tr td{ width:64%; box-sizing:border-box; padding:20px; text-align:left; border-bottom:1px dashed #9BFD91; line-height:1.2em;}

/* よくある質問
----------------------------------------------- */
#question article{ overflow:hidden; padding:90px 0 0;}
#question article h3 img { display:block; margin:90px auto 90px;}
#question article .container .wrap{ width:800px; margin:0 auto 50px; background:#DAFED6; padding:30px; box-sizing:border-box; text-align:center;}
#question article .container .wrap dl:last-child{ margin:0 auto 0;}
#question article .container .wrap h4{ margin:0 0 10px;}
#question article .container .wrap dl{ display:block; background-color:#fff; margin:0 0 40px;}
#question article .container .wrap dl dt{ box-sizing:border-box; text-align:left; padding:20px 20px 20px 60px; position:relative; border-bottom:1px dashed #9BFD91; font-weight:bold;}
#question article .container .wrap dl dt:before{ content:'Q'; font-size:150%; color:#CC0000; top:20px; left:30px; position:absolute;}
#question article .container .wrap dl dd{ box-sizing:border-box; text-align:left; padding:20px 20px 20px 60px; position:relative; border-bottom:1px solid #9BFD91; line-height:1.5em;}
#question article .container .wrap dl dd:before{ content:'A'; font-size:150%; color: #009; top:20px; left:30px; position:absolute; font-weight:bold;}
#question article .container .wrap dl dd p{
line-height: 1.5;
}

/* ご注文の流れ
----------------------------------------------- */
#flow h3 img { display:block; margin:90px auto 90px;}
#flow article{ overflow:hidden;}
#flow article .container { width:100%; overflow:hidden;}
#flow article .container .wrap{ overflow:hidden; display:block;}
#flow article .container .wrap:last-child{ background-image: none; padding:30px 0 0; }
#flow article .container .wrap dl{ overflow:hidden; width:960px; padding:0 0 90px; background-image: url(img/flow_00.png); background-position:center bottom; background-repeat:no-repeat; margin:0 auto 60px;}
#flow article .container .wrap:last-child dl{ background-image: none; padding:0 0 0; margin:0 auto 30px;}

#flow article .container .wrap .odd dt{ width:440px; float:left;}
#flow article .container .wrap .odd dd{ width:520px; float:right;}

#flow article .container .wrap .even dt{ width:300px; float:right;}
#flow article .container .wrap .even dd{ width:500px; float:left;}

#flow #f_ttl{ width:100%; height:460px; background-image:url(img/bg.png), url(img/flow_10.jpg); background-position:center center ,center center; background-repeat: repeat,no-repeat; background-size: auto,cover;}
#flow #f_ttl p{ padding:80px 0 0; text-align:center; color:#fff; font-family: 'Noto Sans Japanese', sans-serif; font-weight:800;text-shadow: 1px 1px 3px #000; line-height: 2em;  font-size: 16px;}

/* お店までの道順
----------------------------------------------- */
#shop h3 img { display:block; margin:90px auto 90px;}
#shop article{ overflow:hidden;}
#shop article .bt00{ width:610px; margin:0 auto 50px; overflow:hidden;}
#shop article .bt00 .bt01{ width:300px; float:left;}
#shop article .bt00 .bt02{ width:300px; float:right;}
#shop article .container { width:100%; overshop:hidden;}
#shop article .container .wrap{ width:960px; margin:0 auto 40px; padding:0 0 90px; background-image: url(img/flow_00.png); background-position:center bottom; background-repeat:no-repeat; overflow:hidden; display:block;}
#shop article .container .wrap:last-child{ background-image: none; margin:0 auto 0px; }

#shop article .container .wrap .odd dt{ width:440px; float:left;}
#shop article .container .wrap .odd dd{ width:520px; float:right;}

#shop article .container .wrap .even dt{ width:300px; float:right;}
#shop article .container .wrap .even dd{ width:500px; float:left;}

#shop #f_ttl{ width:100%; height:300px; background-image:url(img/bg.png), url(img/shop_09.jpg); background-position:center center ,center center; background-repeat: repeat,no-repeat; background-size: auto,cover; }
#shop #f_ttl p{ font-size:16px; padding:100px 0 0; text-align:center; color:#fff; font-family: 'Noto Sans Japanese', sans-serif; font-weight:800;text-shadow: 1px 1px 3px #000; line-height:2em;  }

/* 施工事例
----------------------------------------------- */
#case article{ width:960px; margin:90px auto 20px; overflow:hidden;}
#case article .container{ overflow:hidden; width:990px; margin:0 0 0 -30px; display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;}
#case article .container .wrap { width:300px; float:left; margin:0 0 30px 30px;}
#case article .container .wrap p { display:block; line-height:1.3em; margin:0 0 10px;}
#case article .container .wrap p img{ width:300px; height:250px;}
#case article .container .wrap p date { color:#F48413; padding:0 10px 0 0; font-size:13px; font-weight:bold; }
#case article .container .wrap p span { padding:0 0 0 10px; border-left:1px solid #333; font-size:13px; }
#case article .container .wrap p a:link ,
#case article .container .wrap p a:visited { color: #333; text-decoration:none;}
#case article .container .wrap p a:hover,
#case article .container .wrap p a:active { color: #000; text-decoration:underline; transition-property: all; transition: 0.2s linear; }

/* 料金表
----------------------------------------------- */
#price article{ padding:90px 0 0; overflow:hidden;}
#price article .container{ overflow:hidden; }
#price article .container dl { overflow:hidden; margin:0 0 30px; }
#price article .container dl dt { width:280px; float:left; }
#price article .container dl dd { width:680px; float:left; }
#price article .container dl dd table{
	background-color:#FFFBC1;
	border-collapse:collapse
	}
#price article .container dl dd table tr:first-child{ border-bottom: none;}
#price article .container dl dd table tr{ border-bottom:1px dashed #333;}
#price article .container dl dd table tr #ttl{ font-family: 'Noto Sans Japanese', sans-serif; height:70px; text-align:center; font-size:30px; color:#FFFFFF; line-height:70px; background-image:url(img/price00.jpg); padding:0;}
#price article .container dl dd table tr .ttl01 { font-size:18px; font-weight:bolder; padding:10px 0 10px 20px; }
#price article .container dl dd table tr .ttl01 span{ margin:0 20px 0 0;}
#price article .container dl dd table tr .price { font-size:18px; font-weight:bold; text-align:center; }
#price article .container dl dd table tr td{ padding:16px 10px 12px;}
#price article .container dl dd table tr.last td{ text-align:center;}
#price article .container dl dd table tr:last-child{ border-bottom:none;}
#price article .container dl dd table tr .left_b { border-left:1px dashed #333; text-align: center; font-weight: bold;}
#price article .container #p04 dd table tr td ,
#price article .container #p05 dd table tr td {
    padding: 23px 16px 19px;
}
#price article .container #p04 dd table tr #ttl,
#price article .container #p05 dd table tr #ttl{ font-family: 'Noto Sans Japanese', sans-serif; height:70px; text-align:center; font-size:30px; color:#FFFFFF; line-height:70px; background-image:url(img/price00.jpg); padding:0;}

/* 施工実績　シングル
----------------------------------------------- */
#c_single article .container{ }
#c_single article .container dl { overflow:hidden; margin:0 auto; padding:90px 0 80px; border-bottom:1px solid #000;}
#c_single article .container dl dt { width:540px; float:left; margin:0 30px 0 0;}
#c_single article .container dl dt img{ max-width:100%; height:auto; margin:0 0 30px;}
#c_single article .container dl dd { width:390px; float:right; color:#3F3F3F;}

#c_single article .container dl dd .cat { padding:20px 0 17px 12px; border-top:1px solid #666666; border-bottom:1px solid #666666;}
#c_single article .container dl dd .cat b { font-weight:bold; margin:0 10px 0 0;}

#c_single article .container dl dd .info { padding:20px 0 7px 12px; border-bottom:1px solid #666666; margin: 0 0 15px;}
#c_single article .container dl dd .info span { display:block; margin:0 0 10px;}
#c_single article .container dl dd .info span b { width:84px; font-weight:bold; display:inline-block; }
#c_single article .container dl dd p { line-height:1.6em;}

/* お問合せ
----------------------------------------------- */
#contact article a:link ,
#contact article a:visited { color:blue; text-decoration:none;}
#contact article a:hover,
#contact article a:active { color: blue; text-decoration:underline; transition-property: all; transition: 0.2s linear; }

/* トップページへ戻る
-----------------------------------------------------------------------------*/
.pagetop {
display: none;
position: fixed;
bottom: 10px;
right: 100px;
}
.pagetop a {
 display: block;
 width: 70px;
 height: 70px;
 text-align: center;
 color: #fff;
}


/* 道順
-----------------------------------------------------------------------------*/
#michi{ width:70px; height:300px; position:fixed; top:50%; right:0; margin:-150px 0 0; border:1px solid #fff;}
#michi a:hover,
#michi a:active { filter: alpha(opacity=90); opacity:0.9; transition-property: all; transition: 0.3s linear;}

/* たたみ
-----------------------------------------------------------------------------*/
#tatami #f_ttl {
    width: 100%;
    height: 460px;
    background-image: url(img/bg.png), url(img/tatami.jpg);
    background-position: center center ,center center;
    background-repeat: repeat,no-repeat;
    background-size: auto,cover;
}
#tatami #f_ttl p {
    padding: 80px 0 0;
    text-align: center;
    color: #fff;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight: 800;
    text-shadow: 1px 1px 3px #000;
    line-height: 2em;
    font-size: 16px;
}
.qrcode{
position: fixed;
bottom:0;
right: 0;
width: 80px;
height: 80px;
}


/* ↓pcここまで */
}
/* ↑pcここまで */

/* for mobile */
@media only screen and (max-width:736px){
.sp_none{
	display:none;
	}
img{
	max-width:100%;
	height:auto;
	}
.container{
	width:90%;
	margin:0px auto;
}

/*フーバー画像緑色*/
.green {
	width:			300px;
	height:			250px;
	position:		relative;
	overflow:hidden;
	display:block;
	margin:0 0 10px;	
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
}
#case .green{
	position:		relative;
	overflow:hidden;
	display:block;
	margin:0 0 10px;	
	border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;
	}
#top .green {
	width:			300px;
	height:			250px;
	position:		relative;
	overflow:hidden;
	display:block;
	margin:0 0 0;	
	-webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.green .caption {
	width:300px;
	height:250px;
	line-height:36px;
	font-size:		16px;
	color:			#fff;
	text-align: left;
	margin:130px 0 0 0px;
	padding-left:		0px;
}
.green .caption span{ width:160px; position:relative; display:block;}
.green .caption span:after{ position: absolute; content: url(img/icon.png); top:-10px; right:0; -webkit-transition:	all 0.3s ease; transition: all 0.3s ease;}
.green .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(50,150,0,0.9);
	-webkit-transition:	all 0.3s ease;
	transition:		all 0.3s ease;

}
.green:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left:		80px;	/* 右にずらす */
}

/* slider
----------------------------------------------- */
#keyimg{
	width:100%;
	overflow:hidden;
	clear:both;
	background: #73bd1e;
	padding:30px 0;
}
#keyimg .bx-slider{ }
#keyimg .bx-viewport {
  background: transparent !important;
  border: 0;
  overflow: visible !important; //両サイドが表示される
  height: 450px !important;
  //z-index: 1; //スマホやタブレットでスワイプできないときに指定
}
.bx-wrapper{ position:relative; z-index:1;}
.bx-wrapper .bx-prev {
	position:absolute;
	width:40px;
	height:40px;
	top:50%;
	left:10px !important;
	background:url(img/bt01.png) no-repeat;
	font-size:0;
	margin-top:-20px;
}
.bx-wrapper .bx-next {
	position:absolute;
	width:40px;
	height:40px;
	top:50%;
	right:10px !important;
	background: url(img/bt02.png) no-repeat;
	font-size:0;
	margin-top:-20px;
}
/* header
----------------------------------------------- */
#header{
	height:50px;
	overflow:hidden;
	margin:0 auto;
	padding:10px 0 10px 10px;
	position:relative;
}
#header .logo {
	width: auto;
	height:50px;
	float:left;
	margin-right:150px;
}
#header .tel { display:none;}
#header .mail { display:none;}

/* header nav
----------------------------------------------- */
ul#nav {
	display:none;
}
ul#nav li.bt01,
ul#nav li.bt02,
ul#nav li.bt03,
ul#nav li.bt04,
ul#nav li.bt05,
ul#nav li.bt06{
	width:137px; float:left;
}
ul#nav li.bt07{
	width:138px; float:left;
}

/* #hero
----------------------------------------------- */
#hero { width:100%; height:300px; line-height:300px; text-align:center; font-size:40px; background-image:url(img/bg.png),url(img/about00.jpg); background-position:left top,center center; background-size:auto,cover; background-repeat:repeat,no-repeat;}
#hero h2{ font-family: 'Noto Sans Japanese', sans-serif; font-weight:800; color:#FFFFFF; line-height:300px;}

/* top greeting
----------------------------------------------- */
.top .container {
	width:90%;
	margin: 0 auto;
	padding:30px 0;
}
.top .container .ttl img {
	max-width:100%;
	height:auto;
	margin: 0 auto;
	margin-bottom:20px;
	display:block;
}
.top .container .tx {
	margin: 0 auto 30px;
	text-align:left;
	line-height: 1.8em;
}
.top .container .btn {
	clear:both;
	width:260px;
	margin:0 auto;
}

/* top2 products
----------------------------------------------- */
.top2 {
	background: #dafed6 url(img/common/bg_g.png) center top no-repeat;
	padding: 60px 0 30px;
}
.top2 .ttl {
	width:332px;
	margin: 0 auto 30px;
	height: 70px;
}
.top2 .container {
	width:90%;
	margin:0 auto;
}

.top2 .container li{
position:relative;
width:100%;
padding-top:75%;
display:block;
padding:0;
margin:0 auto 30px;
border-radius: 10px;		/* CSS3草案 */
-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
-moz-border-radius: 10px;	/* Firefox用 */
text-align:center;
}
.top2 .container li:after{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
	}
#top .top2 .container li p,
#top .top2 .container li p img,
#top .top2 .container li a img{
	width:100%;
	height:auto;
	}

.top2 .container .pdbox .name,
.top2 .container .pdbox .btn {
	text-align:center;
	clear:both;
	margin:0;
}

.top2 .container .pdbox .photo {
	margin:0;
border-top:#fff100 2px solid;
border-bottom:#fff100 2px solid;}

/* top3 service
----------------------------------------------- */
.top3 {
	width:100%;
	background-image: url(img/bg.png), url(img/common/bg_img.png);
	background-repeat: repeat,no-repeat;
	background-position: left top,center center;
	background-size: auto,cover;
	padding: 60px 0;
}

#top .top3 .ttl{
	width:90%;
	margin:0 auto 30px;
	}
.top3 .container  {
	width:90%;
	margin:0 auto;
}
.top3 .container div {

}

.top3 .container .svbox01 {
position:relative;
width:100%;
padding-top:83.33%;
text-align: center;
color: #FFF;
box-sizing: border-box;
background-image:url(img/top03_01.png);
background-size:cover;
padding: 60% 20px 20px;
border: 1px solid #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
margin-bottom:20px;
}
.top3 .container .svbox01:after{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	}
.top3 .container .svbox02 {
position:relative;
width:100%;
padding-top:83.33%;
text-align: center;
color: #FFF;
box-sizing: border-box;
background-image:url(img/top03_02.png);
background-size:cover;
padding: 60% 20px 20px;
border: 1px solid #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
margin-bottom:20px;
}
.top3 .container .svbox02:after{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	}
.top3 .container .svbox03 {
position:relative;
width:100%;
padding-top:83.33%;
text-align: center;
color: #FFF;
box-sizing: border-box;
background-image:url(img/top03_03.png);
background-size:cover;
padding: 60% 20px 20px;
border: 1px solid #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
margin-bottom:20px;
}
.top3 .container .svbox03:after{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	}
.top3 .container .svbox04 {
position:relative;
width:100%;
padding-top:83.33%;
text-align: center;
color: #FFF;
box-sizing: border-box;
background-image:url(img/top03_04.png);
background-size:cover;
padding: 60% 20px 20px;
border: 1px solid #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
margin-bottom:20px;
}
.top3 .container .svbox04:after{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	}
.top3 .container .svbox05 {
position:relative;
width:100%;
padding-top:83.33%;
text-align: center;
color: #FFF;
box-sizing: border-box;
background-image:url(img/top03_05.png);
background-size:cover;
padding: 60% 20px 20px;
border: 1px solid #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
margin-bottom:20px;
}
.top3 .container .svbox05:after{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	}

.top3 .container .svbox .no {
	float:left;
	text-align:left;
	clear:both;
	margin:5px 0 0 20px;
}
.top3 .container .svbox .tx {
	text-align:center;
	font-size:18px;
	color:#FFFFFF;
	margin:30px 0 0 0;
}


/* top4 seko
----------------------------------------------- */
.top4 {
	width:100%;
	background: #dafed6;
	padding: 60px 0 30px;
}
.top4 .ttl {
	width:90%;
	height:auto;
	margin: 0 auto 30px;
}
.top4 .container {
	width:90%;
	margin: 0 auto;
}

.top4 .container .skbox {
position:relative;
width:100%;
padding-top:100.1%;
	display:block;
	padding:0;
	margin-bottom:30px;
}
.top4 .container .skbox p{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	overflow:hidden;
}
#top .top4 .container .skbox .green{
position:relative;
width:100%;
padding-top:83.33%;
height:auto;
	}
#top .top4 .container .skbox .green img{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
	-webkit-border-radius:6px 6px 0 0 ;
    border-radius:6px 6px 0 0 ;
}
.top4 .container .skbox .tx {
	height:30px;
	padding:10px;
	text-align:left;
	color:#FFFFFF;
	-webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
	background:url(img/common/striped01_bg.png);
	font-size:14px;
	border-top:3px solid #FF0;
	font-weight:bold;
}


/* top5 contact
----------------------------------------------- */
.top5 {
	display:none;
}
/* top6 map
----------------------------------------------- */
.top6 {
	width:100%;
	height:304px;
	border-bottom: 30px solid #329600;
	border-top: 30px solid #329600;
}
.top6 .container {
	width:100%;
	height: 300px;
	border-top:2px #fff100 solid;
	border-bottom:2px #fff100 solid;
}

/* footer
----------------------------------------------- */
#footer {
	padding:20px 0;
	background: #73bd1e;
	line-height: 1.8em;
	color:#FFFFFF;
	margin-bottom: 55px;
	}
#footer ul#flexBox,
#footer ul#flexBox2,
#footer .container  {
	width:90%;
	margin:0 auto;
	}
#footer ul#flexBox{
	border-top:1px #FFFFFF dotted;
	margin-bottom:20px;
  }

#footer ul#flexBox li a{
	position:relative;
	display:block;
	border-bottom:1px #FFFFFF dotted;
	padding:15px 20px ;
	} 
#footer ul#flexBox li a:after{
	font-family: FontAwesome;
	content: '\f054';
	position:absolute;
	right:20px;
	}
#footer #flexBox2 a {
	display:block;
	}
#footer #flexBox2 a img{
	width:100%;
	height:auto;
	margin:0 0 10px;
}


	
/* sub_header
----------------------------------------------- */
#sub_header{
	height:286px;
	overflow:hidden;
	clear:both;
	text-align: center;
	width: 100%;
	border-bottom:#fff100 2px solid;
}
.tatami_h{
	width: 100%;
	background:url(img/tatami_header.png) top center no-repeat;}

/* sub_footer
----------------------------------------------- */
#sub_footer{
	height:460px;
	overflow:hidden;
	clear:both;
	text-align: center;
	width: 100%;
}
.tatami_f{
	width: 100%;
	background-image:url(img/message.png);
	background-repeat:no-repeat;
	background-size:cover;
	}	
	
/*bread
----------------------------------------------- */
#bread {
	width:100%;
	padding:20px 0 17px;
	background:#329600;
	font-size:14px;
	color:#FFFFFF;
	overflow:hidden;
	border-top:#fff100 2px solid;
	}
#bread ol { overflow:hidden;}
#bread ol li {
	list-style:none;
	width:auto;
	padding-right:15px;
	float:left;
	position:relative;
	}
#bread ol li:first-child{ padding:0 15px 0 25px;}
#bread ol li:first-child:before {
	font-family: FontAwesome;
	content: '\f015';
	font-size:140%;
	margin-right:5px;
	position:absolute;
	top:0px;
	left:0;
	}
#bread ol li:after {
	content:'　\f105';
	font-family: FontAwesome;
	}
#bread ol li:last-child:after {
	content: ' ';}
	
/*tatami
----------------------------------------------- */
.tatami  {
	width:100%;
	height: auto;
	padding: 60px 0 0;

}
.tatami_ttl {
	margin: 0 auto 30px;
	
	}
.tatami01 {
	width:100%;
	padding-top:85%;
	margin:0 auto 20px;
	background-image:url(img/tokucho01_bg.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	}
.tatami02 {
	width:100%;
	padding-top:85%;
	margin:0 auto 20px;
	background-image:url(img/tokucho02_bg.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	}
.tatami03 {
	width:100%;
	padding-top:85%;
	margin:0 auto 20px;
	background-image:url(img/tokucho03_bg.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	}
.tatami04 {
	width:100%;
	padding-top:85%;
	margin:0 auto 20px;
	background-image:url(img/tokucho04_bg.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100% auto;
	}
	

/* お客様の感想
----------------------------------------------- */
#review article h3{
	width:90%;
	margin:0 auto;
	}
#review article h3 img {
    display: block;
    margin: 40px auto;
}
#review article .container .wrap{ margin:0 auto 50px; background:#DAFED6; padding:30px; box-sizing:border-box; text-align:center;}
#review article .container .wrap h4{ margin:0 0 10px;}
#review article .container .wrap img{ width:740px; height:auto;}

/* 会社概要
----------------------------------------------- */
#about article{ padding:90px 0 0;}
#about article h3 img { display:block; margin:90px auto 90px;}
#about article .container .wrap{ margin:0 auto 50px; background:#DAFED6; padding:30px; box-sizing:border-box; text-align:center;}
#about article .container .wrap h4{ margin:0 0 10px;}
#about article .container .wrap img{ width:100%; height:auto;}
#about article .container .wrap table{ background-color:#fff; font-size:120%;}
#about article .container .wrap table tr th{ padding:20px 0; background-color:#329600; color:#fff; display: block;}
#about article .container .wrap table tr td{ padding:20px 0; line-height:1.2em; display: block;}

/* よくある質問
----------------------------------------------- */
#question article{ overflow:hidden; padding:90px 0 0;}
#question article h3 img { display:block; margin:90px auto 90px;}
#question article .container .wrap{ margin:0 auto 50px; background:#DAFED6; padding:30px; box-sizing:border-box; text-align:center;}
#question article .container .wrap dl:last-child{ margin:0 auto 0;}
#question article .container .wrap h4{ margin:0 0 10px;}
#question article .container .wrap dl{ display:block; background-color:#fff; margin:0 0 40px;}
#question article .container .wrap dl dt{ box-sizing:border-box; text-align:left; padding:20px 20px 20px 60px; position:relative; border-bottom:1px dashed #9BFD91; font-weight:bold;}
#question article .container .wrap dl dt:before{ content:'Q'; font-size:150%; color:#CC0000; top:20px; left:30px; position:absolute;}
#question article .container .wrap dl dd{ box-sizing:border-box; text-align:left; padding:20px 20px 20px 60px; position:relative; border-bottom:1px solid #9BFD91; line-height:1.5em;}
#question article .container .wrap dl dd:before{ content:'A'; font-size:150%; color: #009; top:20px; left:30px; position:absolute; font-weight:bold;}

/* ご注文の流れ
----------------------------------------------- */
#flow h3 img { display:block; margin:90px auto 90px;}
#flow article{ overflow:hidden;}
#flow article .container .wrap{ overflow:hidden; display:block;}
#flow article .container .wrap:last-child{ background-image: none; padding:30px 0 0; }
#flow article .container .wrap dl{ overflow:hidden; margin:0 auto 60px; padding:0 0 80px; background-image:url(img/flow_00.png); background-repeat:no-repeat; background-position:bottom center;}


#flow #f_ttl{ width:100%; background-image:url(img/bg.png), url(img/flow_10.jpg); background-position:center center ,center center; background-repeat: repeat,no-repeat; background-size: auto,cover;}
#flow #f_ttl p{ padding: 40px 5%; text-align:center; color:#fff; font-family: 'Noto Sans Japanese', sans-serif; font-weight:800;text-shadow: 1px 1px 3px #000; line-height: 2em;  font-size: 16px;}

/* お店までの道順
----------------------------------------------- */
#shop h3{ width:90%; margin:0 auto;}
#shop h3 img { display:block; margin:90px auto 40px;}
#shop article{ overflow:hidden;}
#shop article .bt00{ margin:0 auto 50px; overflow:hidden;}
#shop article .bt00 .bt01{ width:90%; margin:0 auto 20px;}
#shop article .bt00 .bt02{ width:90%; margin:0 auto 20px;}
#shop article .bt00 a{ display:block;}
#shop article .bt00 .bt01 a img,
#shop article .bt00 .bt02 a img{ width:100%; height:auto;}
#shop article .container .wrap{ margin:0 auto 40px; padding:0 0 90px; background-image: url(img/flow_00.png); background-position:center bottom; background-repeat:no-repeat; overflow:hidden; display:block;}
#shop article .container .wrap img{ width:100%; height:auto;}
#shop article .container .wrap:last-child{ background-image: none;}

#shop #f_ttl{ width:100%; height:300px; background-image:url(img/bg.png), url(img/shop_09.jpg); background-position:center center ,center center; background-repeat: repeat,no-repeat; background-size: auto,cover; }
#shop #f_ttl p{ font-size:16px; padding:100px 0 0; text-align:center; color:#fff; font-family: 'Noto Sans Japanese', sans-serif; font-weight:800;text-shadow: 1px 1px 3px #000; line-height:2em;  }

/* 施工事例
----------------------------------------------- */
#case article{ margin:90px auto 20px; }
#case article .container{
width:90%;
margin:0 atuo;
}
#case article .container .wrap { width:100%; margin:0 0 30px;}
#case article .container .wrap p { display:block; line-height:1.3em; margin:0 0 10px;}
#case article .container .wrap .green{

	}
#case article .container .wrap .green img{
	width:100% !important;
	height:auto;
}
#case article .container .wrap p date { color:#F48413; padding:0 10px 0 0; font-size:13px; font-weight:bold; }
#case article .container .wrap p span { padding:0 0 0 10px; border-left:1px solid #333; font-size:13px; }
#case article .container .wrap p a:link ,
#case article .container .wrap p a:visited { color: #333; text-decoration:none;}
#case article .container .wrap p a:hover,
#case article .container .wrap p a:active { color: #000; text-decoration:underline; transition-property: all; transition: 0.2s linear; }

/* 料金表
----------------------------------------------- */
#price article{ padding:90px 5% 0;  overflow:auto;}
#price article .container{ width: auto; overflow:auto;}
#price article .container dl { margin:0 0 30px; }
#price article .container dl dt { display:none; }
#price article .container dl dd {  }
#price article .container dl dd table{ background-color:#FFFBC1; border-collapse:collapse}
#price article .container dl dd table tr:first-child{ border-bottom: none;}
#price article .container dl dd table tr{ border-bottom:1px dashed #333;}
#price article .container dl dd table tr #ttl{ font-family: 'Noto Sans Japanese', sans-serif; height:70px; text-align:center; font-size:30px; color:#FFFFFF; line-height:70px; background-image:url(img/price00.jpg); padding:0;}
#price article .container dl dd table tr .ttl01 { font-size:18px; font-weight:bolder; padding:10px 0 10px 20px; }
#price article .container dl dd table tr .ttl01 span{ margin:0 20px 0 0;}
#price article .container dl dd table tr .price { font-size:18px; font-weight:bold; text-align:center; }
#price article .container dl dd table tr td{ padding:16px 16px 12px;}
#price article .container dl dd table tr.last td{ text-align:center;}
#price article .container dl dd table tr:last-child{ border-bottom:none;}
#price article .container dl dd table tr .left_b { border-left:1px dashed #333;}
#price article .container #p04 dd table tr td ,
#price article .container #p05 dd table tr td {
    padding: 23px 16px 19px;
}
#price article .container #p04 dd table tr #ttl,
#price article .container #p05 dd table tr #ttl{ font-family: 'Noto Sans Japanese', sans-serif; height:70px; text-align:center; font-size:30px; color:#FFFFFF; line-height:70px; background-image:url(img/price00.jpg); padding:0;}

/* 施工実績　シングル
----------------------------------------------- */
#c_single article .container{ }
#c_single article .container dl { overflow:hidden; margin:50px auto 100px; border-bottom:1px solid #000;}
#c_single article .container dl dt { display:block; margin:0 0 20px; padding:0;}
#c_single article .container dl dt img{ max-width:100%; height:auto; margin:0 0 30px;}
#c_single article .container dl dd { color:#3F3F3F;}

#c_single article .container dl dd .cat { padding:20px 0 17px 12px; border-top:1px solid #666666; border-bottom:1px solid #666666;}
#c_single article .container dl dd .cat b { font-weight:bold; margin:0 10px 0 0;}

#c_single article .container dl dd .info { padding:20px 0 7px 12px; border-bottom:1px solid #666666; margin: 0 0 15px;}
#c_single article .container dl dd .info span { display:block; margin:0 0 10px;}
#c_single article .container dl dd .info span b { width:84px; font-weight:bold; display:inline-block; }
#c_single article .container dl dd p { line-height:1.6em;}

/* お問合せ
----------------------------------------------- */
#contact article a:link ,
#contact article a:visited { color:blue; text-decoration:none;}
#contact article a:hover,
#contact article a:active { color: blue; text-decoration:underline; transition-property: all; transition: 0.2s linear; }

/* トップページへ戻る
-----------------------------------------------------------------------------*/
.pagetop {
 display: none;
 position: fixed;
 bottom: 60px;
 left: 10px;
}
.pagetop a {
 display: block;
 width: 70px;
 height: 70px;
 text-align: center;
 color: #fff;
}


/* 道順
-----------------------------------------------------------------------------*/
#michi{ width:50px; position:fixed; bottom:150px; left:0; margin:-150px 0 0; border:1px solid #fff;}
#michi a:hover,
#michi a:active { filter: alpha(opacity=90); opacity:0.9; transition-property: all; transition: 0.3s linear;}

/* たたみ
-----------------------------------------------------------------------------*/
#tatami #f_ttl {
    width: 100%;
    background-image: url(img/bg.png), url(img/tatami.jpg);
    background-position: center center ,center center;
    background-repeat: repeat,no-repeat;
    background-size: auto,cover;
}
#tatami #f_ttl p {
    padding: 40px 5%;
    text-align: center;
    color: #fff;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight: 800;
    text-shadow: 1px 1px 3px #000;
    line-height: 2em;
    font-size: 16px;
}

/* フッター出現
----------------------------------------------- */
#foot-action { width:100%; position:fixed; display:none; bottom:0; left:0; overflow:hidden; background-color:rgba(0,0,0,0.9); font-size:11px; line-height:1.3em; filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9;}
#foot-action a{
	color:#FFFFFF;
	display:block;
}
#foot-action .btn01 {
    box-sizing: border-box;
    border-right: 1px solid #fff;
    width: 50%;
    float: left;
    text-align: center;
	 padding:5% 0 4% 10%;
	 position:relative;
}
#foot-action .btn01:before {
	font-family: FontAwesome;
	content: url(http://akiyoshi-tatami.jp/case/wp-content/themes/akiyoshi/img/fbt01.png);
	position:absolute;
	top:12%;
	left:13%;
	color:#FFFFFF;
	font-size:3em;
	}
#foot-action .btn02 {
    box-sizing: border-box;
    width: 50%;
    float: left;
    text-align: center;
	 padding:5% 0 4% 10%;
	 position:relative;
}
#foot-action .btn02:before {
	font-family: FontAwesome;
	content: url(http://akiyoshi-tatami.jp/case/wp-content/themes/akiyoshi/img/fbt02.png);
	position:absolute;
	top:35%;
	left:13%;
	color:#FFFFFF;
	font-size:3em;
	}

#price article .container dl dd table{

}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

div#sp_time {
    font-size: 1em;
    padding: 5px;
    line-height: 1.3;
    background-color: green;
    border-top: 2px yellow solid;
    border-bottom: 2px yellow solid;
    color: #fff;
}
.qrcode{
position: fixed;
bottom:70px;
right: 0;
width: 80px;
height: 80px;
}

/* ↓mobileここまで */
}
/* ↑mobileここまで */


/*コロナ用*/
.top0 {
    padding: 100px 0 0;
}
#top .top0 .container h2{
	font-size: 23px;
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 5px solid #F60;
    padding: 5px 0 5px 10px;
	}
#top .top0 .container .tx{
	line-height:1.8;
	font-size:18px;
	}
#price small{
font-size: 60%;
}