@charset "UTF-8";
/* CSS Document */
.fadein{
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1700ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

/*変数指定*/
:root {
	--main-color: #4e6c4c;/*メインカラー*/
	--main-bk-color: #d9dfce;/*メインバックカラー*/
}

h2{
	color: var(--main-color);
	font-size: 2rem;
	line-height: 1.7em;
	margin-bottom: 3%;
	font-weight: bold;
}

h3{
	font-size: 1.7rem;
	line-height: 1.5em;
	margin-bottom: 5%;
	font-weight: bold;
}

h4{
	font-size: 1.5rem;
	line-height: 1.5em;
	margin-bottom: 3%;
	font-weight: bold;
	text-align: center;
}

#info_page_t h2 {
	text-align: center;
	margin-top: 13%;
	margin-bottom: 0;
}
#contact_page h3{margin-bottom: 1%;}
#iedukuri_page h3,
#kinoie_page h3,
#about_page h3 {
	font-size: 1.5rem;
	color: var(--main-color);
}
#company_page h3 {
	color: var(--main-color);
	text-align: center;
	margin-bottom: 2%;
}

/* header */
#keyword {
	width: 90%;
	margin: 0 auto 1%;
	text-align: center;
	font-size: 10px;
	line-height: 1.3em;
}
#header{
	background:#fff;
	position:fixed;
	z-index:999;
	width:100%;
	height:auto;
	box-shadow: 0px 7px 7px 0 rgba(100, 100, 100, 0.1);
}
#header_wrap {
	width: 90%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.logo{
	float:left;
	width:25%;
	margin: 0 9% 0 2%;
}

.tel{
	float:left;
	width:30%;
	margin:1% 0 0 0;
}
#hed_btn {
	float: right;
	width: 32%;
	margin-top: 1%;
}
#hed_btn li {
	width: 10%;
	margin-right: 2%;
	float: left;
}
#hed_btn li:last-child {
	width: 60%;
	margin-right: 0;
}

.gnav{text-align:center;}
.gnav ul {
	width: 90%;
	max-width: 1100px;
	margin: 1% auto;
}

.gnav ul li{
	width: calc(98.7%/5);
	display:inline;
	text-align:center;
	line-height:1.8em;
	font-size:1.1em;
	float: left;
	border-left:solid 1px #333;
}
.gnav ul li:last-child {border-right:solid 1px #333;}
.gnav a:hover{opacity:0.2;}


/* footer */
#copy {
	font-size: 10px;
	line-height: 1.2em;
	text-align: center;
    padding: 5px 0;
	letter-spacing: 0.2em;
	background: #333;
	color: #FFF;
	margin-top: 1%;
}
#copy a {
	color: #FFF;
	display: inline;
}
#footer_wrap {
	border-top: 1px solid #333;
	padding-top: 3%;
}
#top_fot #footer_wrap {border-top: none;}

#footer {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
#fot_logo{
	width: 95%;
    max-width: 600px;
    margin: 0 auto 3%;
}
#fot_menu{
	float: right;
	width: 55%;
}
#fot_menu ul {
	float: left;
	width: 33%;
	text-align: left;
	font-size: 0.9em;
	line-height: 1.8em;
}
#footer .left {
	width: 43%;
	text-align: left;
}
#fot_add {
	text-align: left;
    font-size: 1.2em;
}
#fot_tel {
    font-size: 2.2em;
    font-weight: bold;
    margin: 1% 0;
}
#fot_kyoka {
	font-size: 80%;
	line-height: 1.5em;
	margin-bottom: 3%;
}
#fot_btn li {
	width: 8%;
	margin-right: 2%;
	float: left;
}
#fot_btn li:last-child {
	width: 50%;
	margin-right: 0;
}

/*title*/
#t_txt {
	padding: 5% 0 3%;
	margin-bottom: 5%;
}
#works_page #t_txt {background: var(--main-bk-color) url(img/works/t.svg) no-repeat right center/30%;}
#info_page #t_txt {background: var(--main-bk-color) url(img/info/t.svg) no-repeat right center/30%;}
#contact_page #t_txt {background: var(--main-bk-color) url(img/mailform/contact.svg) no-repeat right center/40%;}
#reserve_page #t_txt {background: var(--main-bk-color) url(img/mailform/reserve.svg) no-repeat right center/45%;}
#privacy_page #t_txt {background: var(--main-bk-color) url(img/mailform/privacy.svg) no-repeat right center/45%;}
#iedukuri_page #t_txt {
	background: url(img/iedukuri/t.svg) no-repeat right center/50%;
	margin-bottom: 0;
}
#company_page #t_txt {
	background: url(img/company/t.svg) no-repeat right center/45%;
	margin-bottom: 0;
}
#about_page #t_txt {
	background: url(img/about/t.svg) no-repeat right center/45%;
	margin-bottom: 0;
}
#kinoie_page #t_txt {
	background: url(img/kinoie/t.svg) no-repeat right center/60%;
	margin-bottom: 0;
}

