@charset "UTF-8";
#wholewrapper {
  background-image: url("../media/images/top/header.png");
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 160px;
}
@media screen and (max-width: 767px) {
  #wholewrapper {
    padding-top: 0;
    background: none;
  }
}

/*header*/
header {
  position: absolute;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100%;
  height: 190px;
}
@media screen and (max-width: 767px) {
  header {
    background-image: url(../media/images/lower/bg_green.png);
    background-repeat: repeat;
    position: relative;
    top: auto;
    left: auto;
    height: 50px;
    z-index: 900;
    margin-bottom: 0;
  }
}
header .headerinner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: 100%;
}
@media screen and (max-width: 767px) {
  header .headerinner {
    position: relative;
    top: auto;
    left: auto;
  }
}
header .headerinner .contact {
  text-align: right;
}
@media screen and (max-width: 767px) {
  header .headerinner .contact {
    display: none;
  }
}
header .headerinner .contact p {
  line-height: 1;
  margin: 0px;
  padding-top: 15px;
  font-size: 17px;
}
header .headerinner .contact .button {
  margin-top: 20px;
  text-align: right;
}
header .headerinner .contact .button a {
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width: 150px;
  border: solid 1px #999;
  border-radius: 5px;
  background-color: #fff;
  padding: 9px;
  color: #333333;
  font-size: 16px;
  line-height: 1.3;
}
header .headerinner .contact .button a:hover {
  background-color: #663300;
  border: solid 1px #663300;
  color: #fff;
}
header .headerinner .logo {
  width: 100%;
  position: absolute;
  left: 0;
  top: 120px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  header .headerinner .logo {
    top: 10px;
    left: 10px;
    width: auto;
    height: 30px;
    text-align: left;
  }
  header .headerinner .logo img {
    width: auto;
    height: 30px;
  }
}

/*main*/
#main {
  margin-bottom: 100px;
}
#main .main_inner {
  background-image: url("../media/images/top/yellowbase.png");
  background-repeat: no-repeat;
  background-position: center 140px;
}
@media screen and (max-width: 1200px) {
  #main .main_inner {
    background-position-y: 120px;
  }
}
@media screen and (max-width: 1110px) {
  #main .main_inner {
    background-position-y: 100px;
  }
}
@media screen and (max-width: 1060px) {
  #main .main_inner {
    background-position-y: 90px;
  }
}
@media screen and (max-width: 1030px) {
  #main .main_inner {
    background-position-y: 60px;
  }
}
@media screen and (max-width: 1000px) {
  #main .main_inner {
    background-position-y: 40px;
  }
}
@media screen and (max-width: 767px) {
  #main .main_inner {
    background-size: 149% auto;
    background-position-y: 1%;
  }
}
@media screen and (max-width: 480px) {
  #main .main_inner {
    background-size: 100% auto;
    background-position-y: 100px;
  }
}
@media screen and (max-width: 375px) {
  #main .main_inner {
    background-position-y: 70px;
  }
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  .container {
    padding: 0 10px;
  }
}
@media screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

/**
** スライド
**/
.maingraph {
  position: relative;
  text-align: center;
}
.maingraph .maingraph_inner {
  max-width: 1202px;
  margin: 0 auto;
  position: relative;
}
.maingraph .frame {
  position: relative;
  z-index: 700;
  pointer-events: none;
}

#slider {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  margin-bottom: 0;
}
@media screen and (max-width: 1000px) {
  #slider {
    top: 30px;
  }
}
@media screen and (max-width: 767px) {
  #slider {
    top: 0;
  }
}
#slider .slick-slide img {
  margin: 0 auto;
}
#slider ul.slick-dots {
  bottom: -65px;
  z-index: 800;
}
@media screen and (max-width: 1150px) {
  #slider ul.slick-dots {
    bottom: -30px;
  }
}
@media screen and (max-width: 1050px) {
  #slider ul.slick-dots {
    bottom: -10px;
  }
}
@media screen and (max-width: 767px) {
  #slider ul.slick-dots {
    bottom: -5px;
  }
}
#slider ul.slick-dots li button:before {
  color: #fff;
  opacity: 1;
  font-size: 12px;
}
#slider ul.slick-dots li.slick-active button:before {
  color: #ff6600;
  opacity: 1;
}
#slider .slick-prev,
#slider .slick-next {
  z-index: 700;
  width: 53px;
  height: 53px;
  margin-top: -26.5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
