@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700;900&family=Noto+Serif+JP:wght@300;500;700&family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&display=swap');



/* CSS Document */


html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}



/*　　WEBフォント
------------------------------------------------------------------------------------------------------------*/

/*

font-family: 'Noto Sans JP', sans-serif;　ゴシック　100;　400;　700;　900
font-family: 'Noto Serif JP', serif;　　　明朝　　　300;　500;　700
font-family: 'Roboto', sans-serif;　　　　太数字用　900;

font-family: 'Bilbo Swash Caps', cursive;
*/




/*　　いろいろ見た目
------------------------------------------------------------------------------------------------------------*/


html, body{
	margin:0;
	padding:0;
	border:0;
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;

	line-height: 1.5em;
	letter-spacing: 0.02em;
	color: #333;
}



@media screen and (max-width: 960px)
and (max-width: 480px){
html, body{
	font-size: 16px;
}
}



.highlight a:hover *{
	 filter: alpha(opacity=50);
	 -moz-opacity:0.5;
	 opacity:0.5;
	 -webkit-transition: all .3s;
	 transition: all .3s;
	 }
	 


img {
	border: none;
}





a:link {color: #333;}
a:visited {color: #333;}
a:hover {color: #CCCCCC;}
a:active {color: #333333;}





.cb{
	/* floatを解除 */
	clear: both;
	margin: 0;
	padding: 0;
}





.img-auto img{
	max-width: 100%;
}






/*　　基本コンテンツ幅
------------------------------------------------------------------------------------------------------------*/


.contents_width {
	width: 1100px;
	margin: 10px auto;
}



@media screen and (max-width: 768px) {
	
.contents_width {
	width: 99%;
	margin: 10px auto;
}

}







/*　　上に戻るボタン
------------------------------------------------------------------------------------------------------------*/



.pagetop {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
}

.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 30px;
    text-decoration: none;
    padding: 18px 15px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}






/*　アンカーポイント 位置調整　*/


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


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

a.anchor {
    display: block;
    padding-top: 10px;
	padding-bottom: 50px;
    margin-top: -10px;
}
	
	}






/*　　PCのみ表示、スマホのみ表示の切り替え
------------------------------------------------------------------------------------------------------------*/


.pc { display:inline!important; }
.sp { display:none!important; }

@media screen and (max-width: 768px) {
.pc { display:none!important; }
.sp { display:inline!important; }
	}







/*　　フォント
------------------------------------------------------------------------------------------------------------*/


.tx10 {font-size: 10px;}
.tx11 {font-size: 11px;}
.tx12 {font-size: 12px;}
.tx13 {font-size: 13px;}
.tx14 {font-size: 14px;}
.tx15 {font-size: 15px;}
.tx16 {font-size: 16px;}
.tx17 {font-size: 17px;}
.tx18 {font-size: 18px;}
.tx20 {font-size: 20px;}
.tx22 {font-size: 22px;}
.tx24 {font-size: 24px;}
.tx26 {font-size: 26px;}
.tx28 {font-size: 28px;}
.tx30 {font-size: 30px;}
.tx32 {font-size: 32px;}
.tx34 {font-size: 34px;}
.tx36 {font-size: 36px;}
.tx38 {font-size: 38px;}
.tx40 {font-size: 40px;}

.red {color: #C30;}
.blue {color: #336699;}
.d-blue {color: #0A2743;}
.green {color: #696;}
.d-green {color: #184943;}
.orange {color: #F90;}
.pink {color:#FF6699;}
.brown {color: #624628;}
.gray {color: #999;}
.white {color: #FFF;}



.tx_s {font-size: 80%;}
.tx_l {font-size: 120%;}






/*　　ライン装飾
------------------------------------------------------------------------------------------------------------*/



.line_green{
	background:linear-gradient(transparent 45%, #A7FDA7 45%);
}

.line_blue{
	background:linear-gradient(transparent 45%, #80D3FC 45%);
}

.line_yellow{
	background:linear-gradient(transparent 45%, #FFFF74 45%);
}


.line_pink{
	background:linear-gradient(transparent 45%, #FFC3EA 45%);
}








/*　　区切り線デザイン
------------------------------------------------------------------------------------------------------------*/



.gradation {
	position: relative;
	height: 1px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left, transparent 0%, #283593 50%, transparent 100%);
	background-image:         linear-gradient(90deg, transparent 0%, #283593 50%, transparent 100%);
	margin: 100px auto;
}













/*　　h
------------------------------------------------------------------------------------------------------------*/


h1 {
  padding-bottom: .3em;
  border-bottom: 1px solid #ccc;
	font-size: 24px;
	font-weight: normal;
}

h1 span {
  display: block;
	margin-top:  .2em;
  color: #aaa;
  font-size: 10px;font-family: 'Kosugi', sans-serif;
}




h2 {
	position: relative;
	padding-top: 50px;
	padding-left: 10px;
	padding-bottom: 10px;
	font-size: 36px;
	letter-spacing: 0.2em;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	z-index: 5;
	
	border-bottom: 1px solid #1A3A20;
}


h2::after {
	content: attr(data-en);
	position: absolute;
	right: 10px;
	bottom: 2px;
	font-size: 24px;
	letter-spacing: 0;
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
	
	
	z-index: 0;
}




@media screen and (max-width: 768px) {
	
h2 { font-size: 30px; letter-spacing: 0.1em;}
h2::after {font-size: 20px;}
	
	
h3 {font-size: 26px; line-height: 1.5em;}

.width-space {width: 97%; margin: 0 auto;}
	
}









/*　　テキストボックス
------------------------------------------------------------------------------------------------------------*/


.tx-box-w950 {
	width: 950px;
	margin: 20px auto;
	text-align: justify;
	font-size: 20px;
	line-height: 1.5em;
	letter-spacing: 0.1em;
}



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

.tx-box-w950 {
	width: 100%;
	padding: 10px;
	margin: 20px auto;
	text-align: justify;
	font-size: 16px;
}
	
}









/*　　ヘッダ
------------------------------------------------------------------------------------------------------------*/


#header {
  width: 1100px;
	margin: 5px auto;
  display: flex;
}

#logo {
  width: 400px;
}


#logo img{
  max-width: 100%;
}

#info {
  width: 100%;
  flex: 1;
	text-align: right;
	position: relative;
}


.head_tel {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 40px;
	color: #BF0003;
	position: absolute;
	bottom: 0;
	right: 0;
}

.head_tel a {
	text-decoration: none;	
	color: #BF0003;
}

.head_tel i {
	font-size: 85%;
}

.head_tel span {
	display: block;
	font-size: 16px;
	text-align: left;
	color: #323232 !important;
}


.head_tel span i{
	font-size: 85%;
	margin-left: 18px;
}

.head_info {
	width: 350px;
	position: absolute;
	right: 0;
}

.head_info img{
	max-width: 100%;
}





@media screen and (max-width: 767px) {
	
  #header {
	  display: block;
	  width: 99%;
  }
	
  #logo {
    width: 100%;
  }
	
  #info {
    width: 100%;
	  position: static;
	  text-align: center;
  }
	
	.head_info {
		display: none;
	}
	
	.head_tel {
		position: static;
		text-align: left;
		padding-top: 10px;
		display: inline-block;
}
	
	
}







/*　　ナビゲーション
------------------------------------------------------------------------------------------------------------*/



.head_menu {
	width: 100%;
	height: 90px;
	margin: 10px auto;
	background-color: #46C1B0;
	border-top: #45B79F 2px solid;
	border-bottom: #45B79F 2px solid;
}




.Nav {
	width: 1100px;
	margin: 0 auto;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	text-align: center;
}



.Nav ul {
	padding: 0;
	margin: 10px 0px;
	background: rgba(208,254,243,1.00);
	background: linear-gradient(180deg, rgba(187,237,233,1.00) 0%, rgba(78,177,164,1.00) 100%);
}


.globalNav {
    list-style: none;
    overflow: hidden;
	text-align: center;
	display: flex;
	width: 100%;
}
 
.globalNav li {
	width: 16.6%;
    float: left;
    border: 1px solid #FFFFFF;
	flex: 1 0 auto;
	font-size: 16px;
	letter-spacing: 0.1em;
	color: #FFFFFF !important;
}

 
 
.globalNav li a {
    display: block;
    padding: 7px 5px;
    text-align: center;
    text-decoration: none;
	color: #FFFFFF !important;
}


 
.globalNav li a span {
    display: block;
    margin: 0px;
	margin-bottom: -5px;
    color: #46A89B;
    text-transform: uppercase;
    font-size: 70%;
    letter-spacing: 0.2em;
}
 


.globalNav li a:hover {
	background: rgb(227,246,255);
	background: linear-gradient(180deg, rgba(222,245,244,1.00) 0%, rgba(158,211,205,1.00) 100%);
	color: #46A89B !important;
}


.globalNav li a:hover span{
	color: #FFFFFF !important;
}






.globalNav li ul {
	position: absolute;
	z-index: 100;
    list-style: none;
	display: flex;
	flex-direction: column;
}

.globalNav li ul li {
  visibility: hidden;
  overflow: hidden;
  height: 0;
	width: 100%;
  background: rgba(255,255,255,0.9);; /*サブメニューの背景色*/
	border: none;
	border-bottom: 1px dotted #B5B5B5;
}


.globalNav li ul li:first-child {
	border: none;
	border-bottom: 1px dotted #B5B5B5;
}



.globalNav li ul li a{
	text-align: left;
}

	
.globalNav li ul li:hover, .globalNav li ul li a:hover {
	color: rgba(255,139,70,1.00);
}
	
.globalNav li:hover ul li, .globalNav li a:hover ul li{
  visibility: visible;
  overflow: visible;
  height: 40px;  /*サブメニューの高さ*/
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.globalNav li:hover ul li:last-child, .globalNav li a:hover ul li:last-child{
  height: 47px;  /*サブメニューの高さ*/
}






@media screen and (max-width: 960px){
	
	.head_menu  {display: none;}
	
	.Nav {display: none;}
}








/*　　途中で出てくるヘッダナビゲーション
-------------------------------------------------------------------------------------------------------*/



fix-nav {display: none;}

.clone-nav {
	display: block;
	position: fixed;
	padding: 0px 0px 5px 0px;
	margin-top: -10px !important;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	transition: .3s;
	transform: translateY(-100%);
	background: rgba(255,255,255,0);
}

.is-show {
  transform: translateY(0);
}



@media screen and (max-width: 768px) {
	fix-nav {display: none;}
}















/*　　メインイメージ
------------------------------------------------------------------------------------------------------------*/

.main_photo {
	text-align: center;
	width: 100%;
}


.main_photo img {
	max-width: 100%;
}



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

.main_photo {
	margin-top: 50px;
}

}




/*　　コンテンツ幅
------------------------------------------------------------------------------------------------------------*/




.w1000 {
	width: 1000px;
	
	margin: 50px auto;
	padding: 50px 10px; 
	text-align: center;
}

.w1000 img{max-width: 100%;}

.w1100 {
	width: 1100px;
	margin: 50px auto;
	padding: 50px 10px; 
	text-align: center;
}




.w1200 {
	max-width: 1200px;
	margin: 50px auto;
	padding: 50px 10px; 
	text-align: center;
}






@media screen and (max-width: 960px)
and (max-width: 480px){
	
	.w1000, .w1100, .w1200 {
	width: 100%;
	padding: 20px 0px;
	margin: 20px auto;
		
}
}










/*　　レスポンシブボックス（PC均等配置）
------------------------------------------------------------------------------------------------------------*/



/*---　　小さめ文字　　　---*/

.s-tx {font-size: 14px; line-height: 1.3em; letter-spacing: 0.1em;}

@media screen and (max-width: 960px) {
.s-tx {font-size: 12px; letter-spacing: 0.05em;}
}




/*---　　6列　　　---*/


.col_6{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_6 > div{
	width: 16.5%;
	padding: 10px;
}

.col_6 > div img{
	max-width: 100%;
}


.col_6 > div p{
	font-size: 14px;
	line-height: 1.5em;
}

.col_6 > div > div{
	position: relative;
	overflow: hidden
}


@media screen and (max-width: 960px) {
	.col_6 > div{
		width: 20%;
	}
}
@media screen and (max-width: 480px) {
	.col_6 > div{
		width: 33.333%;
	}
	
	.col_6 > div p{
	font-size: 12px;
	line-height: 1.5em;
}
}






/*---　　5列　　　---*/


.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}


.col_5 > div img{
	max-width: 100%;
}


.col_5 > div > div{
	position: relative;
	overflow: hidden
}

@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}

@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 50%;
	}
}








/*---　　4列　　　---*/


.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
		padding: 5px;
	}
}








/*---　　3列　　　---*/

.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}

@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}







/*---　　2列　　　---*/

.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	align-items: center;
}

.col_2 > div{
	width: 50%;
	padding: 10px;
}

.col_2 > div img{
	max-width: 100%;
}



@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 50%;
	}
}