/*TOP*/
#hero_txt {
	text-align: center;
	margin-bottom: 5%;
	line-height: 2em;
	font-size: 1.2em;
}
#top_waza {
	background: url(img/top/waza4.png) no-repeat left 95%/85%,url(img/top/waza.svg) no-repeat left top /50%;
	background-color: var(--main-bk-color);
	padding: 5% 0 55%;
	margin: 0;
}
#top_waza .wrap .right {
	width: 60%;
	line-height: 2em;
}

.more {
	max-width: 500px;
	margin: 2% auto 5%;
}


#top_waza .more {
	width: 90%;
	margin: 2% auto 5%;
}

#top_works {
	background: url(img/top/works.svg) no-repeat top right/40%;
	padding: 5% 0 0;
	margin: 0;
}
.works_t {
	color: #333;
	font-size: 1.2rem;
	line-height: 1.7em;
	font-weight: normal;
}
.works_t h3 {color: var(--main-color);}
.post_a {margin-bottom: 5%;}
.post_a li {
	width: calc(96%/3);
	float: left;
	margin: 0 2% 0 0;
}
.post_a li:nth-child(3n) {margin: 0;}
#works_page .post_a li {margin-bottom: 5%;}

.bk-img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	/*object-fit: cover;*/
	margin-bottom: 5px;
	width: 100%;
	height: 220px;
}
.top_w_txt {
	font-size: 0.9em;
	line-height: 1.5em;
}

.mh_t {
	max-width: 400px;
	line-height: 0;
	margin-bottom: -1%;
}
#mh_b {
	background: #534744;
	border: 1px solid #FFF;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	color: #FFF;
	padding: 3% 5% 0;
}
#mh_b .left {width: 80%;}
#mh_b .right {width: 17%;}
#mh_b h2 {
	font-size: 2em;
	line-height: 1.6em;
	color: #ffffa4;
	width: 85%;
	float: left;
	margin-bottom: 1%;
}
#mh_b .left img {
	width: 13%;
	float: right;
}
.mh_t2 {
	border-bottom: 1px solid #FFF;
	margin-bottom: 1%;
	padding-bottom: 0;
}
#top_furniture {padding: 5% 0 2%;}
#top_furniture h2 {margin-bottom: 1%;}
.furniture_t {
	float: left;
	width: 16%;
}
#furniture_wrap {
	float: right;
	width: 84%;
}
#furniture_wrap .left {
	width: 60%;
	background: url(img/top/cat.jpg) no-repeat top right /35%;
}
#furniture_wrap .right {width: 39%;}

#top_ie {
	background: url(img/top/thoughts.jpg) no-repeat left 27% /40%,url(img/top/thoughts.svg) no-repeat right top /45%;
	background-color: var(--main-bk-color);
	padding: 5% 0 1%;
	margin: 0;
}
#top_ie .wrap .right {
	width: 60%;
	line-height: 2em;
}
#top_ie ul {
	margin-top: 5%;
	text-align: center;
}
#top_ie li {
	width: calc(85%/5);
	display: inline-block;
	margin: 3% 1% 1%;
	text-align: center;
	line-height: 1.5em;
	
}
#top_ie li img {
	width: 90%;
	margin: 0 auto 2%;
}


