@charset "utf-8";



#page #content .container, 

#page #primary {

  padding: 0;

  margin: 0;

  width: 100%;

  overflow: hidden;

}

.single .entry-header, .page .entry-header {

  display: none;

}

.page-wrap {

  padding-top: 0;

}



/******************/

/* キャッチコピー */

/******************/

.top-copy {

  text-align: center;

  margin: 50px 0;

}

.top-copy header {

  font-size: 200%;

  margin: 20px 0;

  letter-spacing: 0.5em;

}  

.top-copy p {

  margin: 0;

  padding: 0;

  font-size: 120%;

  line-height: 2.5;

  letter-spacing: 0.1em;

}  



/******************************/

/* アピールポイントタイル表示 */

/******************************/



.feature-wrapper {

  max-width: 1250px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  align-content: space-around;

}

.feature-sec-1, .feature-sec-2, .feature-sec-3, .feature-sec-4 {

  flex: 1 1 400px;

/*  height: auto; */

  margin-bottom: 50px;

  position: relative;

  text-align: center;

  overflow: hidden;

/*  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 2px 2px 5px rgba(63, 32, 12, 0.5); */

}

.feature-sec-1, .feature-sec-2, .feature-sec-3, .feature-sec-4 {

  max-width: 400px;

}



.feature-caption {

  background-color: #f3ebe4;

  position: absolute !important;

  border-bottom-right-radius: 10px;

  z-index: 999;

  padding: 5px;

  text-align: left!important;

  letter-spacing: 0.1em;

  top: 0;

  left: 0;

  font-weight: bold;

}  



/* 画像を暗くしてキャプションを表示する */

.feature-sec-1::before,

.feature-sec-2::before,

.feature-sec-3::before,

.feature-sec-4::before,

.feature-sec-5::before {

  background-color: #000000;

  opacity: 0;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 100;

  content: "";

  transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

}

.feature-sec-1::before img,

.feature-sec-2::before img,

.feature-sec-3::before img,

.feature-sec-4::before img

.feature-sec-5::before img {

  display: block;

  margin-bottom: 0 !important;

  transform: scale(1, 1);

  -moz-transform: scale(1, 1);

  -webkit-transform: scale(1, 1);

  -o-transform: scale(1, 1);

  -ms-transform: scale(1, 1);

  -moz-transform-origin: center center;

  -webkit-transform-origin: center center;

  -o-transform-origin: center center;

  -ms-transform-origin: center center;

  -webkit-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -moz-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -ms-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -o-transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

}





.feature-sec-1::after,

.feature-sec-2::after,

.feature-sec-3::after,

.feature-sec-4::after,

.feature-sec-5::after {

  opacity: 0;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  width: 100%;

  display: inline-block;

  position: absolute;

  top: 50%;

  margin-top: -9px;

  left: 0;

  content: "詳細を見る";

  color: #fff;

  letter-spacing: 0.06em;

  z-index: 101;

  line-height: 24px;

  background: url(/img/common/ico_arr.png) no-repeat 66px 8px;

  padding-left: 7px;

  box-sizing: border-box;

  transform: translate3d(0px, 6px, 0px) !important;

  -webkit-transform: translate3d(0px, 6px, 0px) !important;

  -moz-transform: translate3d(0px, 6px, 0px) !important;

  -ms-transform: translate3d(0px, 6px, 0px) !important;

  -o-transform: translate3d(0px, 6px, 0px) !important;

  transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -webkit-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -moz-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -ms-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

  -o-transition: all 400ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;

}

.feature-sec-1:hover,

.feature-sec-2:hover,

.feature-sec-3:hover,

.feature-sec-4:hover,

.feature-sec-5:hover {

  box-shadow: 2px 2px 5px rgba(63, 32, 12, 0.5); 

  cursor: pointer;

}  

.feature-sec-1:hover::before,

.feature-sec-2:hover::before,

.feature-sec-3:hover::before,

.feature-sec-4:hover::before,

.feature-sec-5:hover::before {

  opacity: 0.6;

 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

}



.feature-sec-1:hover img,