@media screen and (max-width: 480px) {
	.col_2 > div{
		width: 100%;
	}
}



















/*　　テーブル（概要）
------------------------------------------------------------------------------------------------------------*/



.outline_tbl {
	width: 900px;
	margin: 20px auto;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 16px;
	line-height: 1.3em;
}

.outline_tbl th {
	width: 22%;
	background-color: #DBE9E6;
	border-bottom: 2px solid #FFFFFF;
	box-sizing: border-box;
	padding: 10px 15px;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
}

.outline_tbl td {
	background: #fff;
	border-bottom: 2px dashed #E0E7EC;
	box-sizing: border-box;
	padding: 10px 15px;
	vertical-align: top;
	text-align: left;
}


@media all and (max-width: 768px) {
	.outline_tbl {
		width: 99%;
	}

	
  .outline_tbl th, .outline_tbl td {
	  display: block;
	  width: 100%;
	  border-bottom: none;
	  text-align: left;
	  padding: 10px;
	}
	
  .outline_tbl tr:last-child td:last-child {
	  border-bottom: 1px solid #ccc;
	}
}











/*　　区画・価格
------------------------------------------------------------------------------------------------------------*/



table.price {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 15px -6px #00000073;
}


table.price tr{
  text-align: center;
  background-color: #fff;
  color:#3a3a3a;
}

