@charset "UTF-8";

/*
物件によって変更
#3B5973 キーカラー（濃いめ）
#F7F0E0 キーカラー（薄め）
#B1BDC7 キーカラー（40%）間取り背景色

基本固定
#3E3A39 文字用グレー
#F5F5F5 うすいグレー
#ebebeb とてもうすいグレー（背景）
#82A1CD 空室
#b3292c 満室
#b3292c 目立たす赤
#08297B  エルアイシーカラー
*/


/* --------- PC --------- */
/*@media only screen and (min-width: 1200px) */

/* 改行設定 */
.onlyPC{
  display: block;
}
.onlyTAB{
  display: none;
}
.onlySP{
  display: none;
}



/*-------------------------------------------*/
/* 基本 */
body {
  font-family:"游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color:#3E3A39;
  background-color: #fff;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}


a:hover{
  opacity: 0.5;
}

.text{
  margin: 0 auto;
  text-align: center;
  color: #3E3A39;
  font-size:12pt;
  line-height:1.7em;
  letter-spacing: 0.1em;
}

.Gothic{
  font-family:"游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

.linkbtn {
  font-size: 15px;
	display: inline-block;
	margin: 20px auto;
  text-align: center;
	padding: 12px 30px;
  color: #3E3A39;
	border: 1px solid #3E3A39;
	transition: 0.6s;
  letter-spacing: 0.3em;
}

.linkbtn:hover {
	color: #fff;
	background: #3E3A39;
	border: 1px solid #3E3A39;
}

.linkbtn a:hover {
  opacity: 1;
}

/* セクションタイトル */
h2{
 font-size: 35px;
 color: #3B5973; /* キーカラー */
 padding-top: 20px;
 letter-spacing: 0.2em;
 line-height: 0.7em;
 margin-bottom: 30px;
 display: block;
 width: 100%;
}


h2 span{
  font-family:"游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 12px;
  color: #3E3A39;
  padding-top: 0px;
  letter-spacing: 0.5em;
 }


/*-------------------------------------------*/
/* ナビ */
.NavWrap{
  position:fixed;
  display: flex;
  z-index: 100;
  width: 100%;
  height: 50px;
  background-color:rgba(255,255,255,0.8);
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, .5);
}

.status_kuu{
  width: 50%;
  height:auto;
  display: flex;
  align-items: center;
  padding-left: 10%;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.2em;
  background: linear-gradient(45deg, #82A1CD 0%, #82A1CD 80%, rgba(255,255,255,0.0) 50%, rgba(255,255,255,0.0) 20%);
  color: #fff;
}

.status_man{
  width: 50%;
  height:auto;
  display: flex;
  align-items: center;
  padding-left: 11%;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1em;
  background: linear-gradient(45deg, #E96B64 0%, #E96B64 80%, rgba(255,255,255,0.0) 50%, rgba(255,255,255,0.0) 20%);
  color: #fff;
}


.linknav{
  width: 100%; /* 空室満室入れる時は50% */
  height:auto;
  display: flex;
  justify-content: flex-end;
}

.menu-group {
  font-size: 15px;
  display: flex;
  padding-right: 5%;
}


.otoiawase {
	display: block;
	text-align: center;
	text-decoration: none;
	margin: auto;
	padding: 9px 30px;
	font-weight: bold;
  background: #08297B;
	color: #fff;
	border: 1px solid #08297B;
	border-radius: 100vh;
	/*box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);*/
	transition: 0.6s;
  margin-right: 30px;
  letter-spacing: 0.1em;
}

.otoiawase:hover {
	color: #08297B;
	background: #fff;
	border: 1px solid #08297B;
	/*transform: translateY(3px);*/
}

.otoiawase a:hover {
  opacity: 1;
}


.LIClogo{
  width: 100px;
  margin: auto 0;
}

.property{
  display: block;
	text-align: center;
	text-decoration: none;
	margin: auto;
	padding: 0px 15px;
	color: #08297B;
	transition: 0.3s;
  margin-right: 0px;
  letter-spacing: 0.3em;
}

/*-------------------------------------------*/
/* ヘッダー */
.main_banner{
  height: 550px;/*固定*/
  background: linear-gradient(#F7F0E0, #F5F5F5);/* キー薄め→薄グレーグラデ */
  display: flex;
  align-items: center;
}

/*-------------------------------------------*/
/* 物件名まわり 左ヘッダー */
.titlegroup{
  width: 60%;
  margin-top: 40px;
  height: auto;
  text-align: center;
}

.topic{
  color: #b3292c;
  font-size: 20px;
  margin-top: 40px;
  letter-spacing: 0.20em;
}

.date{
  display: inline-block;
  font-size: 16px;
  margin-top: 20px;
  padding: 10px 30px;
  letter-spacing: 0.1em;
  background-color: #fff;
}

.title img{
  width: 380px;
  margin: 10px 0;
}

.title{
  font-size: 30px;
  padding-top: 20px;
  margin:auto 0;
}

.title2{
  font-size: 11px;
  color:#898989;
  padding-top: 10px;
  letter-spacing: 0.7em;
  margin:auto 0;
}

.feature{
  display: flex;
  margin-top: 20px;
  justify-content: center;
  gap: 10px;
}

.feature img{
  width: 90px;
}

.fraction{
  font-size: 18px;
  margin:15px auto;
  line-height:0.7em;
}

.fraction span{
  font-size: 25px;
  margin:10px 5px;
  color: #b3292c;
  font-weight: bold;
}

.ding{
  font-size: 18px;
  margin-top:20px;
  margin-bottom: -10px;
  letter-spacing: 0.3em;
  color: #3B5973;/* キーカラー */
}

/*-------------------------------------------*/
/* 背景ありパース画像 右ヘッダー */
.Perth_wp {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.Perth img{
  height: 550px;
}


/*-------------------------------------------*/
/* 切り抜きパース画像 右ヘッダー 
.Perth_wp {
  width: 50%;
  margin-right: 50px;
  display: flex;
  height: 550px;
  align-items: end;
  justify-content: flex-end;
}


.Perth img{
  width: 100%;
  height: auto;
}
*/


/*-------------------------------------------*/
/* 間取りプラン */

.plan{
  background-color:#B1BDC7;
}

.plan_wp{
  width: 80%;/*固定*/
  margin: 0 auto;
  padding:80px 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 50px;
  justify-content: space-between;
}

.plan_wp::after{
	content:"";
	display: block;
	width:18%;/* 3列30% 4列23％ 5列18％ */
  }
  
.plan_wp::before {
  content:"";
  order:1;
  display: block;
  width:18%;/* 2列46% 3列30% 4列23％ 5列18％ */
  }



.plan_wp span{
  font-size: 40px;
  letter-spacing: 0.2em;
  color: #3B5973; /* キーカラー */
}

.plan_wp ul{
  width: 18%;/* 2列46% 3列30% 4列23％ 5列18％ */
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
  margin:0;
  padding: 20px 0;
}

.plan_wp li{
  width: 80%;
  background-color: #fff;
  text-align: center;
  margin: 10px auto;
 
}

.plan_wp li img{
  width: 100%;/* 縦幅同じ時auto 横幅同じ時100% */
  margin: 0px auto;
}

.plan table{
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
}

.plan table th {
  padding-top: 15px;
  padding-bottom: 5px;
  text-align: center;
  border-bottom: solid 2px #3B5973; /* キーカラー */
  color: #3B5973; /* キーカラー */
  font-weight: normal;  
 }

 .plan table td {
  padding: 10px;
  text-align: center;
  border-bottom: solid 1px #3B5973; /* キーカラー */
 }



 /*-------------------------------------------*/
/* 区画&価格プラン */


.priceplan{
  background-color:#FFF; /*固定*/
  border-bottom : solid 1px #3B5973; /* キーカラー */
}

.priceplan_wp{
  width: 80%;/*固定*/
  margin: 0 auto;
  padding:80px 0;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}

.priceplan img{
  width: 45%;
  margin: 0 auto;
  margin-top: 25px;
}


/*-------------------------------------------*/
/* 区画プラン


.landplan{
  background-color:#FFF; 
  border-bottom : solid 1px #3B5973; 
}

.landplan_wp{
  width: 80%;
  margin: 0 auto;
  padding:80px 0;
  display: block;
  text-align: center;
}

.landplan img{
  width: 40%;
  margin: 0 auto;
  margin-top: 25px;
}
*/



/*
画像スライダー
-------------------------------------------*/

.photo{
  background-color:#fff; 
}

.photo_wp{
  width: 80%;
  margin: 0 auto;
  padding: 80px;
}

.slider p{
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-align: center;
}

/*-- スライダーの横幅 --*/
.slider{
  width:80%;
  margin:0 auto;
}

/*-- スライダー画像 --*/
.slider img{
	width:100%;
}

/*-- 高さ調整 --*/
.slider .slick-slide{
	height:auto!important;
}

/*-- 矢印 --*/
.slider .slick-next{
    right:10px!important;
}
.slider .slick-prev{
    left:10px!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 25px!important;
}



/*
画像配置
-------------------------------------------*/

.graph{
  background-color:#fff; 
  /* border-bottom : solid 1px #3B5973; */
}

.graph_wp{
  width: 80%;/*固定*/
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}

.graphconte{
  width: 100%;/*固定*/
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  justify-content: space-between;
  margin-top: 25px;
}

.graphconte::after{
	content:"";
	display: block;
	width:30%;
  }

.graphconte p{
  margin-top: 5px;
  font-size: 14px;
  letter-spacing: 0.015em;
  text-align: center;
}

.graphconte ul{
  width: 30%;
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
  margin:0;
}


.graphconte li img{
  width: 100%;
  margin: 0px auto;
}



/*
費用
-------------------------------------------*/

.cost{
  background-color:#F7F0E0; /* キー薄め*/
}

.cost_wp{
  width: 80%;/*固定*/
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}

.costconte{
  width: 100%;/*固定*/
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  justify-content: space-between;
}

.costconte p{
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.7em;
}

.costconte span{
  font-size: 17px;
  letter-spacing: 0.1em;
  text-align: center;
  border-bottom:1px solid;
	border-bottom-color:#3B5973; /* キーカラー */
	padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 3em;
}

.costconte ul{
  width: 30%;
  text-align: center;
  vertical-align: middle;
  margin:0;
}



/*
設備
-------------------------------------------*/

.equipment{
  background-color:#ebebeb;
}

.equipment_wp{
  width: 80%;/*固定*/
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
}

.equipmentconte{
  width: 100%;/*固定*/
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  justify-content: space-between;
}

.equipmentconte p{
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.7em;
}

.equipmentconte span{
  font-size: 17px;
  letter-spacing: 0.1em;
  text-align: center;
  border-bottom:1px solid;
	border-bottom-color:#3B5973; /* キーカラー */
	padding-bottom: 5px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 3em;
}

.equipmentconte ul{
  width: 20%;
  text-align: center;
  vertical-align: middle;
  margin:0;
}




 /*-------------------------------------------*/
/* アクセス */


.access{
  background-color:#FFF; /*固定*/
  /*border-bottom : solid 1px #3B5973;*/
}

.access_wp{
  width: 80%;/*固定*/
  margin: 0 auto;
  padding:80px 0;
  display: block;
  text-align: center;
}

.access iframe{
  margin-top: 50px;
}



/*-------------------------------------------*/
/* ショップ */

h3{
 font-size: 35px;
 color: #003B96;
 padding-top: 20px;
 letter-spacing: 0.2em;
 line-height: 0.7em;
 margin-bottom: 30px;
}

.shop{
  background-color:#ebebeb;
}

.shop_wp{
  width: 60%;/*固定*/
  margin: 0 auto;
  padding:80px 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 50px;
  justify-content: space-between;
}

.shop_wp span{
  font-size: 25px;
  letter-spacing: 0.1em;
}

.shop_wp ul{
  width: 48%;
  text-align: left;
  vertical-align: middle;
  margin:0;
  padding: 20px 0;
}

.shop_wp li{
  text-align: left;
  margin-top: 10px;
 
}

.shop_wp li img{
  width: 50%;
  margin: 0px auto;
 
}

ul.map{
  display: block;
  text-align: end;
}

.snsicon{
  display: block;
  width: 40%;
  padding-top: 30px;
  text-align: left;
}

.ap_sns{
  display: flex;
  justify-content: flex-start; /* 左揃え */
  align-items: center;
  width: 150px;
}



/*
フッター
-------------------------------------------*/
footer{
  
  background-color: #08297B;
  color: #fff;
}

.foot_wp {
  width: 100%;
  display: block;
  text-align: center;
  padding: 20px 0;

  }

footer p{
font-size: 14px;
line-height: 1.7em;
}

footer img{
width: 150px;
padding-bottom: 10px;
}











/*
エフェクト
-------------------------------------------*/
  
/*アニメーション要素のスタイル*/
.animation{
  opacity : 0;
  visibility: hidden;
  transition: 2s;
  transform: translateY(20px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}