#top_info {padding: 5% 0 0;}
#top_info h2 {
	width: 60%;
	float: left;
}
#top_info .all {
	width: 30%;
	float: right;
	margin-top: 5%;
	text-align: center;
}
#top_info .wrap {
	padding: 0 0 5% 13%;
	background: url(img/top/news.svg) no-repeat left top/6%,url(img/top/news_cat.png) no-repeat 5% bottom/15%;
	max-width: 700px;
	margin: 0 auto;
}
.post_b li {
	margin: 0 auto 2%;
	padding-bottom: 1%;
	border-bottom: 2px dotted  var(--main-color);
}
.info_day {
	width: 20%;
	float: left;
}
.info_txt {
	width: 73%;
	float: left;
	font-size: 1.1em;
}
#top_banner {padding: 0 0 3%;}
#top_banner .wrap {max-width: 850px;}
#top_banner h3 {
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 5% 0;
}
.lh {padding: 0.7em 0;}
.banner3 {margin-bottom: 3%;}
.banner3 li {
	width: calc(96%/3);
	float: left;
	margin: 0 2% 0 0;
	text-align: center;
	background: var(--main-color);
}
.banner3 li a {color: #FFF;}
.banner3 li img {margin-top: 2%;}
.banner3 li:nth-child(3n) {
	margin: 0/*フルバージョンこれだけ残す*/;
	background: #d8cebb;
	padding: 2% 0 2% 2%; 
}

.banner2 li {
	width: 32%;
	float: right;
}
.banner2 li:nth-child(1) {
	width: 66%;
	float: left;
}
/*暗転banner*/
#top_gray_banner li {
	position: relative;
	background: url(img/top/banner_choice.jpg) no-repeat center center;
	background-size: cover;
	padding: 8% 0;
	width: calc(100%/3);
	border-right: 1px solid #FFF;
	float: left;
	margin: 0;
	font-size: 1.7em;
	line-height: 3em;
	 font-weight: bold;
	 text-align: center;
 }
 #top_gray_banner li:nth-child(2) {
	 background: url(img/top/banner_company.jpg) no-repeat center center;
	 line-height: 1.5em;
}
 #top_gray_banner li:nth-child(3) {
	 background: url(img/top/banner_contact.jpg) no-repeat center center;
	 border-right: none;
}
 #top_gray_banner li a {
	 position: relative;
	 z-index: 5;
	 color: #FFF;
 }
#top_gray_banner li::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: background-color 0.5s;
  background-color: rgba(0, 0, 0, 0.4);
}
#top_gray_banner a {cursor: pointer;}
#top_gray_banner li:hover::before {
	background-color: rgba(0, 0, 0, 0);
	opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
}

/*施工事例個別ページ*/
#fixedNavi {
	width: 35%;
	float: left;
}
.works_main {
	width: 60%;
	text-align: center;
	float: right;
}
#works_page h3 {
	font-size:1.2em;
	line-height: 1.7em;
}
.works_ph {margin-bottom:3%;}
.works_ph img  {margin-bottom:1%;}
.works_date {
	font-size:1.2em;
	line-height: 2em;
	margin-bottom: 5%;
}


#works_page_new {
  background: var(--main-bk-color) ;
  align-items: center;
  width: 100%;
	padding: 3% 0;
} 
#works_page_new h3 {
	text-align: center;
	font-size: 1.4em;
	margin-bottom: 2%;
}

/*家づくり　選ばれる理由*/
#iedukuri_page {line-height: 2em;}
#iedukuri_page .mainimg {
	max-width: 750px;
	margin-bottom: 5%;
}
#iedukuri_page .mainimg img {
	margin-bottom: 3%;
	max-width: 600px;
}
.riyu li {margin-bottom: 5%;}
.riyu li .img,
.riyu li .txt {width: 40%;}
.riyu li .txt h3 {
	border-bottom: 1px solid var(--main-color);
	padding-bottom: 2%;
}
.riyu li:nth-child(odd) .img,
.riyu li:nth-child(odd) .txt {float: left;}
.riyu li:nth-child(odd) .img {margin-right: 3%;}
.riyu li:nth-child(even) .img,
.riyu li:nth-child(even) .txt {float: right;}
.riyu li:nth-child(even) .img {margin-left: 3%;}

/*木の家*/
#kinoie_page {line-height: 2em;}
#kinoie_page .mainimg {margin-bottom: 7%;}
#kinoie_page .mainimg .left {width: 45%;}
#kinoie_page .mainimg .right {width: 50%;}
#kinoie_page .mainimg .right img {
	max-width: 300px;
	margin: 20% auto 5%;
}
#kinoie_page .sub {
	max-width: 730px;
	margin: 5% auto 7%;
}
#kinoie_page .sub img {margin-bottom: 1%;}
#kaori {margin-bottom: 7%;}
#kaori .txt,
#atataka .wrap1 .left {width: 45%;}
#atataka .wrap1 .left {float: left;}

#kaori .txt img,
#atataka .wrap1 .left img{width: 85%;}