@media screen and (max-width: 767px) {
  #slider .slick-prev,
  #slider .slick-next {
    width: 33px;
    height: 33px;
    margin-top: -6.5px;
  }
}
#slider .slick-prev:before,
#slider .slick-next:before {
  opacity: 1;
  content: "";
  display: block;
  width: 53px;
  height: 53px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
@media screen and (max-width: 767px) {
  #slider .slick-prev:before,
  #slider .slick-next:before {
    width: 33px;
    height: 33px;
  }
}
#slider .slick-prev {
  left: 90px;
  background-image: url(../media/images/top/slider/btn_prev_on.png);
}
@media screen and (max-width: 767px) {
  #slider .slick-prev {
    left: 5%;
  }
}
#slider .slick-prev:before {
  background-image: url(../media/images/top/slider/btn_prev.png);
}
#slider .slick-prev:hover:before {
  opacity: 0;
}
#slider .slick-next {
  right: 100px;
  background-image: url(../media/images/top/slider/btn_next_on.png);
}
@media screen and (max-width: 767px) {
  #slider .slick-next {
    right: 5%;
  }
}
#slider .slick-next:before {
  background-image: url(../media/images/top/slider/btn_next.png);
}
#slider .slick-next:hover:before {
  opacity: 0;
}

.subtitle {
  text-align: center;
}

/*globalnav*/
.globalnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-top: 17px;
}
@media screen and (max-width: 767px) {
  .globalnav {
    display: none;
  }
}
.globalnav .namebar {
  width: 250px;
  text-align: center;
  padding-top: 10px;
}
.globalnav .navlist ul {
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
}
.globalnav .navlist ul li {
  list-style-type: none;
  display: table-cell;
  vertical-align: middle;
  width: 155px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .globalnav .navlist ul li {
    width: 100px;
  }
}
.globalnav .navlist ul li a {
  text-decoration: none;
  display: block;
}
.globalnav .navlist ul li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

/*content*/
.content {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 917px;
  background-image: url(../media/images/top/bg_contents_01.png);
  min-height: 917px;
}
@media screen and (max-width: 1000px) {
  .content {
    background-size: auto 80%;
  }
}
@media screen and (max-width: 767px) {
  .content {
    min-height: 0;
    background-image: none;
  }
}

.announce {
  margin: 50px 0 20px;
}
@media screen and (max-width: 767px) {
  .announce {
    margin-top: 20px;
  }
}
.announce p {
  margin: 0;
  font-size: 18px;
  text-align: center;
  color: #000;
  line-height: 1.95;
}
@media screen and (max-width: 767px) {
  .announce p {
    font-size: 17px;
  }
}

