@charset "UTF-8";
/*--------------------------------
初期設定
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
html {font-size: 62.5%;} /* 1.6rem=16px */
body {width: 100%; color: #282828;font-family: 'Noto Serif JP', serif; line-height: 1; word-break: break-all; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt";  min-width: 320px; padding: 0px;font-weight: 500;position: relative;background: #F4F1EC}
a {color: #282828;transition: 1.0s;}
a:hover img {}
img {max-width: 100%;height: auto;}
p, ul li, ol li, dl dt, dl dd{margin:0; padding:0; font-size:1.4rem}
ul,h1,h2,h3,h4,h5,h6{ margin:0; padding:0}
ul li{ margin:0; padding:0; list-style-type:none}

.pb40{ padding-bottom:40px;}
.mb60{ margin-bottom:60px!important;}
.mb40{ margin-bottom:40px!important;}
.mb10{ margin-bottom:10px!important;}
.mb15{ margin-bottom:15px!important;}
.pb20{ padding-bottom:20px;}
.pb80{ padding-bottom:80px;}
.attention,.rd{ color:#C00}
.ib{ display:inline-block}
.f-l{ float:left}
.f-r{ float: right}
.clear{ clear:both}
.w100{ width:100%}
caption{ font-size:1.6rem; padding-bottom:10px; text-align:left}
.min{  font-family: "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; transform: rotate(.03deg);}
html{overflow-y:scroll;}
.bk{ color:#000!important}
.right{ text-align:right}
.bold{ font-weight:bold}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}

.clearfix:before
{
　　　　content: "";
	display: block;
	clear: both;
}

.clearfix
{
	display: block;
}

.pc-mode{display: none}

.font01,
.Quality li p,
.Works ul li,
.btn001,
.Product .p-list p,
.parenthesis,
.other-section p,
.text01,
.textarea01,
.company-data,
.contact-form th,
.contact-form td,
.contact h3,
.contact p,
.contact ul li,
.footer,
.btn002,
.BreadcrumbList li,
.pager .pagination li,
.category,
.works-list,
.page-List li,
.works-wrap01{ font-family: 'Noto Sans JP', sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI",  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight: 400}


/*--------------------------------
share
---------------------------------*/
img[src$=".svg"] {width: 100%; height: auto;}
a{ transition: opacity 0.5s ease-out;}
a:hover{ text-decoration:none;}
.center{ text-align:center}
.ggmap {position: relative; padding-bottom: 70.25%; padding-top: 30px; height: 0; overflow: hidden;margin-bottom: 60px;}
.ggmap iframe,
.ggmap object,
.ggmap embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* page-top */
#pagetop {position: fixed; bottom: 20px; right: 20px; margin:0;}
#pagetop a {width: 40px; height:40px;}
#pagetop a img{width: 50px;height:50px;}
#pagetop a:hover {}
.main section, main ul li {line-height:1.8}

/* パンくず */
.BreadcrumbList{    padding: 5px; box-sizing:border-box;
    margin: 0;}
.BreadcrumbList li{ display:inline; font-size:1.2rem; line-height:1.4}
.BreadcrumbList li:after {
    content: ">";
    padding: 0 5px;    color: #999;
}
.BreadcrumbList li:last-child:after {
    content: "";
}
.BreadcrumbList li a{ color:#8DB18B; text-decoration:none}
.BreadcrumbList li a:hover{ text-decoration:underline}

/* imgギャラリー */

.top-img{position: relative;}



/* テキストフェードイン */
.fadein-text {position: absolute;
    top: 50%;
	
    padding: 0 20px;
    box-sizing: border-box;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
/*以下フェードイン表示の指定*/
.fadein {
	opacity: 0;
	animation: fadein 6s ease forwards;
}
@keyframes fadein {
	100% {	opacity: 1;}
}

/*以下遅延の指定*/

.txt01 {animation-delay: .1s;margin-top: 60px;max-width: 460px;height: auto}
.txt02 {animation-delay: 2s;max-width: 480px;height: auto}

.fadein-text{width: 100%; max-width: 500px;}
.fadein-text img{ width: 100%; height: auto;}


/* btn */
.btn001{ text-align: center;}
.btn001 a{display: inline-block;padding: 15px 50px ; color: #000; background: #fff;text-decoration: none;font-size: 1.6rem;border-radius: 50px;box-shadow: 0px 1px 3px rgba(0,0,0,0.3);}
.btn002{ text-align: center;}
.btn002 a{display: inline-block;padding: 15px 50px ; color: #000; background: #fff;text-decoration: none;font-size: 1.6rem;border-radius: 50px;box-shadow: 0px 1px 3px rgba(0,0,0,0.3);}

a.anchor {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

/* particles-js */
.bg{
    width: 100%;
    position: relative;
    height: 100%;
}
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}




/* header */

header { position: fixed;z-index: 10; width: 100%; background: rgba(4,46,22,0.9);}
header a{color: #fff;text-decoration: none}

header h1{height: 60px; padding: 10px 0 10px 20px;box-sizing: border-box;font-weight: 400;}
header h1 a{display: inline-block}
header h1 span{display: block;margin-top: 5px; font-size: 1.4rem;font-weight: 400}


/* nav2 */

.Nav ul li a:after{color:#339966; font-size: 1.2rem;  margin-left: 10px;font-weight: normal;}

section{clear: both; padding: 60px 20px;text-align: center}
section h2{display: inline-block;padding-bottom: 40px; font-size: 2.6rem;line-height: 2; font-weight: 400}
section h2 span{display: block; color: #8DB18B;font-size: 1.4rem;border-top: 1px solid #000;}


/* 下層ページ */
.title-img{height: 200px; background: url("../img/bg02.jpg") center top no-repeat;background-size: cover}
.title-img h2{padding-top: 110px;text-align: center; color: #fff;font-size: 2.6rem;font-weight: 400}

/* 畳の品質と特徴 */
.Quality{background: url("../img/bg01.png") center top repeat-y; background-size:contain;}

.Quality li{margin-bottom: 40px;}
.Quality li img{margin-bottom: 15px;width: 100%;}
.Quality li h3{height: 64px; margin-bottom: 15px; padding: 10px; font-size: 1.6rem;line-height: 1.4;
	background: rgb(86,110,96);
background: linear-gradient(90deg, rgba(86,110,96,0.896796218487395) 0%, rgba(25,63,41,0.9) 100%);
	color: #fff;box-sizing: border-box;text-align: center;font-weight: 400}
.Quality li:last-child  h3{line-height: 64px;padding: 0}
.Quality li p{padding:0 5px; text-align: left;line-height: 1.8}



/* 事例 */
.Works{background: url("../img/bg02.jpg")center top no-repeat;background-size: cover}
.Works h2{color: #fff;}
.Works h2 span{border-color: #fff}
.Works ul li{margin-bottom: 60px; text-align: left;color: #fff}
.Works ul li h3{margin-bottom: 20px;font-weight: 400}
.Works ul li img{width:100%; margin-bottom: 15px}
.Works .w-data{margin-bottom: 15px}
.Works ul li p{margin-bottom: 15px; line-height: 1.6}
.Works ul li a{color: #fff;text-decoration: none}
.Works ul li a:hover{text-decoration: none}
.Works ul li .more{text-align: right}
.Works ul li .more span{display: inline-block;padding-bottom: 3px; border-bottom: 1px solid #fff}
.w-data{color: #8DB18B}



/* 商品紹介 */
.Product{padding: 60px 0; background: url("../img/bg.jpg")center top ;}
.Product h2{padding-bottom: 60px}
.Product-title-wrap{position: relative;z-index: 2;margin-bottom: 6%;}
.Product-title-wrap:before{
    content: "";
    position: absolute;
    top: 50px;
    right: 0;
    z-index: -1;
    width: 91%;
    height: 255px;
    background: #E9E6DD;}
.Product-bg{
    position: relative;
    width: 50%;}
.Product-bg:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;height: 255px;
    background:url("../img/bg03.jpg") center top no-repeat;
background-size: cover;}
.Product-title-wrap2{display: flex;}

.Product-title{padding: 0 30px;}
.Product-title h3{display: flex;justify-content: center;margin-bottom: 40px; font-size: 7.4rem;font-weight: 400}
.Product-title h3 span{display: block;margin-right: 10px;margin-top: 5px; font-size: 1.4rem;
    letter-spacing: .1em;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;}
.Product-title p{text-align: left;line-height: 1.8}

.Product-bg2{
    position: relative;
    width: 50%;}
.Product-bg2:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;height: 255px;
    background:url("../img/bg04.jpg") center top no-repeat;
background-size: cover;}
.Product-title-wrap3{display: flex;flex-direction: row-reverse}

.fusuma-section:before{ right: auto; left: 0;}
.fusuma-section {margin-bottom: 10%;}

.Product .p-list{display: flex; flex-wrap: wrap;justify-content: space-around;padding: 20px;box-sizing: border-box}
.Product .p-list li{margin-bottom: 20px;width: 43%;}
.Product .p-list img{margin-bottom: 15px;}
.Product .p-list h4{margin-bottom: 15px; font-size: 1.8rem;font-weight: 400}
.Product .p-list h4 span{font-size: 1rem;}
.Product .p-list p{ text-align: left;line-height: 1.8}
.parenthesis-wrap{padding: 0 20px;} 
.parenthesis {display: flex;line-height: 1.8;
  position: relative;
  max-width: 940px;
	margin: 0 auto;
  padding: 15px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before,
.parenthesis::after {
  position: absolute;
  top: 0;
  content: '';
  width: 15px;
  height: 100%;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.parenthesis::before {
  left: 0;
  border-left: 1px solid #555;
}
.parenthesis::after {
  right: 0;
  border-right: 1px solid #555;
}

.parenthesis h5{width: 80px;font-size: 1.2rem}
.parenthesis h5:after{content: " ： ";}
.parenthesis ul{width: calc(100% - 80px); text-align: left}
.parenthesis li {display: inline-block; font-size: 1.2rem;}
.parenthesis li:after{content: "、";}

.fusuma .p-list div {margin-top:15px }

.tatami{margin-bottom: 140px;}
.fusuma{margin-bottom: 60px;}


.other{ max-width: 1000px;margin: 0 auto;padding: 20px}
.other-section {display: flex;margin-bottom: 40px}
.other-section h3{margin-bottom: 20px; font-size: 4rem;font-weight: 400;text-align: left}
.other-section h3 span{display: block;margin-bottom: 10px; font-size: 1.4rem;}
.other-section p{line-height: 1.8; text-align: left}
.other-section .o-left{width: 60%; padding-right:20px;box-sizing: border-box }
.other-section .o-right{width: 40% }


/* contact01 */
.contact01{text-align: center;background: url("../img/contact_img.png") right 20px bottom no-repeat;background-size: 100px auto}
.text01{display: inline-block; margin-bottom: 0.2rem;  padding:15px 20px; box-shadow: 7px 7px 0 #fff; background:#000;
    color: #fff; font-weight: bold; font-size:1.6rem;line-height: 1.6}
.contact01 .tel{max-width: 360px;padding:10px 20px;}
.contact01 .mail{max-width: 200px; padding:10px 20px;}
.contact02{max-width: 820px;margin: 0 auto;}




/* プロセス */
.Process{background: #fff;}
.text02{margin-bottom: -10px; padding: 0;border: none;color: #000}
.Process div{max-width: 1035px;margin: 0 auto} 


/* 会社概要 */
.Company{background: url( "../img/bg05.jpg") right top no-repeat;background-size: 50% auto;}
.Company h3{margin-bottom: 40px; font-size: 2rem;font-weight: 400;line-height: 1.6;}
.textarea01{max-width: 880px;margin: 0 auto 40px;text-align: left;line-height: 2}
.company-data {max-width: 880px;margin: 0 auto 20px;}
.company-data table{width: 100%;margin-bottom: 20px}
.company-data table th,
.company-data table td{;padding: 12px 0; text-align: left;border-bottom: 1px solid #CECECE;font-size: 1.4rem}
.company-data table td{padding-left: 20px;}
.company-data table td span{display: inline-block;}
.Company .ggmap{border: 4px solid #fff;box-shadow: 0px 0px 0px 1px #E9E6DD; }





/* contact */
.contact{background:url("../img/bg06.jpg") right -280px top no-repeat;background-size: cover;color: #fff}
.contact h2 span{ border-top: 1px solid #fff;}
.contact-form{width: 100%;max-width: 600px;margin: 0 auto 20px;border-collapse: collapse;}

.contact-form th,.contact-form td{text-align: left;border: none;font-size: 16px;padding-bottom: 20px;box-sizing: border-box;height: auto;color: #fff;}
.contact-form th{position: relative;padding-left: 50px; padding-bottom: 0px;padding-top: 5px;font-weight: bold}
.contact-form th span{position: absolute;left: 0px; display: inline-block;padding: 4px 5px;font-size: 12px;color: #A20000; background: #fff;font-weight: normal}
.contact-form td p{font-size: 12px;padding: 5px 0}
.contact-form td{line-height: 1.6}
.contact-form input,
.contact-form textarea,
.contact-form select{position: relative;width: 100%; background: #fff;padding: 10px;border:1px solid #C7C7C7;box-sizing: border-box}
.select-wrap{position: relative}
.select-wrap:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 20px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    pointer-events: none;
    transform: translateY(-50%) rotate(
-135deg);
}

.contact .btn001 a{color: #729870;font-weight: bold}


.contact h3{margin: 100px 0 40px; font-size: 1.6rem}

/* privacypolicy */
.privacypolicy{max-width: 630px;margin: 0 auto;padding: 20px; height: 200px;overflow-y: scroll;line-height: 1.8;background: #fff;color: #000;text-align: left;box-sizing: border-box}
.privacypolicy p{padding-bottom: 20px; font-size: 1.4rem}
.privacypolicy ul li h4{color:#8DB18B;font-size: 1.4rem}
.privacypolicy ul ul{margin-top: -20px;margin-bottom: 40px;} 
.privacypolicy ul ul li{font-size: 1.4rem;font-weight: bold} 


.footer{padding: 50px 0; text-align: center;background: url("../img/bg07.jpg") center center repeat;background-size:cover}
.footer p{padding-bottom: 10px;font-size: 1.2rem}
.footer .company-name{font-weight:bold; font-size:2.4rem}
.footer img{width: 209px;height: auto;margin-bottom: 5px}
footer{clear: both;background: #042E16;text-align: center;padding: 20px 0;color: #fff;font-size: 1.4rem;font-weight: normal}


/* ページャー */


.pager .pagination {margin: 0;padding: 40px 0 0; 
  text-align: center;
}

.pager .pagination li {
  display: inline;
  margin: 0 2px;
  padding: 0;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  position: relative;
  border-radius: 10px;
}


.pager .pagination li a{
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display:table;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
  color: #fff;
  background: #61865F;
}





@media screen and (max-width: 600px){

		.contact-form th,.contact-form td{display: block;width: 100%}
	/* .contact-form tr:nth-child(3) th,
.contact-form tr:nth-child(4) th{padding-left: 0} */
.contact-form tr:nth-child(3) th{padding-left: 0}
	.contact-form th{padding-bottom: 10px}
	.pc-topimg{display: none!important}
}
@media screen and (min-width: 601px){
	.sp-topimg{display: none!important}
	.pc-topimg{display:block!important}
.contact01{background-size: 190px auto}
.Company h3{font-size: 2.4rem;}
.Company .ggmap {max-width: 900px;margin: 0 auto 80px;padding-bottom: 31.11%; }
	.contact-form th{min-width: 220px;vertical-align: top;padding-right: 20px}

	
}






@media screen and (min-width: 768px){
	a:hover{opacity: .7}

	header h1{line-height: 60px;padding: 0 0 0 40px	}
	header h1 span{display: inline-block;margin: 0 0 0 20px; font-size: 1.6rem;font-weight: 400}

	.fadein-text{left: 40px;	}
	
	section h2{padding-bottom: 60px; font-size: 3.4rem;line-height: 2; font-weight: 400}
section h2 span{ padding-top: 5px;font-size: 1.4rem;}
	
/* 下層ページ */
		.title-img{height: 300px;}
		.title-img h2{padding-top: 160px; font-size: 4rem	}

	/* パンくず */
.BreadcrumbList{   padding: 15px; box-sizing:border-box; margin: 0;}

	
	
	
/* 畳の品質と特徴 */
	.Quality {background-size: cover;}
	.Quality ul{display: flex;justify-content:space-around;max-width: 840px;margin: 0 auto}
	.Quality ul li{width: 48%;min-width: 300px;max-width: 340px;}
	.Quality li img {max-width: 340px; }
	
	
/* 施工事例 */
	.Works ul{display: flex;justify-content: space-around;max-width: 880px;margin: 0 auto}
	.Works ul li{max-width: 360px;margin: 0 auto 80px}
	.Works ul li img{max-width: 360px;height: auto}


/* 商品紹介 */
	.Product-title{padding: 0 50px;}
	.Product-title-wrap{}
	.Product-bg:before{background:url("../img/bg03.jpg") right top no-repeat;background-size: cover}
	.Product .p-list li{ width: 23%;max-width: 200px;}
.Product .p-list{max-width: 1000px; margin: 0 auto;justify-content: space-around;padding: 20px;}
	.Product-title p{line-height: 2}
	.other{display: flex;justify-content: space-around;margin-bottom: 60px }
	.other-section{width: 50%}
	.other-section .o-left{padding: 0 20px 0 40px;}
	.other-section .o-right{padding-right: 40px}
	
/* .contact01 */
	.contact01{max-width: 820px;margin: 0 auto;padding-right: 200px;background: url(../img/contact_img.png) right center no-repeat;background-size: 190px auto;box-sizing: border-box}
	.contact02{display: flex; align-items: center;}
	.contact01 .tel,
	.contact01 .mail{padding:10px 0 0 20px}
	
	/*　会社概要 */
	.company-data{display: flex;justify-content: space-between	}
	.company-right{padding-left: 20px;}
	.company-left{width: 47%}
	.company-data table{margin-bottom: 0}
.company-data {margin-bottom: 40px}

	
	
	
	/* .contact */
	.contact{clear: both}
	.contact-form td{}
	.c-left{width: 100%; padding: 50px 40px;background: #EBF1F7}
.c-right{width: 100%;background: url("../img/img03.jpg") center center no-repeat;
    background-size: cover;}
	.contact-form td p{padding:15px 0}
	.footer{background-size: contain}

}
@media screen and (max-width: 1023px) {
	.fusuma .p-list li:last-child h4,
	.fusuma .p-list li:first-child h4{letter-spacing: -0.05em;}
}
@media screen and (min-width: 1024px) {
	
				

	
a.anchor {
    display: block;
    padding-top: 140px;
    margin-top: -140px;
}
.pc-mode{display: block}
.sp-mode{display: none}
	

	a{transition: all .3s;}
	a:hover{opacity: .75}
	a[href*="tel:"] {pointer-events: none;cursor: default;}

	header h1{height: 86px;padding:0; line-height: 86px; font-size: 2.4rem;}
	.header-wrap{display: flex;justify-content: space-between;padding: 0 20px;}
	
	.Nav ul li a:after{display: block; margin-left:0; text-align: center; margin-top: 8px;}
	.Nav ul li a:hover{opacity: .7}
	
	section,.Product{padding: 100px 0}
	.Company{padding-bottom: 40px}

	/* contact */
	.contact-wrap{}
	.c-left{float:right;width: 50%; max-height: 827px; padding: 100px 40px	}
	.c-right{float:  left;width: 50%;height: 827px	}
	
.Company .ggmap {padding-bottom: 21.11%; }

}

@media screen and (min-width: 1200px){
			.fadein-text{left: 80px;	}

	.header-wrap{padding: 0 80px;}
	header h1,.hamburger-nav-list > li a{letter-spacing: 0.04em;}
	.Product-title-wrap{margin-bottom:100px}

}

@media screen and (min-width: 1260px){
	

}