table.price th,
table.price td {
  padding: 15px 0;
  border-bottom: 1px dotted #C7C7C7;
}


table.price th {
  width: 30%;
  font-size: 16px;
}



table.price tr:hover{
  background-color: #d4faff;
}


.greenbox {
	background-color: #39A156;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px 15px 3px 18px;
	border-radius:30px;
}

.brownbox {
	background-color: #806F60;
	font-weight: bold;
	color: #FFFFFF;
	padding: 5px 15px 3px 18px;
	border-radius:30px;
}








/*　　アットホームボタン
------------------------------------------------------------------------------------------------------------*/


a.btn_athome {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #795548;
  text-align: center;
  text-decoration: none;
  width: 100%;
  height: 100px;
  padding: 20px 20px 20px 75px;
  background-color: #ffffff;
  border: 5px solid #FBCF72;
  border-radius: 10px;
  box-sizing: border-box;
  position: relative;
  transition-duration: 0.3s;
}
a.btn_athome::before {
  content: '';
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -30px;
  background-image: url("../img/athome.png");
  background-size: contain;
  background-repeat: no-repeat;
}
a.btn_athome span {
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
}
a.btn_athome span span {
  display: block;
  font-size: 16px;
  margin-bottom: 7px;
}
a.btn_athome:hover {
  color: #ffffff;
  background-color: #FBCF72;
}