.content_upper,
.content_down {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .content_upper,
  .content_down {
    padding: 0 10px;
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .content_upper .col,
  .content_down .col {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
}
.content_upper a,
.content_down a {
  display: block;
}

@media screen and (max-width: 1000px) {
  .section_title_upper,
  .section_title_down {
    padding: 0 10px;
  }
}
.section_title_upper h2,
.section_title_down h2 {
  background-image: url("../media/images/top/illust_forest.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  color: #663300;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 260px;
  padding-right: 260px;
}
@media screen and (max-width: 767px) {
  .section_title_upper h2,
  .section_title_down h2 {
    margin-bottom: 30px;
    min-height: 0;
    background-position: left bottom;
    background-image: url(../media/images/top/bg_title_tree_line.png);
    background-size: auto 6px;
    font-size: 22px;
    text-align: left;
    padding: 0 0 5px 60px;
    position: relative;
  }
  .section_title_upper h2:before,
  .section_title_down h2:before {
    content: "";
    width: 52px;
    height: 34px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    background-image: url(../media/images/top/img_tree.png);
    position: absolute;
    left: 0;
    bottom: 5px;
  }
}

.section_title_down {
  margin-top: 100px;
}
@media screen and (max-width: 767px) {
  .section_title_down {
    margin-top: 40px;
  }
}

.content_down {
  margin-top: 15px;
}
@media screen and (max-width: 767px) {
  .content_down {
    margin-top: 0;
  }
}
.content_down .col:first-of-type {
  position: relative;
  left: -20px;
}
@media screen and (max-width: 1080px) {
  .content_down .col:first-of-type {
    left: auto;
  }
}
.content_down .col:nth-of-type(2) {
  position: relative;
  left: -30px;
}
@media screen and (max-width: 767px) {
  .content_down .col:nth-of-type(2) {
    left: auto;
  }
}
.content_down .col:last-of-type {
  position: relative;
  right: 30px;
}
@media screen and (max-width: 1080px) {
  .content_down .col:last-of-type {
    right: 20px;
  }
}
@media screen and (max-width: 767px) {
  .content_down .col:last-of-type {
    right: auto;
  }
}

/*family and event*/
.photos_content {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 431px;
  background-image: url(../media/images/top/bg_contents_02.png);
  min-height: 431px;
}
@media screen and (max-width: 1000px) {
  .photos_content {
    background-size: auto 80%;
  }
}
@media screen and (max-width: 767px) {
  .photos_content {
    min-height: 0;
    background-image: none;
  }
}

.photos {
  width: 875px;
  margin: 30px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 767px) {
  .photos {
    width: 100%;
    display: block;
  }
}

.meetup,
.event {
  width: 47.5%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .meetup,
  .event {
    width: 100%;
    max-width: 300px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
  }
}
.meetup a,
.event a {
  text-decoration: none;
}
.meetup a h3,
.event a h3 {
  margin: 0;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: -1px;
  left: -30px;
  width: 253px;
  height: 46px;
  padding: 12px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
@media screen and (max-width: 767px) {
  .meetup a h3,
  .event a h3 {
    font-size: 18px;
    width: 200px;
    height: 36px;
    padding: 9px;
    top: -5px;
    left: 0;
    background-size: 100%;
  }
}
.meetup a p,
.event a p {
  padding: 0 15px;
  font-size: 15px;
  line-height: 1.6;
  margin: 10px 0 0;
}
.meetup a:hover h3, .meetup a:hover img,
.event a:hover h3,
.event a:hover img {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

@media screen and (max-width: 767px) {
  .meetup {
    margin-bottom: 40px;
  }
}
.meetup h3 {
  background: url("../media/images/top/label_blue.png");
  /*家族会の青いテープ*/
}

.event {
  margin-left: 5%;
}
@media screen and (max-width: 767px) {
  .event {
    margin-left: auto;
  }
}
.event h3 {
  background: url("../media/images/top/label_pink.png");
  /*イベントのピンクテープ*/
}

/*blog*/
.article p {
  margin: 10px 0 15px;
  text-align: right;
  font-size: 16px;
  line-height: 1.3;
}
.article p a {
  color: #663300;
}
.article p a:hover {
  text-decoration: none;
}

.diary {
  position: relative;
}

#diarySlider {
  visibility: hidden;
  opacity: 0;
  margin: 0 auto;
  width: 1150px;
  padding-left: 10px;
  position: relative;
}
@media screen and (max-width: 1300px) {
  #diarySlider {
    width: 100%;
    padding: 0 83px;
  }
}
@media screen and (max-width: 767px) {
  #diarySlider {
    padding: 0 10px;
  }
}
#diarySlider .slide {
  width: 220px;
  margin-right: 10px;
}
@media screen and (max-width: 767px) {
  #diarySlider .slide {
    width: 100%;
    margin: 0 0 10px;
  }
  #diarySlider .slide:nth-of-type(n+6) {
    display: none;
  }
}
#diarySlider .slide a {
  display: block;
  height: 100%;
  text-decoration: none;
  background-color: #fff;
  border-radius: 10px;
  border: solid 1px #fff;
  padding: 20px;
  word-break: break-all;
}
#diarySlider .slide a:hover {
  background-color: #e3d2c9;
  border: solid 1px #663300;
}
#diarySlider .slide .thumbnail {
  text-align: center;
  margin-bottom: 15px;
  overflow: hidden;
}
#diarySlider .slide .thumbnail span {
  display: block;
  height: 130px;
}
#diarySlider .slide .thumbnail span.image {
  background-size: cover;
  background-position: center;
}
#diarySlider .slide .thumbnail span.no_image {
  background: #f3f3f3;
}
#diarySlider .slide .thumbnail span.no_image:after {
  content: "No Image";
  font-family: sans-serif;
  line-height: 130px;
  color: #999;
}
@media screen and (max-width: 767px) {
  #diarySlider .slide .thumbnail span {
    height: 200px;
  }
  #diarySlider .slide .thumbnail span.no_image {
    display: none;
  }
}
#diarySlider .slide h4 {
  margin: 0 0 12px;
  color: #666666;
  font-size: 15px;
  line-height: 1.3;
}
#diarySlider .slide h5 {
  margin: 0 0 13px;
  font-size: 17px;
  font-weight: bold;
  color: #339900;
  line-height: 1.5;
  min-height: 2.8em;
}
#diarySlider .slide .text {
  line-height: 1.65;
  color: #000;
  font-size: 15px;
}
#diarySlider .slide .text p {
  margin: 0;
}
#diarySlider .slide .text img,
#diarySlider .slide .text ul.gallery {
  display: none;
}
#diarySlider .slick-prev,
#diarySlider .slick-next {
  width: 53px;
  height: 53px;
  margin-top: -26.5px;
  z-index: 700;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
