@charset "UTF-8";

body {
  background-color: #fff;
font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体','Shippori Mincho B1', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
}

main {
overflow: hidden;
}

.contact_Block {
margin-top: 0;
}

.lower_Block {
margin-bottom: 50px;
}


.gara {
font-family: "Cormorant Garamond", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: italic;
}


/*共通タイトル*/
.ttl_Area {
width: 1000px;
max-width: 100%;
margin: 50px auto 30px;
text-align: center;
}
.ttl_Area .gara {
color: #604b23;
font-size: 16px;
text-align: center;
display: block;
margin-bottom: 5px;
}
.ttl_Area h3 {
  align-items: center;
  display: flex;
  font-size: 25px;
}
.ttl_Area h3::before,
.ttl_Area h3::after {
  background-color: #604b23;
  content: "";
  flex-grow: 1; /* 横幅いっぱい */
  height: 1px;
}
.ttl_Area h3::before {
  margin-right: 15px;
}
.ttl_Area h3::after {
  margin-left: 15px;
}
.ttl_Area p {
margin-top: 20px;
line-height: 2;
}


#campaign_Area {
  position: relative;
  width: 100%;
  padding: 1px 0 0px;
  background: url(../img/bg.jpg) repeat-y;
  background-size: 100%;
  background-position: center center;
}

