@charset "utf-8";
@import url( https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,500,700,900|Noto+Serif+JP:400&display=swap );
@import url( https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,500,700,900|Noto+Serif+JP:400&display=swap );

/* 共通css変更 */
#mainContents .container { padding-top: 0; }
#mainContents .container > .contentsWrapper { max-width: 100%; padding: 0; }
#mainContents .container > .contentsWrapper > .wrapper { padding-bottom: 0; }
.scroll { padding:15px 0 10px; }
.scroll table::after { width: 0; }
@media screen and (min-width: 751px) {
  #mainContents.haveSide .container > .contentsWrapper { padding:0; }
}

/* 独自css */
#kns {
  background-image: url("../img/kns_bg01.png");
  line-height: 1.6em;
  font-family: "Noto Serif JP";
  font-size: 1.4rem;
  font-weight: 500;
}
#kns .only_sp { display: inherit; }
#kns .only_pc { display: none; }
#kns h1 { text-align: center; }
#kns .h2_b {
  display: inline-block;
  margin: 0 auto;
  padding: 0 29px;
  text-align: center;
  line-height: 1.4em;
  font-size: 2.4rem;
  color: #543919;
  background-image: url("../img/kns_obj03.png"), url("../img/kns_obj04.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 24px 24px, 24px 24px;
}
#kns .h2_w {
  display: inline-block;
  margin: 0 auto;
  padding: 0 29px;
  text-align: center;
  line-height: 1.4em;
  font-size: 2.4rem;
  color: #FFF;
  background-image: url("../img/kns_obj05.png"), url("../img/kns_obj06.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 24px 24px, 24px 24px;
}
#kns .kns_inner {
  width: 100%;
  margin: 0 auto;
}
#kns .hero_img {
  position: relative;
  z-index: 10;
}
#kns .hero_copy {
  padding: 8vw;
  background-color: rgba( 218, 206, 173, 0.64 );
  line-height: 2em;
  font-size: 1.8rem;
  color: #543919;
}
#kns .ph_image ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
#kns .event {
  padding: 15vw 5vw;
  text-align: center;
}
#kns .event .banner { margin-top: 25px; }
#kns .cont_block {
  padding: 15vw 5vw 0;
  background-color: rgba( 134, 101, 107, 0.8 );
  background-image: url("../img/kns_bg02.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
#kns .area { margin-top: 25px; }
#kns .toggle { display: none; }
#kns .area_title {
  display: block;
  cursor: pointer;
  padding: 4vw;
  border-radius: 5px;
  font-size: 1.8rem;
  color: #fff;
}
#kns #area01 + .area_title { background-color: #A35B3E; }
#kns #area02 + .area_title { background-color: #8D8C41; }
#kns #area03 + .area_title { background-color: #C59A35; }
#kns .area_title{
  background-image: url("../img/kns_obj07.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 30px 30px;
}
#kns .toggle:checked + .area_title { background-image: url("../img/kns_obj08.png"); }
#kns .area_title, #kns .area_content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
}
#kns .area_content {
  height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: all .3s;
}
#kns .toggle:checked + .area_title + .area_content {
  height: auto;
  margin-top: 20px;
  transition: all .3s;
}
#kns .spot {
  margin-top: 30px;
  padding: 30px;
  background-color: rgba( 96, 50, 55, 0.46 );
  border-radius: 30px 0 30px 0;
  font-weight: 300;
  color: #FFF;
}
#kns .spot:first-child { margin-top: 0; }
#kns .spot .spot_info { margin-top: 10px; }
#kns .spot .spot_cat {
  display: inline-block;
  padding: 0 10px;
  background-color: #FFF;
  font-size: 1.3rem;
  font-weight: 700;
  color: #855454;
}
#kns .spot .spot_org {
  margin-top: 20px;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.2em;
}
#kns .spot .spot_name {
  margin-top: 20px;
  font-size: 2.0rem;
}
#kns .spot .spot_txt {
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 2.4em;
}
#kns .spot .spot_det { margin-top: 20px; }
#kns .spot .column { margin-top: 10px; }