@media screen and (max-width: 767px) {
  #diarySlider .slick-prev,
  #diarySlider .slick-next {
    width: 33px;
    height: 33px;
    margin-top: -6.5px;
  }
}
#diarySlider .slick-prev:before,
#diarySlider .slick-next:before {
  opacity: 1;
  content: "";
  display: block;
  width: 53px;
  height: 53px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
@media screen and (max-width: 767px) {
  #diarySlider .slick-prev:before,
  #diarySlider .slick-next:before {
    width: 33px;
    height: 33px;
  }
}
#diarySlider .slick-prev {
  left: -90px;
  background-image: url(../media/images/top/arrow_lt_on.png);
}
@media screen and (max-width: 1300px) {
  #diarySlider .slick-prev {
    left: 10px;
  }
}
#diarySlider .slick-prev:before {
  background-image: url(../media/images/top/arrow_lt.png);
}
#diarySlider .slick-prev:hover:before {
  opacity: 0;
}
#diarySlider .slick-next {
  right: -80px;
  background-image: url(../media/images/top/arrow_rt_on.png);
}
@media screen and (max-width: 1300px) {
  #diarySlider .slick-next {
    right: 20px;
  }
}
#diarySlider .slick-next:before {
  background-image: url(../media/images/top/arrow_rt.png);
}
#diarySlider .slick-next:hover:before {
  opacity: 0;
}

ul.bannerList {
  max-width: 860px;
  margin: 30px auto 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  ul.bannerList {
    padding: 0 10px;
  }
}
@media screen and (max-width: 767px) {
  ul.bannerList {
    display: block;
  }
}
ul.bannerList > li {
  list-style-type: none;
  width: 29%;
  margin-left: 7%;
}
ul.bannerList > li:first-of-type {
  margin-left: 0;
}
@media screen and (max-width: 767px) {
  ul.bannerList > li {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-bottom: 10px;
  }
}
ul.bannerList > li a {
  text-decoration: none;
}
ul.bannerList > li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
}

/*# sourceMappingURL=top.css.map */