/*! destyle.css v1.0.15 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model */
/* ============================================ */
@import url("https://use.typekit.net/aob0oor.css");
/******************************************************

base

******************************************************/
#Education, #Park, #Gourmet {
  background: #eef3f0; }

.ttl {
  color: #009a44;
  margin-top: 1.8rem;
  line-height: 1.4;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  font-feature-settings: "palt"; }

.kyori {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 0.6rem;
  line-height: 1.4;
  font-feature-settings: "palt"; }

.en-list01 {
  padding-bottom: 10rem; }

.en-list01 li {
  width: 18%;
  margin-top: 3rem; }

@media screen and (max-width: 600px) {
  .en-list01 li {
    width: 30%; }

  .en-list01:after {
    content: "";
    width: 30%; } }
.en-list02 {
  padding-bottom: 6rem; }

.en-list02 li {
  width: 31%; }

@media screen and (max-width: 600px) {
  .en-list02 li {
    width: 47%; } }
.mints {
  position: absolute;
  top: 0;
  right: 0;
  background: #009a44;
  width: 5rem;
  height: 5rem;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  transform: translateX(30%) translateY(-30%);
  font-size: 1.4rem;
  line-height: 5rem;
  font-weight: bold; }

.mints b {
  font-size: 3.2rem;
  font-family: sans-serif;
  font-style: normal; }

.mints.rinsetsu {
  line-height: 1.5rem;
  font-size: 1.5rem;
  padding-top: 1rem; }

.sh-list00 li, .pa-list00 li {
  width: 47%; }

.sh-list01, .sh-list02, .pa-list01 {
  padding-bottom: 4rem; }

.sh-list01 .l-size, .sh-list02 .l-size, .pa-list01 .l-size {
  width: 56%; }

.sh-list01 .m-size, .sh-list02 .m-size, .pa-list01 .m-size {
  width: 41%; }

@media screen and (max-width: 600px) {
  .sh-list01 .l-size, .sh-list02 .l-size, .pa-list01 .l-size {
    width: 100%; }

  .sh-list01 .m-size, .sh-list02 .m-size, .pa-list01 .m-size {
    width: 100%; } }
.sh-list02 .l-size {
  order: 2; }

.sh-list02 .m-size {
  order: 1; }

@media screen and (max-width: 600px) {
  .sh-list02 .l-size {
    order: 1; }

  .sh-list02 .m-size {
    order: 2; } }
.pa-list02 li {
  width: 48.5%; }

@media screen and (max-width: 600px) {
  .pa-list02 li {
    width: 100%; } }
.park-column {
  border: 2px dotted #009a44;
  border-radius: 2rem;
  background: #fff;
  margin-top: 6rem;
  box-sizing: border-box;
  padding: 4rem 5rem; }

.park-column .komidashi {
  color: #009a44;
  font-size: 2.6rem;
  margin-bottom: 1rem; }

.park-column .img {
  position: relative; }

.park-column .img img {
  z-index: 1; }

.park-column .img::after {
  content: "";
  background: #deeae3;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 1.5rem;
  transform: translateX(1.2rem) translateY(1.2rem); }

.park-column .col-ttl {
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  padding-top: 3rem;
  justify-content: space-between;
  border-bottom: 2px dotted #009a44; }

.park-column .col-ttl .name {
  font-weight: bold;
  font-feature-settings: "palt";
  font-size: 2rem;
  line-height: 1.4; }

.park-column .col-ttl .time {
  font-family: sans-serif;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1;
  white-space: nowrap; }

.park-column .col-ttl .time b {
  font-size: 4rem; }

.park-column .lead {
  font-size: 1.4rem;
  margin-top: 1.5rem;
  line-height: 1.8; }

.pa-list03 li {
  width: 30%; }

@media screen and (max-width: 1000px) {
  .pa-list03 li {
    width: 47%; } }
@media screen and (max-width: 600px) {
  .pa-list03 li {
    width: 100%; } }
.me-list01 {
  padding-bottom: 4rem; }

.me-list01 .l-size {
  width: 40%; }

.me-list01 .m-size {
  width: 58%; }

@media screen and (max-width: 600px) {
  .me-list01 .l-size {
    width: 100%; }

  .me-list01 .m-size {
    width: 100%; } }
.me-list00 li {
  width: 31%; }

@media screen and (max-width: 600px) {
  .me-list00 li {
    width: 47%; } }
.go-list01 {
  padding-bottom: 2rem; }

.go-list01 .l-size {
  width: 49%; }

.go-list01 .m-size {
  width: 49%; }

@media screen and (max-width: 600px) {
  .go-list01 .l-size {
    width: 100%; }

  .go-list01 .m-size {
    width: 100%; } }
.go-list00 li {
  width: 48%; }

@media screen and (max-width: 600px) {
  .go-list00 li {
    width: 47%; } }
#Gourmet .img .go-image {
  position: absolute;
  z-index: 2;
  width: 60%;
  bottom: 0;
  right: 0;
  transform: translateX(1rem) translateY(1rem); }

.go-list02 {
  padding-bottom: 4rem; }

.go-list02 li {
  width: 23.5%; }

@media screen and (max-width: 600px) {
  .go-list02 li {
    width: 47%; } }
#lifeinformation {
  width: 90%;
  max-width: 1100px;
  margin: auto;
                                                                /*
h4 { font-size: 18px; letter-spacing: 0.1em; text-align: center; margin-bottom: 20px;
}
*/ }

#lifeinformation h5 {
  background-color: #827158;
  padding: 6px 0;
  color: #fff;
  font-size: 15px;
  font-feature-settings: "palt";
  letter-spacing: 0.2em;
  text-align: center;
  /*border-radius: 20px;*/
  margin-bottom: 10px; }