#kaori .mt_top_minus {margin-top: -15%;}
#atataka .wrap1 .right {
	width: 40%;
	margin-right: 5%;
}
#atataka .wrap2 .left {
	width: 50%;
	margin-top: -15%;
}
#atataka .wrap2 .right {
	width: 45%;
	margin-top: 3%;
}
#atataka {margin-bottom: 5%;}

/*会社概要*/
#aisatsu {margin-bottom: 7%;}
#aisatsu p {
	font-size: 1.2em;
	line-height: 2em;
	margin-bottom: 3%;
}
#aisatsu p img {
	width: 35%;
	float: right;
	margin: 2% 0 5%;
}
#syacho {
	max-width: 800px;
	margin: 0 auto 5%;
	font-size: 1.2em;
	line-height: 2em;
}
#syacho .left {
	width: 60%;
	font-size: 1.1em;
}
#syacho .right {width: 37%;}
#gaiyo {
	background-color: var(--main-bk-color);
	padding: 5% 0;
}
#gaiyo th,
#gaiyo td {
	border-bottom: 1px solid var(--main-color);
	font-size: 1.2em;
	line-height: 1.6em;
}
#company_page .img {
	width: 90%;
	max-width: 1000px;
	margin: 5% auto;
}
#area {margin-bottom: 5%;}
#area .left {width: 47%;}
#area .right {width: 50%;}
#area .right span {font-size: 0.9em;}

/*高橋工務店について*/
#about .left {width: 65%;}
#about .right {
	width: 30%;
	margin-top: 25%;
}
#about .img {
	max-width: 800px;
	margin: 5% auto;
}
#about .left img {margin-bottom: 5%;}
#waza {
	background: url(img/about/b1.png) no-repeat left 7%/30%,url(img/top/waza.svg) no-repeat left top /50%;
	background-color: var(--main-bk-color);
	padding: 5% 0;
}
#waza .txt,
#waza .txt img {
	width: 50%;
	float: right;
}
#waza ul {margin-top: -15%;}
#waza li {margin-bottom: 5%;}
#waza li .img {
	width: 40%;
	float: left;
}
#waza li:nth-child(1) .img {
	width: 50%;
	margin-left: -10%;
}
#waza li:nth-child(3) .img {margin-top: -10%;}
#waza li:nth-child(5) .img {
	width: 60%;
	margin-top: -10%;
}
#waza li:nth-child(even) .img {float: right;}
#waza li .waza_txt {
	width: 45%;
	float: left;
	padding: 3%;
	background: #FFF;
	margin: 10% 0 0 -5%;
}
#waza li:nth-child(even) .waza_txt {
	float: right;
	margin: 10% -5% 0 0;
}
#waza li:nth-child(1) .waza_txt {margin: 0 0 0 -5%;}
#waza li:nth-child(2) .waza_txt {margin: 20% -5% 0 -5%;}
#waza li:nth-child(4) .waza_txt {margin: 10% 0 0 -15%;}
#waza li:nth-child(5) .waza_txt {margin: 10% 0 0 -25%;}

/*モデルハウス*/
#modelhouse_page {
	background: #534744;
	color: #FFF;
	text-align: center;
}
#modelhouse_page h3 {
	color: #ffffa3;
	margin-bottom: 2%;
}
#modelhouse_page .txt {
	font-size: 1.2em;
	line-height: 2em;
}

#modelhouse_date {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.5em;
}
#modelhouse_date .left {
	width: 55%;
	margin-bottom: 7%;
}
#modelhouse_date .right {width: 43%;}
#modelhouse_date .pc_line {
	width: 70%;
	margin: 2% auto 7%;
}
#modelhouse_date h4 {
	border-bottom: 1px solid #FFF;
	margin-bottom: 1%;
	padding-bottom: 1%;
	font-size: 1.5em;
}




/*===============================================
SP
===============================================*/
@media screen and (max-width: 640px){
h2 {
	font-size: 1.5rem;
	line-height: 1.5em;
}
#kinoie_page h2,
#about_page h2 {margin-top: 5%;}
	
h3,
#iedukuri_page h3,
#kinoie_page h3,
#about_page h3,
#company_page h3 {font-size: 1.2rem;}
h4 {font-size: 1.1rem;}
	
#info_page_t h2 {margin-top: 20%;}

#header{
	background:#fff;
	position:fixed;
	z-index:999;
	width:100%;
	height:auto;
}
#main {
	/*style内にも記述有り*/
	margin-top: 15%;
}
	