#kns .spot .spot_address {
  margin-top: 10px;
  padding-left: 27px;
  font-size: 1.6rem;
  background-image: url("../img/kns_obj09.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 17px 22px;
}
#kns .spot .spot_tel {
  margin-top: 10px;
  padding-left: 27px;
  font-size: 1.6rem;
  background-image: url("../img/kns_obj10.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 17px 22px;
}
#kns .spot .spot_web {
  margin-top: 10px;
  padding-left: 27px;
  font-size: 1.6rem;
  background-image: url("../img/kns_obj11.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 17px 22px;
}
#kns .spot .spot_web a {
  color: #FFF;
  text-decoration: underline;
}
#kns .pro { text-align: center; }
#kns .link_kms {
  padding: 15vw 0;
  text-align: center;
}
#kns .link_kms .banner { margin-top: 25px; }

@media screen and (max-width: 1050px) and (min-width: 751px) {
  #mainContents.haveSide .container > .contentsWrapper {
    min-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0;
  }
}

@media screen and (min-width: 751px) {
  body { min-width: 1280px; }
  #kns { min-width: 1280px; }
  #kns .only_sp { display: none; }
  #kns .only_pc { display: inherit; }
  #kns .kns_inner { width: 1280px; }
  #kns .h2_b {
    min-height: 48px;
    padding: 0 58px;
    font-size: 3.0rem;
    background-size: 48px 48px, 48px 48px;
  }
  #kns .h2_w {
    min-height: 48px;
    padding: 0 58px;
    font-size: 3.0rem;
    background-size: 48px 48px, 48px 48px;
  }
  #kns .hero_copy {
    display: inline-block;
    position: relative;
    margin-top: -60px;
    padding: 64px 100px 64px 140px;
    line-height: 3em;
  }
  #kns .hero_copy_obj {
    position: absolute;
    right: -248px;
    bottom: 60px;
  }
  #kns .hero_copy_obj img {
    max-width: 314px;
    height: auto;
  }
  #kns .ph_image {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: end;
    align-items: end;
    margin-top: -15px;
  }
  #kns .ph_image_obj img {
    max-width: 114px;
    height: 243px;
    margin-right: 38px;
  }
  #kns .ph_image ul {
    max-width: 1004px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
  }
  #kns .event { padding: 120px 0 76px; }
  #kns .event .banner_block {
    display:flex;
    margin-top: 50px;
    justify-content: center;
  }
  #kns .event .banner { margin-top: 0; }
  #kns .event .banner + .banner { margin-left: 50px; }
  #kns .event .banner img { max-width: 615px; }
  #kns .cont_block { padding: 100px 100px 0; }
  #kns .pro { margin-bottom: 98px; }
  #kns .area { margin-top: 46px; }
  #kns .area_title {
    padding: 40px 50px;
    border-radius: 15px;
    font-size: 3.0rem;
    background-position: right 40px center;
    background-size: 60px 60px;
  }
  #kns .toggle:checked + .area_title + .area_content { margin-top: 52px; }

  #kns .spot {
    display: flex;
    align-items: flex-end;
    margin-top: 52px;
    padding: 54px 54px 0 0;
    border-radius: 58px 0 58px 0;
  }
  #kns .spot .spot_ph { width: 386px; }
  #kns .spot .spot_info { width: 561px;  }
  #kns .spot .spot_org { margin-top: 30px; }
  #kns .spot .spot_name { margin-top: 26px; }
  #kns .spot .spot_txt { margin-top: 30px; }
  #kns .spot .spot_det {
    display: flex;
    margin-top: 36px;
    margin-bottom: 48px;
  }
  #kns .spot .spot_item { margin-right: 40px; }
  #kns .spot .spot_item img { max-width: 254px; }
  #kns .spot .column { margin-top: 0; }
  #kns .spot .spot_address {
    margin-top: 0;
    font-size: 2.0rem;
  }
  #kns .spot .spot_address + .spot_address { margin-top: 10px; }
  #kns .spot .spot_tel {
    margin-top: 20px;
    font-size: 2.0rem;
  }
  #kns .spot .spot_tel + .spot_tel { margin-top: 10px; }
  #kns .spot .spot_web {
    margin-top: 20px;
    font-size: 2.0rem;
  }
  #kns .spot .spot_web + .spot_web { margin-top: 10px; }
  #kns .link_kms { padding: 100px 0 120px; }
  #kns .link_kms .banner { margin-top: 74px; }
  #kns .link_kms .banner img { max-width: 645px; }
}