.cam_reserveBtn {
width: 350px;
max-width: 90%;
margin: 0 auto;
display: block;
padding: 15px 0;
color: #fff;
border-radius: 40px;
text-align: center;
letter-spacing: 0.1em;
transition: 0.3s;
background-image: linear-gradient(140deg,
			#968056 45%,
			#b9995c 50%,
			#968056 55%);
background-size: 500% 100%;
animation: shine 3s infinite;
}
.cam_reserveBtn:hover {
opacity: 0.7;
}
@keyframes shine {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.gallery_Btn {
width: 300px;
max-width: 80%;
margin: 0 auto;
text-align: center;
color: #fff;
background: #686868;
padding: 7px 0;
display: block;
border-radius: 50px;
font-size: 14px;
position: relative;
transition: 0.3s;
}
.gallery_Btn:before {
content: "";
width: 7px;
height: 7px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: url(../img/arrow.png) no-repeat;
background-size: 100%;
background-position: center;
}
.gallery_Btn:hover {
opacity: .7;
}


/*来場キャンペーン開催*/
.maintop_Area {
position: relative;
width: 1500px;
max-width: 100%;
margin: 100px auto;
}
.maintop_Area .bg_left {
width: 511px;
max-width: 50%;
position: absolute;
left: 0;
top: 0;
}
.maintop_Area .bg_right {
width: 508px;
max-width: 50%;
position: absolute;
right: 0;
top: 0;
}
.maintop_Area .tokuten_txt {
text-align: center;
font-size: 25px;
margin-bottom: 30px;
}
.maintop_Area .tokuten {
width: 1000px;
max-width: 90%;
margin: 0 auto 50px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.maintop_Area .tokuten li {
width: 49%;
}
.maintop_Area .tokuten li.flex1-1 {
width: 100%;
    margin-top: 40px;
}
.maintop_Area .tokuten li figure {
position: relative;
}
.maintop_Area .tokuten li figcaption {
position: absolute;
width: 80px;
height: 80px;
left: -25px;
top: -25px;
}
.maintop_Area .tokuten li p {
font-size: 12px;
text-align: left;
line-height: 1.8;
}
.maintop_Area .tokuten li p strong {
font-weight: bold;
}
.maintop_Area .main_Ttl {
width: 729px;
max-width: 90%;
margin: 0px auto 30px;
padding-top: 70px;
position: relative;
z-index: 3;
}
.maintop_Area .quo {
width: 883px;
max-width: 90%;
margin: 0 auto;
}
.maintop_Area .main_txt {
text-align: center;
line-height: 2.5;
margin-top: 50px;
margin-bottom: 30px;
}
.maintop_Area .main_txt .marker {
background:linear-gradient(transparent 60%, #f8dfbd 60%);
}

/*特典プレゼントの流れ*/
.flow_Wrap {
width: 1000px;
max-width: 90%;
margin: 0 auto;
}
.flow_Wrap .flow_Box {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flow_Wrap .flow_Box li {
width: 22%;
}
.flow_Wrap .flow_Box li.flow_arr {
width: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.flow_Wrap .flow_Box li.white {
background: #fff;
position: relative;
padding: 40px 0;
text-align: center;
font-size: 17px;
box-shadow:2px 2px 10px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.flow_Wrap .flow_Box li.white small {
    font-size: 15px;
}
.flow_Wrap .flow_Box li.white .cam_reserveBtn {
font-size: 12px;
padding: 5px 0;
width: 180px;
max-width: 90%;
margin-top: 20px;
}
.flow_Wrap .flow_Box li.white:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: calc(100% - 8px);
height: calc(100% - 8px);
border: 1px solid #968056;
pointer-events: none;
}


/*モデルルームの見どころ*/
.highlights_Wrap {
width: 100%;
background: #fff;
padding-bottom: 100px;
}
.highlights_Inner {
width: 1000px;
max-width: 90%;
margin: 0 auto;
}
.highlights_List {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.highlights_List li {
width: 48%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 50px;
}
.highlights_List li h3 {
width: 100%;
margin-bottom: 20px;
}
.highlights_List li h3 img {
width: 300px;
max-width: 100%;
}
.highlights_List li p {
font-size: 14px;
line-height: 2;
}
.highlights_List li .w50 {
width: 48%;
}
.highlights_List li .w100 {
width: 100%;
margin-bottom: 20px;
}
.highlights_List li:nth-child(3) ,
.highlights_List li:nth-child(4) {
margin-bottom: 0;
}


/*モデルルームQ&A*/
.qa_Wrap {
width: 100%;
}
.qa_Inner {
width: 1000px;
max-width: 90%;
margin: 0 auto;
}
.qa_Box {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 100px;
}
.qa_Box .question {
position: relative;
z-index: 1;
}
.qa_Box .answer {
width:630px;
max-width: 90%;
padding: 30px;
border: 3px solid #b7985c;
border-radius: 10px;
background: #fff;
position: relative;
margin-top: -30px;
}
.qa_Box .answer .ans_txt {
width: 210px;
max-width: 100%;
position: absolute;
top: -40px;
}
.qa_Box .answer .ans_txt.ans_right {
right: 0;
}
.qa_Box .answer .ans_txt.ans_left {
left: 0;
}
.qa_Box .q_left {
margin-left: 0;
margin-right: auto;
}
.qa_Box .q_right {
margin-right: 0;
margin-left: auto;
}
.qa_Box .a_left {
margin-left: 0;
margin-right: auto;
}
.qa_Box .a_right {
margin-right: 0;
margin-left: auto;
}
.qa_Box .answer.ans_right {
margin-right: 0;
margin-left: auto;
}
.qa_Box .answer h3 {
color: #926714;
font-size: 20px;
margin-bottom: 15px;
line-height: 1.6;
}
.qa_Box .answer p {
font-size: 15px;
line-height: 2;
}
.qa_Box .q01 {
width: 414px;
max-width: 100%;
}
.qa_Box .q02 {
width: 419px;
max-width: 100%;
}
.qa_Box .q03 {
width: 648px;
max-width: 100%;
}
.qa_Box .q04 {
width: 607px;
max-width: 100%;
}
.qa_Box .answer .quality {
position: absolute;
width: 82px;
max-width: 50%;
right: -50px;
bottom: -40px;
filter: drop-shadow(2px 2px #d3c3b3);
}
.qa_Box .answer .time {
position: absolute;
width: 89px;
max-width: 50%;
right: -30px;
bottom: -30px;
filter: drop-shadow(2px 2px #d3c3b3);
}



/*ギャラリー案内図*/
.map_Area {
width: 100%;
background: #fff;
padding: 50px 0;
}
.map_Area .ttl_Area {
    width: 800px;
}
.map_Area .map_Inner {
width: 800px;
max-width: 90%;
margin: 0 auto;
}
.map_Area .map_Box {
width: 100%;
margin: 0 auto 50px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.map_Area .map_Box li.gallery_img {
    width: 100%;
}
.map_Area .map_Box li.gallery_img p.red {
color: #b8351b;
font-size: 20px;
border: 1px solid #b8351b;
text-align: center;
padding: 5px 0;
margin-top: 2px;
letter-spacing: 0.1em;
}
.map_Area .map_Box li.gallery_map {
width: 100%;
    margin-top: 30px;
}
.map_Area .map_Box li.address {
width: 100%;
background: #b7985c;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 5px;
margin-top: 15px;
margin-bottom: 10px;
}
.map_Area .map_Box li.address p {
color: #fff;
font-size: min(2.5vw,14px);
width: 18%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.map_Area .map_Box li.address div {
width: 82%;
text-align: center;
background: #fff;
padding: 10px 0;
font-size: min(2.3vw,28px);
letter-spacing: 0.1em;
}
.map_Area .map_Box li.holiday {
text-align: center;
margin: 0 auto;
font-size: 13px;
}


@media only screen and (max-width: 767px) {
  
  #All_Wrap {
  min-height: inherit;
  }
  #concept_Area {
    padding: 0 0 50px;
  }
  
  #campaign_Area {
  background: url(../img/bg.jpg) repeat-y;
  background-size: 100%;
  background-position: center bottom;
  }
  .maintop_Area {
  margin-top: 40px;
  }
  .maintop_Area .main_bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  }
  .cam_reserveBtn {
  max-width: 80%;
  padding: 13px 0;
  font-size: 15px;
  }
  .ttl_Area h3 {
  font-size: 18px;
  }
  .ttl_Area .gara {
  font-size: 14px;
  }
  .ttl_Area p {
  font-size: 14px;
  }
  
  .maintop_Area .tokuten_txt {
  font-size: 17px;
  margin-bottom: 20px;
  }
  .maintop_Area .tokuten li {
  width: 100%;
  margin-bottom: 10px;
  }
  .maintop_Area .tokuten li p {
  margin-top: 10px;
  }
  .maintop_Area .tokuten li figcaption {
  width: 65px;
  height: 65px;
  left: -10px;
  }
  
  /*メインビジュアル*/
  .maintop_Area {
  margin-bottom: 50px;
  }
  .maintop_Area .main_Ttl {
  padding-top: 50px;
  }
  .maintop_Area .quo {
  margin-bottom: 30px;
  }
  .maintop_Area .main_txt {
  max-width: 90%;
  margin: 40px auto 20px;
  font-size: 14px;
  line-height: 2;
  }
  .flow_Wrap .flow_Box li.white {
  width: 100%;
  font-size: 18px;
  padding: 20px 0;
  }
  .flow_Wrap .flow_Box li.white .cam_reserveBtn {
  margin-top: 10px;
  }
  .flow_Wrap .flow_Box li.flow_arr {
  text-align: center;
  margin: 5px auto;
  }
  .flow_Wrap .flow_Box li.flow_arr img {
  transform: rotate(90deg);
  }
  
  /*モデルルームの見どころ*/
  .highlights_Wrap {
  padding-bottom: 50px;
  }
  .highlights_List li {
  width: 100%;
  }
  .highlights_List li h3 {
  margin-bottom: 10px;
  }
  .highlights_List li p {
  font-size: 13px;
  line-height: 1.6;
  }
  .highlights_List li:nth-child(3) {
  margin-bottom: 50px;
  }
  
  
  /*モデルルームQ&A*/
  .qa_Box {
  margin-bottom: 70px;
  }
  .qa_Box .answer {
  margin-top: 30px;
  max-width: 100%;
  }
  .qa_Box .answer .ans_txt {
  width: 130px;
  top: -23px;
  }
  .qa_Box .answer h3 {
  font-size: 18px;
  }
  .qa_Box .answer p {
  font-size: 14px;
  }
  .qa_Box .answer .quality {
  right: -10px;
  bottom: -70px;
  }
  .qa_Box .answer .time {
  right: -10px;;
  }
  
  
  /*モデルルーム案内図*/
  .map_Area {
  padding-top: 1px;
  }
  .map_Area .map_Box li.gallery_img {
  max-width: 100%;
  margin-bottom: 20px;
  }
  .map_Area .map_Box li.gallery_map {
  width: 100%;
  }
  .map_Area .map_Box li.address p {
  width: 100%;
  font-size: 16px;
  padding: 4px 0 7px;
  }
  .map_Area .map_Box li.address div {
  width: 100%;
  font-size: 20px;
  }
  .map_Area .map_Box li.holiday {
  font-size: 12px;
  }
  
  
  

}