/* footer */
#copy {padding: 5px 0 15%;}
#footer .left {
	width: 100%;
	text-align: center !important;
}
#fot_add {
    font-size: 1em;
	text-align: center !important;
}
#fot_tel {
    font-size: 1.3em;
    text-align: center !important;
}
#fot_btn {
	width: 90%;
	margin: 0 0 3% 10%;
}
#fot_btn li {
	width: 10%;
	margin-right: 2%;
	margin-left: 10%; 
	float: left;
}
#fot_btn li:last-child {
	width: 62%;
	margin-right: 0;
	margin-left: 0;
}

/* 下menu */
div#footerArea {
	/*top: 0;*/
	margin: 0;
	width: 100%;
	position: fixed !important;
	background: rgba(255,255,255,0.8);
	/*position: absolute;*/
	bottom: 0;
	z-index: 999;
}
div#footerArea ul li {
	width: calc(100%/4);
	border-right: 1px solid #FFF;
	float: left;
	text-align: center;
}

#works_page #t_txt {background: var(--main-bk-color) url(img/works/t.svg) no-repeat right top/60%;}
#info_page #t_txt {background: var(--main-bk-color) url(img/info/t.svg) no-repeat right center/50%;}
#contact_page #t_txt {background: var(--main-bk-color) url(img/mailform/contact.svg) no-repeat right top/60%;}
#reserve_page #t_txt {background: var(--main-bk-color) url(img/mailform/reserve.svg) no-repeat right top/70%;}
#privacy_page #t_txt {background: var(--main-bk-color) url(img/mailform/privacy.svg) no-repeat right center/90%;}
#iedukuri_page #t_txt {background: url(img/iedukuri/t.svg) no-repeat right center/70%;}
#company_page #t_txt {background: url(img/company/t.svg) no-repeat right center/70%;}
#about_page #t_txt {background: url(img/about/t.svg) no-repeat right top/70%;}
#kinoie_page #t_txt {background: url(img/kinoie/t.svg) no-repeat right top/90%;}
	
/*TOP*/
#hero_txt {padding: 5% 0;}
#top_waza {
	background: url(img/top/waza3_sp.png) no-repeat left 95%/100%,url(img/top/waza.svg) no-repeat left top /70%;
	background-color: var(--main-bk-color);
	padding: 15% 0 90%;
	margin: 0;
}
#top_waza .wrap .right {
	width: 100%;
	float: none;
}

.more {
	width: 80%;
	margin: 2% auto 5%;
}

#top_works {
	background: url(img/top/works.svg) no-repeat top right/70%;
	padding: 10% 0 0;
}
.works_t {
	font-size: 1rem;
	line-height: 1.6em;
}
.post_a li,
.post_a li:nth-child(3n) {
	width: 80%;
	float: none;
	margin: 0 auto 7%;
}
.bk-img {height: 180px;}
.mh_t {margin-bottom: -2%;}
#mh_b .left {
	width: 100%;
	float: none;
}
#mh_b h2 {
	font-size: 1.1em;
	line-height: 1.6em;
	width: 83%;
}
#mh_b .left img {width: 17%;}

#top_furniture {padding: 10% 0 0;}
.furniture_t {
	float: left;
	width: 16%;
}
#furniture_wrap {
	float: right;
	width: 84%;
}
#furniture_wrap .left {
	width: 100%;
	background: url(img/top/cat.jpg) no-repeat top right /35%;
	margin-bottom: 7%;
}
#furniture_wrap .right {display: none;}

#top_ie {
	background: url(img/top/thoughts.svg) no-repeat right top /70%;
	background-color: var(--main-bk-color);
	padding: 10% 0 1%;
	margin: 0;
}
#top_ie .wrap .right {
	width: 100%;
	float: none;
}
.thoughts_sp_img {
	width: 60%;
	margin: 3% auto;
}

#top_ie li {
	width: calc(93%/3);
	margin: 3% 0;
	font-size: 0.8em;
}
#top_ie li img {
	width: 90%;
	margin: 0 auto 2%;
}