/*　　モデルハウス
------------------------------------------------------------------------------------------------------------*/

.model_img {
	width: 1000px;
	margin: 10px auto 50px;
}


.model_img img{
	max-width: 100%;
}

.model_ttl {
	font-size: 30px;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	line-height: 1.3em;
	letter-spacing: 0.05em;
	color: #372E13;
}


@media all and (max-width: 768px) {
.model_img {
	width: 99%;
	margin: 10px auto 50px;
}	
	
.model_ttl {
	font-size: 18px;
}
}





.btn{
	display: inline-block;
	background:#1AAB8A;
	color:#fff;
	border:none;
	position:relative;
	height:60px;
	text-align: center;
	font-size:1.6em;
	font-weight: 700;
	line-height: 2em;
	padding:0 2em;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
}

.btn:link{
	color: #fff;
	text-decoration: none;
}

.btn:hover{
  background: #fff;
  color: #1AAB8A;
}
.btn:before,.btn:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
.btn:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn:hover:before,.btn:hover:after{
  width: 100%;
  transition:800ms ease all;
}


@media all and (max-width: 768px) {

.btn{
	font-size:1.4em;
	font-weight: 700;
	line-height: 2.5em;
	padding:0 2em;
	cursor:pointer;
	transition:800ms ease all;
	outline:none;
}
	}







