@charset "UTF-8";


.clearfix::after {
	content: "";
	display: table;
	clear: both;
	}

.br-pc {
	display: none;
}
.br-sp {
	display: block;
}

body{
	color: #FFFFFF;
	font-size: 13px;
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

p{}


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

.wrapper {
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 13px;
	background-color: #000000;	
	/*background: -webkit-linear-gradient(45deg, #7be7d7 1%, #7be7d7 40%, #7be7d7 40%, #86a4e3 100%);*/
	/*background: linear-gradient(45deg, #7be7d7 1%, #7be7d7 40%, #7be7d7 40%, #86a4e3 100%);*/
}

header{
	padding-top: 20px;
	padding-bottom: 20px;
}
header div.logo{
	width: 30%;
	margin-left: auto;
	margin-right: auto;
}

.contents {
	width: 100%;
	height: 100%;
	display: table;
}
.index-titleblock {
	margin-top: 20px;
	margin-bottom: 100px;
}


.index-titleblock h1.title{
	font-size: 50px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	letter-spacing: 0.07em;
}

.index-titleblock p{
	font-size: 14px;
}

.kokuchi{
	margin-top: 20px;
	margin-bottom: 100px;
	display: block;
}

.kokuchi p{
	font-size: 20px;
	text-align: center;
}

.main-container  {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 50px;
}
.main-container h2.catg-title {
	font-size: 40px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	text-align: center;
}
.main-container h2.insta-title {
	background-image: url(../images/insta.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 35px;
	text-align: center;
}
.main-container .insta-block {
	margin-bottom: 100px;
}
.main-container .insta-block a:link, .main-container .insta-block a:visited {
	color: #FFFFFF ;
	text-decoration: none;
}

/*insta index用*/
.main-container ul#instafeed {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 10px;
	padding-bottom: 10px;
	max-width: 980px;
	
}

.insta-block #instafeed li {
margin-bottom: 2%;	
flex-basis: 32%;
height: auto;
position: relative;
}

#instafeed li .image{
  position: relative;
  width: 100%;/*　トリミングしたい枠の幅（固定にしたい場合はサイズを入力）　*/
  padding-top: 100%;/*　トリミングしたい枠の高さ（固定にしたい場合はサイズを入力）　*/
  overflow: hidden;/*　画像が枠からはみ出た部分はトリミング（非表示）する　*/
  margin: 0 auto;
}
#instafeed li .image img{
/* 画像を上下左右に中央配置する（絶対指定） */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 画像の最大サイズは枠の1.5倍まで */
  max-width: 150%;
  max-height: 150%;
}

/*insta 各ページ用*/
#instafd{
margin-top: 50px;
margin-bottom: 50px;
}

#instafd h3{
font-size:24px;
}

.main-container ul#instafeed-photo {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
max-width: 980px;
}

.insta-block ul#instafeed-photo li {
margin-bottom: 2%;	
flex-basis: 16%;
height: auto;
position: relative;
}

ul#instafeed-photo li .image{
  position: relative;
  width: 100%;/*　トリミングしたい枠の幅（固定にしたい場合はサイズを入力）　*/
  padding-top: 100%;/*　トリミングしたい枠の高さ（固定にしたい場合はサイズを入力）　*/
  overflow: hidden;/*　画像が枠からはみ出た部分はトリミング（非表示）する　*/
  margin: 0 auto;
}
ul#instafeed-photo li .image img{
/* 画像を上下左右に中央配置する（絶対指定） */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 画像の最大サイズは枠の1.5倍まで */
  max-width: 150%;
  max-height: 150%;
}




/**/

.catg-btn ul li a {
	width: 100%;
	height: 176px;
	border: 2px solid #FFFFFF;
	display: table;
	margin-top: 20px;
}

.catg-btn ul li a:hover div {
	background-color: rgba(0,0,0,0.40);
}

.catg-btn ul li a:hover h3, .catg-btn ul li a:hover p{
	color: rgba(204,204,204,1.00);
}


.catg-btn ul li div {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	padding-left: 3em;
}