#top_info {padding: 7% 0 0;}
#top_info .wrap {
	padding-left: 20%;
	background: url(img/top/news.svg) no-repeat 5% top/12%,url(img/top/news_cat.png) no-repeat left bottom/20%;
	margin-left: 0;
}
.post_b li {
	width: 100%;
	float: none;
	margin: 0 0 3%;
}
.info_day,
.info_txt {
	font-size: 1em;
	width: 100%;
	float: none;
}
#top_banner h3 {
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 7% 0 3%;
	width: 40%;
	float: right;
	text-align: left;
}
.lh {padding: 0.7em 0;}
.banner3 {margin-bottom: 3%;}
.banner3 li/*,
.banner3 li:nth-child(3n)フルバージョン*/ {
	width: 100%;
	float: none;
	margin: 0 auto 3%;
	text-align: center;
}
.banner3 li img {
	margin-top: 0;
	margin-left: 3%;
	width: 50%;
	float: left;
}
.banner3 li:nth-child(3n) {
	padding: 0;
	margin-left: auto;
	margin-right: auto;
}
.banner3 li:nth-child(3) img {
	margin-left: 0;
	width: 100%;
}

.banner2 li,
.banner2 li:nth-child(1) {
	width: 90%;
	float: none;
	margin: 0 auto 3%;
}

/*暗転banner*/
#top_gray_banner li {
	padding: 8% 0;
	font-size: 1.1em;
	line-height: 3em;
 }
 #top_gray_banner li:nth-child(2) {line-height: 1.5em;}
 
 /*施工事例個別ページ*/
.thumb {
	width: 100%;
	margin: 0 auto 7%;
}
.works_main,
#fixedNavi  {
	width: 100%;
	float: none;
}
#works_page h3 {
	font-size:1.1em;
	line-height: 1.7em;
}
.works_ph {margin-bottom:5%;}
.works_date {
	font-size:1em;
	margin-bottom: 5%;
}
	
/*家づくり　選ばれる理由*/
#iedukuri_page .mainimg {
	max-width: 100%;
	margin-bottom: 7%;
}
.riyu li {margin-bottom: 7%;}
.riyu li .img,
.riyu li:nth-child(odd) .img,
.riyu li:nth-child(even) .img {
	width: 65%;
	margin: 0 auto 3%;
	float: none;
}
.riyu li .txt,
.riyu li:nth-child(odd) .txt,
.riyu li:nth-child(even) .txt {
	width: 100%;
	margin-top: 3%;
}

/*木の家*/
#kinoie_page .mainimg .right {
	width: 100%;
	float: none;
}
#kinoie_page .mainimg .right img {
	max-width: 100%;
	margin: 0 auto 5%;
}
#kinoie_page .sub {
	max-width: 100%;
	margin: 5% auto 7%;
}
#kaori .txt,
#atataka .wrap1 .left {
	width: 100%;
	float: none;
}

#kaori .txt img,
#atataka .wrap1 .left img{width: 75%;}

#kaori .mt_top_minus {margin-top: -5%;}
#atataka .wrap1 .right {
	width: 60%;
	margin: 3% auto 3% 35%;
	float: none;
}
#atataka .wrap2 .left {
	width: 80%;
	margin: 0 auto 5%;
}
#atataka .wrap2 .right {
	width: 100%;
	margin-top: 3%;
}

/*会社概要*/
#aisatsu p,
#syacho {
	font-size: 1em;
	line-height: 1.8em;
	margin-bottom: 3%;
}
#aisatsu p img {
	width: 60%;
	margin: 8% 0 7%;
}
#syacho {max-width: 100%;}
#syacho .left {
	width: 100%;
	float: none;
	font-size: 1em;
}
#syacho .right {
	width: 70%;
	margin: 3% auto 7%;
	float: none;
}
#gaiyo th,
#gaiyo td {
	border-bottom: 1px solid var(--main-color);
	width: 100%;
	font-size: 1em;
	line-height: 1.6em;
}
#gaiyo th {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
#area .left,
#area .right {
	width: 100%;
	float: none;
	margin-top: 3%;
}