.feature-sec-2:hover img,

.feature-sec-3:hover img,

.feature-sec-4:hover img,

.feature-sec-5:hover img {

  transform: scale(1.1, 1.1);

  -moz-transform: scale(1.1, 1.1);

  -webkit-transform: scale(1.1, 1.1);

  -o-transform: scale(1.1, 1.1);

  -ms-transform: scale(1.1, 1.1);

}

.feature-sec-1:hover .feature-caption,

.feature-sec-2:hover .feature-caption,

.feature-sec-3:hover .feature-caption,

.feature-sec-4:hover .feature-caption,

.feature-sec-5:hover .feature-caption {

  background-color: #41210c;

  color: #f3ebe4;

}  

.feature-sec-1:hover::after,

.feature-sec-2:hover::after,

.feature-sec-3:hover::after,

.feature-sec-4:hover::after,

.feature-sec-5:hover::after {

  opacity: 1;

  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  transform: translate3d(0px, 0px, 0px) !important;

  -webkit-transform: translate3d(0px, 0px, 0px) !important;

  -moz-transform: translate3d(0px, 0px, 0px) !important;

  -ms-transform: translate3d(0px, 0px, 0px) !important;

  -o-transform: translate3d(0px, 0px, 0px) !important;

}



/**********************/

/* お知らせタイル表示 */

/**********************/



.top-info-cntnr {

  width: 90%;

  margin: 0 auto;

}  

.top-info-header {

  width: 50%;

  font-size: 150%;

  text-align: center;

  margin: 30px auto;

  padding: 10px 0;

  border-bottom: 2px solid #000;

  border-top: 2px solid #000;

}

.top-info-box {

  display: flex;

  width: 100%;

  margin: 0 auto;

  flex-wrap: wrap;

  justify-content: space-evenly;

  align-content: space-around;

}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

  .top-info-box {

    justify-content: space-around;

  }    

}

.top-info-item {

  width: 350px;

  height: 250px;

/*  border: 1px solid #f00; */

  background-size: cover;

  position: relative;

  transition: opacity 0.3s;

  margin-bottom: 50px;

  align-self: center;

}



.top-info-item:hover {

  opacity: 0.5;

}  

.top-info-item-label {

  position: absolute;

  top: 50%;

  left: 50%;

  text-align:center;

  width: 230px;

  font-size: 110%;

  font-weight: bold;

  color: #fff;

  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, 1px 1px 1px #000;

  transform: translateX(-50%) translateY(-70%);

}

.top-info-item-date {

  position: absolute;

  font-size: small;

  padding-right: 5px;

  font-style: italic;

  bottom: 0;

  right: 0;

  color: #fff;

  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, 1px 1px 1px #000;

}



/*****************************/

/* Facebook ページプラグイン */

/*****************************/

.fb-cntnr {

  width: 100%;

}  

.fb-page {

   display: block!important;

   margin: 0 auto;

   width: 500px;

}



/******************/

/* メディアクエリ *

/******************/

@media only screen and (max-width: 600px) {

  .top-copy {

    margin: 0 30px 30px;

  }    

  .top-copy header {

    font-size: 150%;

  }

  .top-copy p {

    font-size: 100%;

    line-height: 1.5;

  }    

  

  .feature-sec-1, .feature-sec-2, .feature-sec-3, .feature-sec-4 {

    max-width: 400px;

  }

  .top-info-box {

    width: 80%;

    justify-content: space-around;

  }

}        

/* Mobile Portrait Size */

@media only screen and (max-width: 479px) {

  .fb-page {

    width: 350px;

  }

  .feature-sec-1, .feature-sec-2, .feature-sec-3, .feature-sec-4 {

    max-width: 350px;

  }

  .top-info-item {

    max-width: 350px;

  }    

}  

@media only screen and (max-width: 320px) {

  .feature-sec-1, .feature-sec-2, .feature-sec-3, .feature-sec-4 {

    max-width: 300px;

  }  

  .top-info-item {

    max-width: 300px;

  }

  .fb-page {

    width: 300px;

  }

}