@charset "UTF-8";
/* CSS Document */

/*==================================================
main
==================================================*/
.plan .main {
width: 100%;
position: relative;
}
.plan .main figure img {
width: 100%;
height: 356px;
-o-object-fit: cover;
object-fit: cover;
}
.plan .main .photoCap {
font-size: min(2vw, 9px);
line-height: 1.4em;
text-align: right;
position: absolute;
right: 1em;
bottom: -2em;
}

@media screen and (min-width: 1200px) {
  .plan .main figure img {
  height: 100%;
  }
}
@media screen and (max-width: 750px) {
  .plan .main figure img {
  height: auto;
  }
  .plan .main .photoCap {
  font-size: 2.2vw;
  }
}


/*==================================================
planCont
==================================================*/
.planCont {
max-width: 750px;
margin: 0 auto;
padding: 110px 35px 70px;
color: #4f2600;
}
.planCont h2 {
color: #ad8b76;
font-size: 33px;
line-height: 1.4em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 2em;
}
.planCont .read h3 {
font-size: min(3vw, 24px);
line-height: 1.8em;
letter-spacing: 0.1em;
margin-bottom: 2em;
text-align: center;
}
/*imgArea*/
.planCont .imgArea {
width: 100%;
max-width: 540px;
margin: 0 auto 80px;
}
@media screen and (max-width: 750px) {
  .planCont {
  padding: 20% 0 6%;
  }
  .planCont .inner {
  width: 92%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  }
  .planCont h2 {
  font-size: 5.5vw;
  line-height: 1.4em;
  margin-bottom: 1.5em;
  }
  .planCont .read h3 {
  font-size: 5vw;
  line-height: 1.8em;
  }
  .planCont .imgArea {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 14%;
  }
}


/*==================================================
priceArea
==================================================*/
.priceArea {
width: 92%;
max-width: 540px;
margin: 0 auto 8%;
}
.priceArea h3 {
color: #ad8b76;
font-size: min(5vw, 26px);
line-height: 1.4em;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 1em;
}
.priceArea h4 {
color: #4f2600;
font-size: 18px;
font-size: min(3.8vw, 18px);
line-height: 1.4em;
margin-bottom: 0.6em;
}
.priceArea table {
width: 100%;
text-align: center;
}
.priceArea th {
background-color: #5f3b21;
border-bottom: #f8f8f8 10px solid;
color: #FFF;
font-size: 16px;
line-height: 1.4em;
padding: 0.2em 0 0.3em;
}
.priceArea th:not(:last-child) {
border-right: #f8f8f8 1px solid;
}
.priceArea tr:nth-of-type(2) td {
border-top: #4f2600 1px solid;
}
.priceArea tr:nth-of-type(2) td:nth-of-type(1) {
border-top: #b29076 1px solid;
}
.priceArea td {
background-color: #FFF;
border-right: #4f2600 1px solid;
border-bottom: #4f2600 1px solid;
color: #333;
font-size: 20px;
line-height: 1.4em;
}
.priceArea td:nth-of-type(1) {
background-color: #b29076;
border-right: #b29076 1px solid;
border-bottom: #f8f8f8 1px solid;
color: #FFF;
font-size: 23px;
line-height: 1.4em;
padding: 0.2em 0 0.3em;
}
.priceArea tr:last-of-type td:nth-of-type(1) {
border-bottom: #b29076 1px solid;
}
.priceArea .cap {
color: #333;
font-size: min(2vw, 12px);
line-height: 1.5em;
padding-top: 1em;
text-align: right;
}
@media screen and (max-width: 750px) {
  .priceArea {
  margin: 0 auto 10%;
  }
  .priceArea h3 {
  font-size: 5vw;
  }
  .priceArea h4 {
  font-size: 3.8vw;
  }
  .priceArea th {
  font-size: 3.4vw;
  }
  .priceArea td {
  font-size: 3.6vw;
  }
  .priceArea td:nth-of-type(1) {
  font-size: 4vw;
  padding: 0.2em 0 0.25em;
  }
  .priceArea .cap {
  font-size: 2.2vw;
  padding-top: 1em;
  }
}


/*==================================================
town
==================================================*/
.town {
padding: 120px 0 120px;
}
.town .inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 35px;
color: #FFF;
}
.town .read h3 {
font-size: min(3vw, 25px);
line-height: 1.8em;
letter-spacing: 0.1em;
margin-bottom: 1.2em;
text-align: center;
}
.town .read p {
font-size: min(2vw, 15px);
line-height: 2.5em;
letter-spacing: 0.05em;
margin-bottom: 4em;
text-align: center;
}
.imgArea {
max-width: 660px;
margin: 0 auto;
}

.town .imgArea .cap {
color: #FFF;
font-size: min(2vw, 12px);
line-height: 1.5em;
padding-top: 0;
text-align: right;
}