#lifeinformation ul, #lifeinformation li {
  padding: 0;
  list-style: none; }

#lifeinformation #lifeinfo {
                             /*
max-width: 1000px;
width: 90%;
*/
  margin: auto; }

#lifeinformation #lifeinfo .area .IB .I {
  margin: 1.02041%;
  width: 22.95918%; }

@media (max-width: 760px) and (max-aspect-ratio: 128 / 100) {
  #lifeinformation #lifeinfo .area .IB .I {
    width: 46.93878%; } }
#lifeinformation #lifeinfo .mapblock_wrap {
  margin: 5% auto 1%; }

#lifeinformation .how {
  text-align: center; }

@media screen and (max-width: 640px) {
  #lifeinformation .how {
    font-size: 0.8rem; } }
#lifeinformation #mNav {
  margin: auto; }

#lifeinformation #mNav ul {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  margin-top: 40px;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd; }

#lifeinformation #mNav li {
  color: #000;
  font-size: 1.4rem;
  font-family: sans-serif;
  font-style: normal;
  background-color: #f7f7f7;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  width: 16%;
  text-align: center;
  padding: 1.5rem 0;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  position: relative;
  /*border-radius: 2px;*/
  cursor: pointer;
  transition: background-color 200ms; }

#lifeinformation #mNav li:nth-child(2) {
  width: 28%; }

#lifeinformation #mNav li:nth-child(5) {
  width: 24%; }

#lifeinformation #mNav li:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #a28b55;
  opacity: 0; }

#lifeinformation #mNav li.active, #lifeinformation #mNav li:hover {
  background-color: #fff;
  color: #a28b55; }

#lifeinformation #mNav li.active:after, #lifeinformation #mNav li:hover:after {
  opacity: 1; }

@media screen and (max-width: 800px) {
  #lifeinformation #mNav li {
    width: 33.33333333% !important; } }
@media screen and (max-width: 640px) {
  #lifeinformation #mNav li {
    width: 50% !important;
    font-size: 3.2vw; } }
#lifeinformation #mWrap {
  position: relative;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 3rem;
  padding-bottom: 0rem;
  height: 600px;
  font-feature-settings: "palt";
                                                                                                                                                                                         /*
#side01 { li { &.active, &:hover { .num { background: #b59d5c; } } }
}
#side02 { li { &.active, &:hover { .num { background: #cb7b79; } } }
}
#side03 { li { &.active, &:hover { .num { background: #608ea9; } } }
}
#side04 { li { &.active, &:hover { .num { background: #98ad75; } } }
}
#side05 { li { &.active, &:hover { .num { background: #8f7397; } } }
}
#side06 { li { &.active, &:hover { .num { background: #599987; } } }
}
*/ }

@media screen and (max-width: 800px) {
  #lifeinformation #mWrap {
    height: auto; } }
#lifeinformation #mWrap .sideWrap li {
  position: relative;
  border-bottom: 1px solid #827158;
  padding: 0.6rem 0 0.6rem 2.4rem;
  font-size: 1.3rem;
  line-height: 1.4; }

#lifeinformation #mWrap .sideWrap li span {
  line-height: 1.3; }

#lifeinformation #mWrap .sideWrap li:hover, #lifeinformation #mWrap li.active {
  background: rgba(255, 255, 255, 0.4); }

#lifeinformation #mWrap .sideWrap li:hover .num, #lifeinformation #mWrap li.active .num {
  background: #c19849 !important; }

#lifeinformation #mWrap .sideWrap li:first-child {
  border-top: 1px solid #827158; }

@media screen and (max-width: 800px) {
  #lifeinformation #mWrap li {
    padding: 8px 0 8px 25px; } }
#lifeinformation #mWrap .sideWrap .num {
  background: #76683f;
  color: #fff !important;
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 1rem;
  margin: 2px 0;
  padding: 0;
  border-radius: 50%; }

#lifeinformation #mWrap .sideWrap .num.empty {
  display: none; }

@media screen and (max-width: 800px) {
  #lifeinformation #mWrap .num {
    top: 6px; } }
#lifeinformation #mWrap .sideWrap .txt01 {
  display: block;
  text-align: left;
  font-family: sans-serif;
  font-size: 1.2rem;
  font-feature-settings: "palt"; }

#lifeinformation #mWrap .sideWrap .txt02 {
  display: block;
  text-align: right;
  font-family: sans-serif;
  font-size: 1rem;
  font-feature-settings: "palt";
  white-space: nowrap; }

#lifeinformation #lctMap {
  height: 100%;
  /*width: 66%;*/
  margin-right: 40%;
  background: #9aa; }

@media screen and (max-width: 800px) {
  #lifeinformation #lctMap {
    height: 600px;
    margin-right: 0;
    margin-bottom: 20px; } }
@media screen and (max-width: 640px) {
  #lifeinformation #lctMap {
    height: 320px; } }
#lifeinformation #mSide {
  position: absolute;
  top: 0;
  right: 0;
  width: 37%;
  height: 100%; }

@media screen and (max-width: 800px) {
  #lifeinformation #mSide {
    position: relative;
    width: 100%;
    height: auto; } }
#lifeinformation #mSide .sideWrap {
  width: 100%;
  height: 100%;
  padding-left: 1em;
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0; }

#lifeinformation #mSide .sideWrap a {
  text-decoration: none;
  color: #111;
  padding: 2px 0;
  display: block;
  overflow: hidden;
  display: flex;
  justify-content: space-between; }

@media screen and (max-width: 800px) {
  #lifeinformation #mSide .sideWrap {
    position: static;
    height: auto;
    padding-left: 0; } }
#lifeinformation #mSide .sideWrap.active {
  display: block; }