.catg-btn ul li h3 {
	font-size: 30px;
	color: rgba(255,255,255,1.00);
}
.catg-btn ul li p {
	font-size: 15px;
	color: rgba(255,255,255,1.00);
}
.catg-btn ul li.powder {
	background-image: url(../images/index-navi-powder.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
.catg-btn ul li.guncoart {
	background-image: url(../images/index-navi-guncoart.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
.catg-btn ul li.chizimi {
	background-image: url(../images/index-navi-chizimi.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
.catg-btn ul li.others {
	background-image: url(../images/index-navi-others.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}

footer{
	background-color: #FFFFFF;
	width: 100%;
	padding-top: 30px;
}
.footer {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	color: #000000;
	display: flex;
	flex-wrap: wrap;
}

.box2 {
	flex-basis: 50%;
}
.footer h3 {
	font-size: 30px;
}
.footer .about h3::before {
content: url(../images/about-icon.png);
display: inline-block;
    vertical-align: middle;
	margin-right: 10px;
}

.footer .contact h3::before {
content: url(../images/contact-icon.png);
display: inline-block;
    vertical-align: middle;
	margin-right: 10px;
}
.footer .payment h3::before {
content: url(../images/cash-icon.png);
display: inline-block;
    vertical-align: middle;
	margin-right: 10px;
}

.footer .map h3::before {
content: url(../images/map_icon.png);
display: inline-block;
    vertical-align: middle;
	margin-right: 10px;
}

.footer p  {
	font-size: 15px;
}

.footer a:link {
 color: rgba(0,0,0,1.00);
}

.footer a:hover {
	color: rgba(0,0,0,0.50);
}


.box2.contact p.contact {
	font-size: 13px;
}

.box2.contact p.telmail {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 18px;
}

.linebtn{
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #FFF;
	background-color: #00CC00;/*色*/
	border: 1px solid #06AD29;/*線色*/
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.mail-cation{
	width: 85%;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
}
.mail-cation p{
	font-size: 12px;
	text-align: left;
}
.mail-cation p:first-child, .mail-cation p:last-child{
	text-align: center;
}
.payment{
	margin-top: 40px;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}
.payment p {
	font-size: 13px;
	margin-bottom: 1em;
	text-align: left;
}

.map{
margin-top: 40px;
margin-left: auto;
	margin-right: auto;}
.map p{
	text-align: center;
}


/*ページタイトル*/
.title-contaner{
	width: 100%;
	height: 176px;
	display: table;
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(left, #000000 1%, #222222 25%, #393939 50%, #222222 75%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #000000 1%,#222222 25%,#393939 50%,#222222 75%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #000000 1%,#222222 25%,#393939 50%,#222222 75%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
	padding-top: 3px;
	padding-bottom: 3px;
	}

.title-contaner div {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	padding-left: 3em;
	background-color: rgba(0,0,0,1.00);
}
.title-contaner div h1 {
	font-size: 30px;
	color: rgba(255,255,255,1.00);
}
.title-contaner div p {
	font-size: 15px;
	color: rgba(255,255,255,1.00);
}

.title-contaner div.powder {
	background-image: url(../images/index-navi-powder.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}
.title-contaner div.gun {
	background-image: url("../images/page-title-guncoart.jpg");
	background-repeat: no-repeat;
	background-position: right center;
}

.title-contaner div.chizimi {
	background-image: url(../images/index-navi-chizimi.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}

.title-contaner div.others {
	background-image: url(../images/index-navi-others.jpg);
	background-repeat: no-repeat;
	background-position: right center;
}

.photo-block {
	margin-top: 30px;
}

/*施工写真*/
.photo-block ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
}

.photo-block ul li{
margin-bottom: 2%;	
flex-basis: 32%;
height: auto;
}

#txt-contaner {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}
#txt-contaner h2.catg-title {
	margin-bottom: 1.5em;
	line-height: 1.5em;
	font-size: 30px;
}

#txt-contaner h3{
	font-size: 22px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	margin-top: 0px;
	margin-bottom: 20px;
}

#txt-contaner p {
	text-align: left;
	line-height: 1.75em;
	font-size: 13px;
}
#txt-contaner section p.section  {
	text-align: center;
	margin-top: 3em;
	
}


.btn-block-color{
	width: 286px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

/*価格表*/

#price   {
	margin-top: 80px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#price table.table01 {
	width: 100%;
	border-right: 1px none #FFFFFF;
	border-collapse: collapse;
	border-top: 1px solid rgba(255,255,255,1.00);
	text-align: center;
	margin-top: 20px;
}
#price table.table01 thead th {
	background: #3EB1C6;
	color: #FFF;
	padding: 20px 15px;
	border-right: #FFF solid 1px;
	border-bottom: 1px none #FFF;
}
#price table.table01 thead th:last-child {
	border-right: 3px solid #3EB1C6;
}
#price table.table01 tbody th {
	color: #FFF;
	padding: 20px 15px;
	border-bottom: 1px solid #FFF;
	vertical-align: top;
	border-top: 1px none rgba(255,255,255,1.00);
}
#price table.table01 tbody tr:last-child th {
	border-bottom: 1px solid #FFFFFF;
}
#price table.table01 tbody td {
	border-left: 1px none #3EB1C6;
	border-bottom: 1px solid #FFFFFF;
	vertical-align: top;
	padding-top: 20px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 20px;
	border-top: 1px none rgba(255,255,255,1.00);
}
#price .cation {
	margin-top: 15px;
	font-size: 12px;
	line-height: 1.5em;
}
#price .cation2 {
	margin-top: 15px;
	font-size: 12px;
	line-height: 1.5em;
	display: block;
	border: 1px solid rgba(255,255,255,1.00);
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}