/*高橋工務店について*/
#about .left {width: 100%;}
#about .right {display: none;}
#about .img {
	max-width: 800px;
	margin: 5% auto 7%;
}
#waza {
	background: url(img/about/b1.png) no-repeat left 10%/40%,url(img/top/waza.svg) no-repeat left top /70%;
	background-color: var(--main-bk-color);
	padding: 5% 0;
	margin-bottom: 0;
}
#waza h3 {text-align: right;}
#waza .txt {width: 90%;}
#waza .txt img {width: 50%;}
#waza ul {margin-top: -20%;}
#waza li {margin-bottom: 5%;}
#waza li .img {
	width: 70%;
	float: left;
}
#waza li:nth-child(1) .img {
	width: 80%;
	margin-left: -5%;
}
#waza li:nth-child(2) .img {
	width: 60%;
	margin-top: 3%;
}
#waza li:nth-child(3) .img {margin: 1% 0 0 -5%;}
#waza li:nth-child(5) .img {
	width: 100%;
	margin-top: 0;
}
#waza li:nth-child(even) .img {float: right;}
#waza li .waza_txt {
	width: 90%;
}
#waza li:nth-child(even) .waza_txt {float: left;}
#waza li:nth-child(1) .waza_txt {margin: 5% 0 0 10%;}
#waza li:nth-child(2) .waza_txt {margin: 0 0 5% 3%;}
#waza li:nth-child(3) .waza_txt {
	width: 75%;
	margin: -25% -10% 5% 25%;
}
#waza li:nth-child(4) .waza_txt {margin: 3% 0 5% 0;}
#waza li:nth-child(5) .waza_txt {margin: 5% 0 0 10%;}

/*モデルハウス*/
#modelhouse_page {text-align: left;}
#modelhouse_page h3 {margin-bottom: 4%;}
#modelhouse_page .txt,
#modelhouse_date {
	font-size: 1em;
	line-height: 1.8em;
}
#modelhouse_date .left,
#modelhouse_date .right {
	width: 90%;
	margin: 0 auto 3%;
	float: none;
}
#modelhouse_date h4 {font-size: 1.3em;}
#modelhouse_page ul {margin: 5% auto;}
#modelhouse_page ul li:nth-child(2) {
	margin: 5% 10% 0 0;
	width: 90%;
}
#modelhouse_page ul li:nth-child(3) {
	margin: 0 0 5% 20%;
	width: 80%;
}
#modelhouse_page ul li:nth-child(4) {
	margin: 0 auto 5%;
	width: 90%;
}
#modelhouse_page ul li:nth-child(5){
	margin: 0 20% 5% 0;
	width: 80%;
}
#modelhouse_page ul li:nth-child(6) {
	margin: 0 5% 5% 20%;
	width: 80%;
}
#modelhouse_page ul li:nth-child(7) {
	margin: 0 auto 5%;
	width: 90%;
}
#modelhouse_page ul li:nth-child(8) {
	margin: 0 0 5% 10%;
	width: 75%;
}
#modelhouse_page ul li:nth-child(9) {
	margin: 0 30% 7% 0;
	width: 70%;
}
.reserve_btn li {
	float: left;
	width: 48% !important;
	margin: 3% 1% !important;
}
	

}

/*===============================================
画面の横幅が641px以上769px以下　タブレット
===============================================*/
@media only screen and (min-width:641px) and (max-width:810px){
	
#info_page_t h2 {margin-top: 15%;}
#contact_page h3{margin-bottom: 1%;}

#iedukuri_page h3,
#kinoie_page h3,
#about_page h3 {font-size: 1.4rem;}

#footer {
	width: 95%;
	margin: 0 auto;
}
#fot_menu {font-size: 0.8em;}
#fot_add {font-size: 1em;}
#fot_tel {font-size: 1.8em;}
#fot_kyoka {font-size: 0.8em;}
#main {
	/*style内にも記述有り*/
	margin-top: 13%;
}
.gnav ul li{font-size:1em;}
	
/* 横ボタン */
#side-btn {
    position: fixed;
    top: 25%; 
    right: 0;
    z-index: 999;
	width: 5%;
}
#side-btn a {
    text-decoration: none;
    text-align: center;
    display: block;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}
#side-btn img {
	/*border-bottom: 1px solid #FFF;*/
	padding: 0;
	margin: 0;
}
#side-btn a:hover {
    text-decoration: none;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

/*top*/
#hero_txt {text-align: left;}
#hero_txt h2 {text-align: center;}
.bk-img {height: 160px;}
#mh_b h2 {
	font-size: 1.5em;
	line-height: 1.6em;
}
.thoughts_sp_img{display: none;}
#top_waza .wrap .right {width: 70%;}
#top_ie {
	background: url(img/top/thoughts.jpg) no-repeat left 18% /50%,url(img/top/thoughts.svg) no-repeat right top /45%;
	background-color: var(--main-bk-color);
}
#top_ie .wrap .right {
	width: 55%;
	line-height: 1.8em;
}
#top_ie li {font-size: 0.9em;}	
#top_info .wrap {max-width: 500px;}
.info_day,
.info_txt {font-size: 0.8em;}
	