.town .cap {
font-size: min(1vw, 10px);
line-height: 1.5em;
text-align: right;
padding-top: 0.5em;
margin-bottom: 5em;
}
.town .guide {
width: calc(100% - 2px);
border:#B29076 1px solid;
background-color: #F3F1EA;
display: flex;
}
.town .guide dt {
width: 30%;
background-color: #B29076;
display: flex;
align-items: center;
justify-content: center;
font-size: min(1.6vw, 18px);
line-height: 1.5em;
text-align: center;
}
.town .guide dd {
width: 70%;
display: flex;
justify-content: space-between;
}
.town .guide dd img {
width: 20px;
height: 100%;
}
.town .guide dd p {
color: #4f2600;
font-size: min(1.3vw, 14px);
line-height: 1.8em;
padding: 1em;
}

.town .guide dd p a {
  color: #4f2600;
}

@media screen and (max-width: 750px) {
  .town {
  padding: 14% 0 18%;
  }
  .town .inner {
  width: 92%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  }
  .town .read h3 {
  font-size: 5vw;
  line-height: 1.8em;
  }
  .town .read p {
  font-size: 3.8vw;
  line-height: 2.2em;
  margin-bottom: 2.5em;
  }
  .town .cap {
  font-size: 2.5vw;
  padding-top: 1em;
  margin-bottom: 3em;
  }
  .town .priceArea .cap {
  font-size: 2.2vw;
  padding-top: 1em;
  }
  .town .guide {
  width: calc(100% - 2px);
  border:#B29076 1px solid;
  background-color: #F3F1EA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
  .town .guide dt {
  width: 100%;
  font-size: 4.5vw;
  line-height: 1.5em;
  text-align: center;
  padding: 0.4em 0 0;
  }
  .town .guide dd {
  width: 100%;
  display: block;
  }
  .town .guide dd figure {
  width: 100%;
  height: 15px;
  margin: 0 auto;
  line-height: 0;
  }
  .town .guide dd img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  }
  .town .guide dd p {
  color: #4f2600;
  font-size: 3.5vw;
  line-height: 1.8em;
  padding: 1em 1.5em;
  font-weight: 600;
  }
}

/*==================================================
map
==================================================*/
.map {
padding: 120px 0 90px;
}
.map .inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 35px;
color: #4f2600;
}
.map h2 {
color: #ad8b76;
font-size: 33px;
line-height: 1.4em;
font-weight: bold;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 6%;
}
.map figure {
width: 100%;
margin-bottom: 4%;
opacity: 0;
}
.map figure.delighter {
animation-duration: 2s;
animation-fill-mode: both;
}
.map figure.delighter.started {
animation-name: fadeIn;
}
.map .txt {
font-size: min(1.4vw, 14px);
line-height: 2.5em;
font-weight: bold;
text-align: center;
letter-spacing: 0.05em;
}
.map .cap {
font-family: 'Noto Sans JP', sans-serif;
font-size: min(1.1vw,11px);
line-height: 1.5em;
}
@media screen and (max-width: 750px) {
  .map {
  padding: 14% 0 14%;
  }
  .map .inner {
  width: 92%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  }
  .map h2 {
  font-size: 5vw;
  line-height: 1.4em;
  margin-bottom: 10%;
  }
  .map figure {
  width: 100%;
  margin-bottom: 4%;
  }
  .map .txt {
  font-size: 3.2vw;
  line-height: 2em;
  text-align: center;
  }
  .map .cap {
  font-size: 2.5vw;
  line-height: 1.5em;
  }
}

/*==================================================
outline
==================================================*/
.outline {
padding: 110px 0 90px;
color: #FFF;
}
.outline .inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 35px;
color: #FFF;
}
.outline h2 {
color: #ad8b76;
font-size: 33px;
line-height: 1.4em;
font-weight: 600;
text-align: center;
letter-spacing: 0.1em;
margin-bottom: 2em;
}
.outline table {
width: 100%;
background-color: #FFF;
color: #333;
}
.outline th,
.outline td {
font-family: 'Noto Sans JP', sans-serif;
font-size: min(2vw, 15px);
line-height: 1.3;
letter-spacing: 0.05em;
font-weight: 400;
padding: 1em;
border-bottom: #A78576 1px solid;
}
.outline tr:last-of-type th,
.outline tr:last-of-type td {
border-bottom: none;
}
.outline th {
white-space: nowrap;
border-right: #A78576 1px solid;
background-color: #F3F1EA;
}
.outline .cap {
font-family: 'Noto Sans JP', sans-serif;
font-size: min(1.1vw,11px);
line-height: 1.5em;
text-align: left;
padding-top: 4em;
}
@media screen and (max-width: 750px) {
  .outline {
  padding: 14% 0 14%;
  }
  .outline .inner {
  width: 92%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  }
  .outline h2 {
  font-size: 5.5vw;
  line-height: 1.4em;
  margin-bottom: 1.5em;
  }
  .outline th,
  .outline td {
  display: block;
  width: calc(100% - 2em);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.8vw;
  line-height: 1.3;
  text-align: left;
  }
  .outline th {
  padding: 0.6em 1em;
  border-right: none;
  border-bottom: none;
  }
  .outline .cap {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.5vw;
  line-height: 1.5em;
  }
}