/* --------------------------------------------------- btn */
.btn__box {
	position: relative;
	width: 200px;
	height: 40px;
	margin: 100px auto 0;
	font-size: 13px;
	cursor: pointer;
	-webkit-perspective: 200px;
	perspective: 200px;
	
}

.btn__box a,
.btn__box:after {
	position: absolute;
	display: block;
	width: 198px;
	height: 38px;
	line-height: 38px;
	color: rgba(255,255,255,0);
	border: 1px solid rgba(255,255,255,0);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -20px;
	-ms-transform-origin: 50% 50% -20px;
	transform-origin: 50% 50% -20px;
}

.btn__box:after {
	top: 0;
	left: 0;
	width: 198px;
	height: 38px;
	line-height: 38px;
	color: #fff;
	border: 1px solid #fff;
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	content: "このデモのエントリーへ";
}

.btn__box:hover a {
	color: rgba(255,255,255,1);
	border: 1px solid rgba(255,255,255,1);
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
	z-index: 2;
}

.btn__box:hover:after {
	color: rgba(255,255,255,0);
	border: 1px solid rgba(255,255,255,0);
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	z-index: 1;
}

/* --------------------------------------------------- side menu */
.menu {
	position: fixed;
	display: table;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.95);
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility: hidden;
	opacity: 0;
	z-index: 999;
}

.side-open .menu {
	cursor: url(../images/cross.svg),auto;
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility: visible;
	opacity: 1;
}

.menu ul {
	display: table-cell;
	vertical-align: middle;
}

.menu li {
	width: 300px;
	margin: 0 auto;
	text-align: center;
	opacity: 0;
}

.side-open .menu li {
	opacity: 1;
}

.side-open .menu li:nth-child(1) {
	-webkit-transition: opacity 1s ease .5s;
	transition: opacity 1s ease .5s;
}

.side-open .menu li:nth-child(2) {
	-webkit-transition: opacity 1s ease .6s;
	transition: opacity 1s ease .6s;
}

.side-open .menu li:nth-child(3) {
	-webkit-transition: opacity 1s ease .7s;
	transition: opacity 1s ease .7s;
}

.side-open .menu li:nth-child(4) {
	-webkit-transition: opacity 1s ease .8s;
	transition: opacity 1s ease .8s;
}

.side-open .menu li:nth-child(5) {
	-webkit-transition: opacity 1s ease .9s;
	transition: opacity 1s ease .9s;
}

.side-open .menu li:nth-child(6) {
	-webkit-transition: opacity 1s ease 1s;
	transition: opacity 1s ease 1s;
}

.menu li a {
	display: block;
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	font-family: Georgia, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	color: rgba(33,33,33,1.00);
	-webkit-transition: all .5s;
	transition: all .5s;
}

.menu li a:hover {
	color: #999;
}

/* --------------------------------------------------- menu-btn */
.menu-btn {
	position: fixed;
	top: 20px;
	width: 60px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	z-index: 9999;
	left: 20px;
	border: 1px solid #FFFFFF;
	background-color: rgba(0,0,0,0.75);
}

.menu-btn span {
	color: #fff;
}

.menu-btn span:after {
	content: attr(data-txt-menu);
}

.side-open .menu-btn span:after {
	content: attr(data-txt-close);
}

.menu-btn:hover span:nth-child(1):after {
	-webkit-animation: anim .5s ease 0s forwards;
	animation: anim .5s ease 0s forwards;
}

.menu-btn:hover span:nth-child(2):after {
	-webkit-animation: anim .5s ease .1s forwards;
	animation: anim .5s ease .1s forwards;
}

.menu-btn:hover span:nth-child(3):after {
	-webkit-animation: anim .5s ease .2s forwards;
	animation: anim .5s ease .2s forwards;
}

.menu-btn:hover span:nth-child(4):after {
	-webkit-animation: anim .5s ease .3s forwards;
	animation: anim .5s ease .3s forwards;
}