#top_ie h3 {font-size: 1.4em;}
	
.banner3 li:nth-child(3n) {padding: 2% 0 3% 2%; }
		
/*家づくり　選ばれる理由*/
#iedukuri_page .mainimg {
	margin-bottom: 5%;
}
.riyu li .img,
.riyu li .txt {width: 45%;}
.riyu li .txt {margin-top: 3%;}

/*木の家*/
#kinoie_page .sub {max-width: 100%;}
#kaori {margin-bottom: 7%;}
#kaori .txt,
#atataka .wrap1 .left {width: 50%;}

#atataka .wrap2 .left {margin-top: -12%;}
#atataka .wrap2 .right {margin-top: 1%;}

/*会社概要*/
#aisatsu p {font-size: 1em;}
#syacho {
	max-width: 90%;
	font-size: 1em;
}

#gaiyo th,
#gaiyo td {font-size: 1em;}

/*高橋工務店について*/
#waza {
	background: url(img/about/b1.png) no-repeat left 5%/30%,url(img/top/waza.svg) no-repeat left top /50%;
	background-color: var(--main-bk-color);
	padding: 5% 0;
}
#waza .txt {
	width: 65%;
	margin-bottom: -10%;
}
#waza .txt img {width: 40%;}
#waza ul {margin-top: -50%;}
	
#waza li:nth-child(1) .img {
	width: 50%;
	margin: -13% 0 0 -5%;
}
#waza li .waza_txt {width: 55%;}
#waza li:nth-child(1) .waza_txt {margin: 10% 0 0 -5%;}
#waza li:nth-child(2) .waza_txt {margin-top: 8%;}

/*施工事例*/
#works_page .post_a {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-start;
	align-content: flex-start;
}
#works_page .post_a li {
	display: block;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.thumb {
	max-width: 750px;
	margin: 0 auto 5%;
}
	
/*施工事例sideメニュー*/
.fixBox{
	position: fixed;
	top: 12%;
	width: 24%;
}
#works_page_new {
	z-index: 100;
	position: relative;
}   
	
/*モデルハウス*/
#modelhouse_page ul {margin: 5% auto;}
#modelhouse_page ul li:nth-child(2) {
	margin-right: 20%;
	width: 80%;
}
#modelhouse_page ul li:nth-child(3) {
	margin: 0 0 5% 10%;
	width: 90%;
}
#modelhouse_page ul li:nth-child(4),
#modelhouse_page ul li:nth-child(5) {
	margin: 0 auto 5%;
	width: 90%;
}
#modelhouse_date h4 {font-size: 1.3em;}
#modelhouse_date {font-size: 1em;}	
	
	
	
	
}

/*===============================================
PC
===============================================*/
@media screen and (min-width: 811px){

/* 横ボタン */
#side-btn {
    position: fixed;
    top: 50%; 
    right: 0;
    z-index: 999;
	width: 5%;
}
#side-btn a {
    text-decoration: none;
    text-align: center;
    display: block;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}
#side-btn img {
	/*border-bottom: 1px solid #FFF;*/
	padding: 0;
	margin: 0;
}
#side-btn a:hover {
    text-decoration: none;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
	padding-top: 0;
}

/*TOP*/
.thoughts_sp_img{display: none;}

/*施工事例*/
#works_page .post_a {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: flex-start;
	align-content: flex-start;
}
#works_page .post_a li {
	display: block;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.thumb {
	max-width: 750px;
	margin: 0 auto 5%;
}
/*施工事例sideメニュー*/
.fixBox{
	position: fixed;
	top: 20%;
	width: 330px !important;;
}
#works_page_new {
	z-index: 100;
	position: relative;
} 
	
/*モデルハウス*/
#modelhouse_page ul {
	max-width: 1300px;
	margin: 5% auto;
}
#modelhouse_page ul li:nth-child(2) {
	margin-right: 20%;
	width: 80%;
}
#modelhouse_page ul li:nth-child(3) {
	margin: 0 0 5% 10%;
	width: 90%;
}
#modelhouse_page ul li:nth-child(4),
#modelhouse_page ul li:nth-child(5) {
	margin: 0 auto 5%;
	width: 90%;
}

/*家づくり　選ばれる理由*/
.riyu li .txt {margin-top: 7%;}
	
	


}