/*　　周辺環境
------------------------------------------------------------------------------------------------------------*/

.name {
	font-size: 16px;
	text-align: center;
	line-height: 1.3em;
}

.name span {
	font-size: 90%;
	display: block;
	text-align: center;
}









/*　Youtubeレスポンシブ
------------------------------------------------------------------------------------------------------------*/

.movie-width {
	width: 90%;
	margin: 5px auto;
}



.movie-width-tbl {
	width: 100%;
	margin: 5px auto;
}



.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0px;
	width: 100%;
	height: 100%;
}



@media screen and (max-width: 960px){
.movie-width {
	width: 100%;
	margin: 5px auto;
}

.movie-width-tbl {
	width: 100%;
	margin: 5px auto;
}
}







/*　　GoogleMapレスポンシブ
------------------------------------------------------------------------------------------------------------*/


.map_tbl {
	width: 1000px;
	margin: 10px auto;
}

@media screen and (max-width: 768px) {
	.map_tbl {
	width: 100%;
}
}



.GoogleMap{
    position: relative;
    width: 100%;
    height: 0;
	padding-top: 30%;
	/*
    padding-top: 56.25%;　/*比率をお好みで*/
}

.GoogleMap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	filter: sepia(10%) grayscale(50%);
}

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

.GoogleMap{
    width: 95%;
	margin: 0 auto;
	padding-top: 65%;
	/*
    padding-top: 56.25%;　/*比率をお好みで*/
}
	
}














/*　　フッター
------------------------------------------------------------------------------------------------------------*/


.footer {
	width: 100%;
	background-color: #E0ECE9;
	border-top: 1px solid #2DAA98;
	padding: 20px 0px;
	margin-top: 100px;
}

.footer_content {
	width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.footer_left {
	width: 40%;
	font-size: 14px;
}

.footer_left img{
	max-width: 100%;
}

.footer_right {
	display: inline-block;
	padding: 10px 5px;
}


.footer_tel {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 40px;
	color: #BF0003;
}

.footer_tel a {
	text-decoration: none;	
	color: #BF0003;
}

.footer_tel i {
	font-size: 85%;
}

.footer_tel span {
	display: block;
	font-size: 16px;
	color: #323232 !important;
	margin: 5px 0px;
}


.footer_tel span i{
	font-size: 85%;
	margin-left: 18px;
}

.copyright {
	text-align: center;
	width: 95%;
	padding: 20px 0px;
	margin: 0 auto;
	font-size: 12px;
	letter-spacing: 0.1em;
}





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

.footer_content {
	width: 100%;
	text-align: center;
	flex-direction: column;
	}

.footer_left {
	width: 95%;
	margin: 0 auto;
	}
	
}