.menu-btn:hover span:nth-child(5):after {
	-webkit-animation: anim .5s ease .4s forwards;
	animation: anim .5s ease .4s forwards;
}

.menu-btn:hover span:nth-child(6):after {
	-webkit-animation: anim .5s ease .5s forwards;
	animation: anim .5s ease .5s forwards;
}

@-webkit-keyframes anim {
	0% {-webkit-transform:translateY(0px);transform:translateY(0px);}
	50% {-webkit-transform:translateY(-5px);transform:translateY(-5px);}
	100% {-webkit-transform:translateY(0px);transform:translateY(0px);}
}

@keyframes anim {
	0% {-webkit-transform:translateY(0px);transform:translateY(0px);}
	50% {-webkit-transform:translateY(-5px);transform:translateY(-5px);}
	100% {-webkit-transform:translateY(0px);transform:translateY(0px);}
}


/*googlemap*/
.google-maps {
	position: relative;
	padding-bottom: 400px;
// これが縦横比
height: 0;
	overflow: hidden;
	margin-top: 40px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 400px !important;
}


.ny_message{
margin-top:20px;
margin-bottom:80px;
font-size:14px;
}



@media (min-width:421px){
.flex-contaner{
display: flex;
margin-left: -30px;
}

.flex-contaner div.col{
width: 100%;
margin-left: 30px;
}

.col-pc-50 {  width: 50%;  }
td .table-price-01 {
	text-align: left;
	padding-left: 1em;
}

.mail-cation p{
	text-align: center;
}
.payment p {
	text-align: center;
}

.ny_message{
font-size:16px;
}

}

@media (max-width:420px){
.br-pc {
	display: block;
}
.br-sp {
	display: none;
}

.sp-txt-hidden{
	display: none;
}

.index-titleblock h1.title{
	font-size: 30px;
}
.index-titleblock p{
	font-size: 13px;
}
.main-container  {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 30px;
}

/*insta　index*/
.main-container ul#instafeed {
	max-width: 100%;
}

.insta-block #instafeed li {
flex-basis: 49%;
}

/*insta　各ページ*/
.main-container ul#instafeed-photo {
	max-width: 100%;
}

.insta-block ul#instafeed-photo li {
flex-basis: 32%;
}




.main-container h2.catg-title {
	font-size: 24px;
}

.catg-btn {
	margin-left: 15px;
	margin-right: 15px;
}
.catg-btn ul li a {
	width: 100%;
	height: 130px;
}
.catg-btn ul li div {
	padding-left: 0.8em;
	padding-right: 0.8em;
	
}
.catg-btn ul li a h3 {
	font-size: 24px;
	text-align: center;
	text-shadow: 
    black 1px 1px 10px, black -1px 1px 10px,
    black 1px -1px 10px, black -1px -1px 10px;
	
}
.catg-btn ul li a p {
	font-size: 13px;
	text-shadow: black 1px 1px 10px, black -1px 1px 10px,
    black 1px -1px 10px, black -1px -1px 10px;
	text-align: center;
}


.footer {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	color: #000000;
	}
.box2 {
	flex-basis: 100%;
	margin-top: 50px;
}




/*ページタイトル*/
.title-contaner {
	height: 130px;
	background-position: center center;
}
.title-contaner div {
	padding-left: 0.8em;
	padding-right: 0.8em;	
}

.title-contaner div h1 {
	font-size: 24px;
	text-align: center;
	text-shadow: 
    black 1px 1px 10px, black -1px 1px 10px,
    black 1px -1px 10px, black -1px -1px 10px;
}

.title-contaner div p {
	font-size: 13px;
	text-shadow: 
    black 1px 1px 10px, black -1px 1px 10px,
    black 1px -1px 10px, black -1px -1px 10px;
	text-align: center;
}

/*事例*/
.photo-block ul li{
	flex-basis: 100%;
	margin-bottom: 2%;	
}

.insta-block #instafeed-photo li{
flex-basis:32%;
}



#txt-contaner h2.catg-title {
	font-size: 2em;
}
#txt-contaner , #price{
	margin-left: 15px;
	margin-right: 15px;
}
#txt-contaner {
	width: auto;
}


/*価格表*/

#price {
	margin-top: 80px;
	width: auto;
}

#price table.table01 thead {
	display:none;
}
#price table.table01 tbody th {
	display: block;
	background-color: rgba(59,59,59,1.00);
}
#price table.table01 tbody td {
	display:block;
}

.flex-contaner{
display: flex;
margin-left: 0px;
}

.flex-contaner div.col{
width: 100%;
margin-left: 0px;
}

.flex-contaner .row { flex-wrap: wrap; }



}