@charset "UTF-8";
/* ===================================================================
CSS information

 file name  : homepage.css
 author     : Ability Consultant
 style info : トップページ
=================================================================== */
.con_int, .con_spcon .box_slider, .con_faci .box_faci, .con_ban .box_ban ul, .con_rcmd, .con_news, .con_bnr, .con_cui {
  max-width: 1260px;
  margin: auto;
}
@media only screen and (max-width: 1260px) {
  .con_int, .con_spcon .box_slider, .con_faci .box_faci, .con_ban .box_ban ul, .con_rcmd, .con_news, .con_bnr, .con_cui {
    width: 92%;
  }
}

.con_rep .box_rep .box_rep_det:after, .con_rep .box_rep .box_rep_det ul:after {
  content: "";
  display: table;
  clear: both;
}

.con_int .txt_int_en, .con_spcon .box_slider .slide .date, .con_rcmd .box_rcmd li .txtarea h4, .con_news .box_news ul li a .box_date .date, .con_bnr .box_bnr li a .en, .con_insta h3 {
  font-family: 'EB Garamond', serif;
  letter-spacing: 0;
}

.con_rep .box_rep .box_rep_det ul li .box_new em {
  font-family: 'Pinyon Script', cursive;
}

/* -----------------------------------------------------------
	header　メインイメージあり
----------------------------------------------------------- */
header {
  position: relative;
}
.highimg_page header {
  height: 100vh;
  padding: 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .highimg_page header {
    background-image: url(../images/home/img_main-pc.jpg);
  }
}
@media only screen and (max-width: 767px) {
  .highimg_page header {
    background-image: url(../images/home/img_main-sp.jpg);
  }
}
header .main_slide > .slide:not(:first-child) {
  display: none;
}
@media only screen and (min-width: 768px) {
  header .main_slide .img_slide.slide01 {
    background-image: url(../images/home/img_main01-pc.jpg);
  }
}
@media only screen and (max-width: 767px) {
  header .main_slide .img_slide.slide01 {
    background-image: url(../images/home/img_main01-sp.jpg);
  }
}
@media only screen and (min-width: 768px) {
  header .main_slide.mainimgLoadStart .img_slide.slide02 {
    background-image: url(../images/home/img_main02-pc.jpg);
  }
  header .main_slide.mainimgLoadStart .img_slide.slide03 {
    background-image: url(../images/home/img_main03-pc.jpg);
  }
  header .main_slide.mainimgLoadStart .img_slide.slide04 {
    background-image: url(../images/home/img_main04-pc.jpg);
  }
}
@media only screen and (max-width: 767px) {
  header .main_slide.mainimgLoadStart .img_slide.slide02 {
    background-image: url(../images/home/img_main02-sp.jpg);
  }
  header .main_slide.mainimgLoadStart .img_slide.slide03 {
    background-image: url(../images/home/img_main03-sp.jpg);
  }
  header .main_slide.mainimgLoadStart .img_slide.slide04 {
    background-image: url(../images/home/img_main04-sp.jpg);
  }
}
header .main_slide .video_slide {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
}
header .main_slide .video_slide video {
  position: absolute;
}
header .main_slide.narrow_monitor .video_slide {
  height: 100vh;
  width: 100%;
}
header .main_slide.narrow_monitor .video_slide video {
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
header .main_slide.wide_monitor .video_slide video {
  height: auto;
  width: 100%;
  left: 0;
  top: 50vh;
  transform: translateY(-50%);
}

.loading #svg-animation {
  height: 100%;
  width: 100%;
}
.loading #svg-animation .st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}
@media only screen and (max-width: 767px) {
  .loading #svg-animation .st0 {
    height: 20%;
    position: relative;
    height: 0;
  }
}
.loading .bg_loading {
  transition: 1.5s opacity 0s;
  background-color: #f5f5f5;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.loading .bg_loading .box_main_catch {
  margin-top: 0;
}
.loading .bg_loading .box_main_catch .txt_jp {
  color: #444444;
  transition: 1s opacity 3.5s;
  opacity: 0;
}
.loading .bg_loading .box_main_catch .txt_en {
  margin-top: 0;
  color: #444444;
}
.loading.loading_start .bg_loading .box_main_catch .txt_jp {
  opacity: 1;
}
.loading.loading_end .bg_loading {
  opacity: 0;
}

/* -----------------------------------------------------------
	.con_int
----------------------------------------------------------- */
.con_int {
  margin-top: 110px;
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_int {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .con_int {
    margin-top: 12%;
  }
}
.con_int .txt_int_en {
  color: #96ad59;
  font-style: italic;
  letter-spacing: -0.02em;
}
@media only screen and (min-width: 1261px) {
  .con_int .txt_int_en {
    font-size: 165%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_int .txt_int_en {
    font-size: 129%;
  }
}
@media only screen and (max-width: 767px) {
  .con_int .txt_int_en {
    font-size: 100%;
  }
}
.con_int .txt_int_catch {
  margin-top: 17px;
}
@media only screen and (max-width: 767px) {
  .con_int .txt_int_catch {
    margin-top: 4%;
  }
}
.con_int .txt {
  line-height: 2.14286;
  margin-top: 20px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .con_int .txt {
    line-height: 2;
  }
}
@media only screen and (max-width: 767px) {
  .con_int .txt {
    margin-top: 4%;
  }
}
@media only screen and (max-width: 767px) {
  .con_int .txt {
    text-align: left;
  }
}
.con_int .box_int_btn {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .con_int .box_int_btn {
    margin-top: 6%;
  }
}
.con_int .box_int_btn p {
  width: 250px;
  display: block;
}
@media only screen and (max-width: 767px) {
  .con_int .box_int_btn p {
    width: 100%;
  }
}
.con_int .box_int_btn p:not(:first-child) {
  margin-left: 7px;
}
.con_int .box_photo_list {
  display: flex;
}
.con_int .box_photo_list div {
  display: flex;
}

.con_int_photo {
  margin-top: 120px;
  max-width: 1704px;
  width: 92%;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_int_photo {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .con_int_photo {
    margin-top: 10%;
  }
}
@media only screen and (max-width: 767px) {
  .con_int_photo {
    max-width: none;
    width: 300%;
    animation: surusuruL 12s linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
  }
  .con_int_photo .box_int_photo {
    width: 50%;
    float: left;
  }
  .con_int_photo .box_int_photo + .box_int_photo {
    float: right;
  }
  @keyframes surusuruL {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
}
.con_int_photo .box_01 {
  float: left;
  width: 23.47418%;
  margin-left: 0.23474%;
}
@media only screen and (min-width: 1920px) {
  .con_int_photo .box_01 {
    width: 400px;
  }
}
.con_int_photo .box_02 {
  float: left;
  width: 47.41784%;
}
.con_int_photo .box_02 ul {
  overflow: hidden;
}
.con_int_photo .box_02 ul li {
  float: left;
}
.con_int_photo .box_02 ul li.img_int02 {
  margin-left: 0.49505%;
  width: 37.12871%;
  float: left;
}
@media only screen and (min-width: 1920px) {
  .con_int_photo .box_02 ul li.img_int02 {
    margin-left: 4px;
    width: 300px;
  }
}
.con_int_photo .box_02 ul li.img_int03 {
  width: 61.88119%;
  float: right;
}
@media only screen and (min-width: 1920px) {
  .con_int_photo .box_02 ul li.img_int03 {
    width: 500px;
  }
}
.con_int_photo .box_02 ul li.img_int04 {
  width: 64.35644%;
  float: left;
  margin-left: 0.49505%;
  margin-top: 0.49505%;
}
@media only screen and (min-width: 1920px) {
  .con_int_photo .box_02 ul li.img_int04 {
    margin-left: 4px;
    width: 520px;
  }
}
.con_int_photo .box_02 ul li.img_int05 {
  width: 34.65347%;
  float: right;
  margin-top: 0.49505%;
}
@media only screen and (min-width: 1920px) {
  .con_int_photo .box_02 ul li.img_int05 {
    width: 280px;
  }
}
.con_int_photo .box_03 {
  float: right;
  width: 28.6385%;
  margin-left: 0.23474%;
}
@media only screen and (min-width: 1920px) {
  .con_int_photo .box_03 {
    width: 488px;
  }
}

/* -----------------------------------------------------------
	.wrp_spcon
----------------------------------------------------------- */
.wrp_spcon {
  background: url(../images/common/bg_spcon.png) #d5c7b0 repeat 0 0;
}

.con_spcon {
  margin-top: 120px;
  padding: 50px 0 0;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon {
    margin-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon {
    margin-top: 12%;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon {
    padding: 10% 0 0;
  }
}
.con_spcon .box_slider {
  margin-top: 43px;
  padding-bottom: 70px;
  position: relative;
}
.con_spcon .box_slider .slide {
  margin-bottom: 0;
}
.con_spcon .box_slider > .slick-dots {
  position: static;
}
.con_spcon .box_slider > .slick-dots li {
  width: 10px;
  height: 10px;
  margin: auto;
  background-color: #fff;
  border-radius: 50%;
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider > .slick-dots li {
    width: 0.75em;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider > .slick-dots li {
    height: 0.75em;
  }
}
.con_spcon .box_slider > .slick-dots li:not(:first-child) {
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider > .slick-dots li:not(:first-child) {
    margin-left: 0.75em;
  }
}
.con_spcon .box_slider > .slick-dots li.slick-active {
  background-color: #96ad59;
}
.con_spcon .box_slider > .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
}
.con_spcon .box_slider > .slick-dots li button:before {
  content: "";
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider {
    margin-top: 8%;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider {
    padding-bottom: 8%;
  }
}
.con_spcon .box_slider.slick-dotted {
  padding-bottom: 45px;
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider.slick-dotted {
    padding-bottom: 8%;
  }
}
.con_spcon .box_slider .slick-list {
  overflow: visible;
}
.con_spcon .box_slider .slide {
  padding: 9px;
  background-color: #fff;
  border: 1px solid #96ad59;
  box-shadow: -6px 6px 1em 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide {
    padding: 1em;
  }
}
@media only screen and (min-width: 768px) {
  .con_spcon .box_slider .slide {
    display: flex;
  }
}
.con_spcon .box_slider .slide .date {
  position: absolute;
  left: 20px;
  top: -20px;
  height: 0;
  height: 100px;
  width: 100px;
  z-index: 1;
  line-height: 1;
  color: #fff;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .date {
    width: 20%;
  }
}
.con_spcon .box_slider .slide .date:before {
  content: "";
  display: block;
  background: linear-gradient(#705833, #402b0b);
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  border-radius: 50px;
  padding-bottom: 100%;
}
.con_spcon .box_slider .slide .date p {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.con_spcon .box_slider .slide .date p span {
  display: block;
  position: absolute;
  left: 0;
  bottom: 45%;
  right: 0;
}
@media only screen and (min-width: 768px) {
  .con_spcon .box_slider .slide .date p span {
    font-size: 215%;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .date p span {
    font-size: 143%;
  }
}
.con_spcon .box_slider .slide .date p em {
  display: block;
  position: absolute;
  left: 0;
  top: 60%;
  right: 0;
}
@media only screen and (min-width: 768px) {
  .con_spcon .box_slider .slide .photo {
    width: 40.25765%;
  }
}
.con_spcon .box_slider .slide .photo div {
  margin-bottom: 0;
}
.con_spcon .box_slider .slide .photo div .slide {
  margin-bottom: 0;
}
.con_spcon .box_slider .slide .photo div > .slick-dots {
  bottom: 20px;
  left: 0;
  position: absolute;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .photo div > .slick-dots {
    bottom: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .photo div > .slick-dots {
    bottom: 1em;
  }
}
.con_spcon .box_slider .slide .photo div > .slick-dots li {
  width: 10px;
  height: 10px;
  margin: auto;
  background-color: #fff;
  border-radius: 50%;
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .photo div > .slick-dots li {
    width: 0.75em;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .photo div > .slick-dots li {
    height: 0.75em;
  }
}
.con_spcon .box_slider .slide .photo div > .slick-dots li:not(:first-child) {
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .photo div > .slick-dots li:not(:first-child) {
    margin-left: 0.75em;
  }
}
.con_spcon .box_slider .slide .photo div > .slick-dots li.slick-active {
  background-color: #96ad59;
}
.con_spcon .box_slider .slide .photo div > .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
}
.con_spcon .box_slider .slide .photo div > .slick-dots li button:before {
  content: "";
}
@media only screen and (min-width: 768px) and (min-width: 1261px) {
  .con_spcon .box_slider .slide .photo div {
    width: 500px;
  }
}

.con_spcon .box_slider .slide .photo div p {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.con_spcon .box_slider .slide .photo div p.no_img {
  position: relative;
  background-color: rgba(191, 191, 191, 0.25);
  padding-bottom: 66%;
}
.con_spcon .box_slider .slide .photo div p.no_img:before {
  content: "";
  display: block;
  width: 40%;
  max-width: 174px;
  height: 40px;
  background: url(../images/header/h_logo_b.png) no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.con_spcon .box_slider .slide .photo div p img {
  max-width: none;
  position: absolute;
}
.con_spcon .box_slider .slide .photo div p.yoko img {
  top: 0;
  bottom: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.con_spcon .box_slider .slide .photo div p.tate img {
  width: 100%;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 1920px) {
  .con_spcon .box_slider .slide .photo div p {
    width: 500px !important;
  }
}
.con_spcon .box_slider .slide .txtarea {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .con_spcon .box_slider .slide .txtarea {
    width: 59.58132%;
    padding: 10px 30px 0;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .con_spcon .box_slider .slide .txtarea {
    width: 740px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .txtarea {
    padding: 0 1.5em;
  }
}

@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea {
    padding: 6% 0 0;
  }
}
.con_spcon .box_slider .slide .txtarea:after {
  content: "";
  display: block;
  background-color: #96ad59;
}
@media only screen and (min-width: 768px) {
  .con_spcon .box_slider .slide .txtarea:after {
    position: absolute;
    width: 8px;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea:after {
    height: .25em;
    width: 100%;
  }
}
.con_spcon .box_slider .slide .txtarea > div .cate {
  color: #fff;
  padding: 0 0.5em;
  background-color: #96ad59;
  min-width: 100px;
  display: inline-block;
  text-align: center;
}
.con_spcon .box_slider .slide .txtarea > div h4 {
  margin-top: 30px;
  border-bottom: 3px double #96ad59;
  font-weight: normal;
  color: #758c37;
  padding-bottom: 0.25em;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .txtarea > div h4 {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea > div h4 {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 1261px) {
  .con_spcon .box_slider .slide .txtarea > div h4 {
    font-size: 143%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .txtarea > div h4 {
    font-size: 129%;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea > div h4 {
    font-size: 115%;
  }
}
.con_spcon .box_slider .slide .txtarea > div .txt {
  margin-top: 30px;
  line-height: 1.875;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .txtarea > div .txt {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea > div .txt {
    margin-top: 1em;
  }
}
@media only screen and (min-width: 1261px) {
  .con_spcon .box_slider .slide .txtarea > div .txt {
    font-size: 115%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .txtarea > div .txt {
    font-size: 93%;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea > div .txt {
    font-size: 86%;
  }
}
.con_spcon .box_slider .slide .txtarea .btn_more {
  margin-top: 30px;
  margin-bottom: 1em;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_spcon .box_slider .slide .txtarea .btn_more {
    margin-top: 0.5em;
  }
}
@media only screen and (max-width: 767px) {
  .con_spcon .box_slider .slide .txtarea .btn_more {
    margin-top: 1em;
  }
}

/* -----------------------------------------------------------
	.con_ppat_fair
----------------------------------------------------------- */
.con_ppat_plan {
  max-width: 1221px;
  margin-right: auto;
  margin-left: auto;
}

/* -----------------------------------------------------------
.con_plan
----------------------------------------------------------- */
.wrp_plan {
  background-color: #f5f5f5;
}

.con_plan {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

/* -----------------------------------------------------------
.con_faci
----------------------------------------------------------- */
.wrp_faci {
  margin-top: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .wrp_faci {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .wrp_faci {
    margin-top: 12%;
  }
}

.txt_faci_int {
  margin-top: 15px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .txt_faci_int {
    margin-top: 4%;
  }
}

.con_faci {
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .con_faci {
    margin-top: 6%;
  }
}
.con_faci .parallax-window {
  padding-bottom: 800px;
  background: transparent;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_faci .parallax-window {
    padding-bottom: 500px;
  }
}
@media only screen and (max-width: 767px) {
  .con_faci .parallax-window {
    padding-bottom: 300px;
  }
}
.con_faci .img_faci {
  padding-bottom: 70%;
  background: url(../images/home/img_faci-sp.jpg) no-repeat center center;
  position: relative;
  z-index: 2;
}
.con_faci .box_faci {
  padding: 40px 0;
  color: #fff;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .con_faci .box_faci {
    padding: 6% 0 6% 0;
  }
}
.con_faci .box_faci:before {
  content: "";
  display: block;
  position: absolute;
  left: -1000px;
  top: 0;
  right: -1000px;
  bottom: 0;
  background-color: #5f4e3a;
  z-index: 0;
}
.con_faci .box_faci:after {
  content: "";
  display: block;
  position: absolute;
  left: -1000px;
  top: -100px;
  right: -1000px;
  bottom: -100px;
  background-color: #5f4e3a;
  z-index: -1;
}
@media only screen and (min-width: 768px) {
  .con_faci .box_faci {
    display: table;
  }
}
.con_faci .box_faci .box_faci_det {
  position: relative;
  z-index: 1;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .con_faci .box_faci .box_faci_det {
    display: table-cell;
    padding-right: 2em;
  }
}
.con_faci .box_faci .box_faci_det .txt {
  margin-top: 1em;
}
.con_faci .box_faci .box_btn {
  margin-top: 0;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .con_faci .box_faci .box_btn {
    margin-top: 8%;
  }
}

.con_ban {
  padding: 90px 0 60px;
  background-color: #f5f5f5;
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_ban {
    padding: 70px 0 40px;
  }
}
@media only screen and (max-width: 767px) {
  .con_ban {
    padding: 12% 0 0;
  }
}
.con_ban h4 {
  font-weight: normal;
  text-align: center;
}
.con_ban .box_ban {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_ban .box_ban {
    margin-top: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .con_ban .box_ban {
    margin-top: 6%;
  }
}
@media only screen and (min-width: 768px) {
  .con_ban .box_ban ul {
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 768px) {
  .con_ban .box_ban ul li {
    width: 49.20635%;
  }
}
.con_ban .box_ban ul li .photo {
  position: relative;
  padding-bottom: 56.45161%;
  background-color: #fff;
}
.con_ban .box_ban ul li .photo span.ic {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
@media only screen and (max-width: 1260px) {
  .con_ban .box_ban ul li .photo span.ic {
    width: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .con_ban .box_ban ul li .photo span.ic {
    top: 5px;
    left: 5px;
  }
}
.con_ban .box_ban ul li .photo > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.con_ban .box_ban ul li div {
  padding: 1.6em 1.25em 1.6em 1.25em;
  padding: 1.6em 1.25em 1.6em 1.25em;
}
@media only screen and (max-width: 767px) {
  .con_ban .box_ban ul li div {
    padding: 1.6em 1em 3em 1em;
  }
}
.con_ban .box_ban ul li div .txt {
  margin-top: 1em;
}
.con_ban .box_ban ul li div .btn_more {
  margin-top: 2em;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_ban .box_ban ul li div .btn_more {
    margin-top: 1em;
  }
}
@media only screen and (max-width: 767px) {
  .con_ban .box_ban ul li div .btn_more {
    margin-top: 1em;
  }
}

/* -----------------------------------------------------------
	con_rcmd
----------------------------------------------------------- */
.con_rcmd {
  margin-top: 145px;
  max-width: 1700px;
  width: 92%;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .con_rcmd {
    margin-top: 12%;
  }
}
.con_rcmd .box_rcmd {
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .con_rcmd .box_rcmd {
    margin-top: 6%;
  }
}
@media only screen and (min-width: 1261px) {
  .con_rcmd .box_rcmd {
    display: flex;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd {
    display: flex;
  }
}
.con_rcmd .box_rcmd li {
  background-color: black;
  position: relative;
  max-width: 556px;
  margin-right: auto;
  margin-left: auto;
}
@media only screen and (min-width: 1261px) {
  .con_rcmd .box_rcmd li {
    width: 556px;
    width: 32.70588%;
  }
  .con_rcmd .box_rcmd li:not(:first-child) {
    margin-left: 0.94118%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd li {
    width: 556px;
    width: 32.70588%;
  }
  .con_rcmd .box_rcmd li:not(:first-child) {
    margin-left: 0.94118%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rcmd .box_rcmd li {
    margin-top: 2%;
  }
}
.con_rcmd .box_rcmd li .txtarea {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.con_rcmd .box_rcmd li .txtarea:before {
  content: "";
  display: block;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.7);
  z-index: 1;
}
@media only screen and (min-width: 1261px) {
  .con_rcmd .box_rcmd li .txtarea:before {
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd li .txtarea:before {
    top: 0.3em;
    bottom: 0.3em;
    right: 0.3em;
    left: 0.3em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd li .txtarea:before {
    top: 0.3em;
    bottom: 0.3em;
    right: 0.3em;
    left: 0.3em;
  }
}
.con_rcmd .box_rcmd li .txtarea:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
  background: url(../images/common/img_pat02.png);
}
.con_rcmd .box_rcmd li .txtarea h4 {
  line-height: 1.6;
  font-weight: normal;
  position: relative;
  z-index: 1;
  min-width: 190px;
}
@media only screen and (min-width: 1261px) {
  .con_rcmd .box_rcmd li .txtarea h4 {
    font-size: 229%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd li .txtarea h4 {
    font-size: 143%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rcmd .box_rcmd li .txtarea h4 {
    font-size: 200%;
  }
}
@media only screen and (min-width: 1014.5px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd li .txtarea h4 {
    font-size: 186%;
  }
}
.con_rcmd .box_rcmd li .txtarea h4 span {
  position: relative;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 0 .5em;
  display: inline-block;
}
.con_rcmd .box_rcmd li .txtarea h4 span:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 2px;
  background-color: #fff;
}
.con_rcmd .box_rcmd li .txtarea p {
  position: relative;
  z-index: 1;
  margin-top: 0.5em;
}
@media only screen and (min-width: 1261px) {
  .con_rcmd .box_rcmd li .txtarea p {
    font-size: 122%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rcmd .box_rcmd li .txtarea p {
    font-size: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rcmd .box_rcmd li .txtarea p {
    font-size: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1013.5px) {
  .con_rcmd .box_rcmd li .txtarea p {
    font-size: 86%;
  }
}

/* -----------------------------------------------------------
	.con_news
----------------------------------------------------------- */
.con_news {
  margin-top: 125px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_news {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .con_news {
    margin-top: 12%;
  }
}
.con_news .box_news {
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .con_news .box_news {
    margin-top: 6%;
  }
}
@media only screen and (min-width: 1261px) {
  .con_news .box_news {
    justify-content: space-between;
    display: flex;
  }
}
@media only screen and (min-width: 1261px) {
  .con_news .box_news ul {
    border-top: 1px solid #bfbfbf;
    width: 48.80952%;
  }
}
@media only screen and (max-width: 1260px) {
  .con_news .box_news ul:first-child {
    border-top: 1px solid #bfbfbf;
  }
}
.con_news .box_news ul li {
  border-bottom: 1px solid #bfbfbf;
}
.con_news .box_news ul li a {
  padding: 25px 0.5em 25px 0.5em;
  display: block;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .con_news .box_news ul li a {
    padding: 1em 0.5em;
  }
}
.con_news .box_news ul li a .box_date {
  display: flex;
  align-items: center;
}
.con_news .box_news ul li a .box_date .date {
  letter-spacing: 0;
  margin-right: 0.25em;
  font-size: 93%;
}
.con_news .box_news ul li a .box_date .cate {
  font-size: 86%;
  border: 1px solid #bfbfbf;
  padding: 0.3em 1em;
  line-height: 1;
  margin-left: 1.5em;
}
.con_news .box_news ul li a .box_date .cate + .cate {
  margin-left: 0.2em;
}
.con_news .box_news ul li a .txt {
  text-align: none;
  margin-top: 0.3em;
}
.con_news .box_news ul li:hover a .txt {
  text-decoration: underline !important;
}
.con_news .box_btn {
  margin-top: 15px;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .con_news .box_btn {
    margin-top: 6%;
  }
}

/* -----------------------------------------------------------
	.con_bnr
----------------------------------------------------------- */
.con_bnr {
  margin-top: 65px;
}
@media only screen and (max-width: 767px) {
  .con_bnr {
    margin-top: 8%;
  }
}
@media only screen and (min-width: 768px) {
  .con_bnr .box_bnr {
    display: flex;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1013.5px) {
  .con_bnr .box_bnr {
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.con_bnr .box_bnr li {
  border: 1px solid #bfbfbf;
}
@media only screen and (min-width: 1261px) {
  .con_bnr .box_bnr li {
    width: 309px;
  }
  .con_bnr .box_bnr li:not(:first-child) {
    margin-left: 8px;
  }
}
@media only screen and (min-width: 1014.5px) and (max-width: 1260px) {
  .con_bnr .box_bnr li {
    width: 309px;
  }
  .con_bnr .box_bnr li:not(:first-child) {
    margin-left: 8px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1013.5px) {
  .con_bnr .box_bnr li {
    width: 49%;
  }
  .con_bnr .box_bnr li:nth-child(n+3) {
    margin-top: 2%;
  }
}
@media only screen and (max-width: 767px) {
  .con_bnr .box_bnr li {
    width: 100%;
  }
  .con_bnr .box_bnr li:not(:first-child) {
    margin-top: 2%;
  }
}
.con_bnr .box_bnr li a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 30px 0 25px;
}
@media only screen and (max-width: 767px) {
  .con_bnr .box_bnr li a {
    padding: 1.5em 1em;
    display: flex;
    align-items: flex-end;
  }
}
.con_bnr .box_bnr li a .en {
  color: #96ad59;
  line-height: 1;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .con_bnr .box_bnr li a .en {
    font-size: 179%;
  }
}
@media only screen and (max-width: 767px) {
  .con_bnr .box_bnr li a .en {
    font-size: 165%;
  }
}
.con_bnr .box_bnr li a .jp {
  margin-top: 0.25em;
}
@media only screen and (min-width: 768px) {
  .con_bnr .box_bnr li a .jp {
    font-size: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .con_bnr .box_bnr li a .jp {
    font-size: 79%;
  }
}
@media only screen and (max-width: 767px) {
  .con_bnr .box_bnr li a .jp {
    margin-top: 0;
    margin-left: 1em;
    line-height: 1.3;
  }
}
.con_bnr .box_bnr li a .jp span:after {
  margin-left: 0.25em;
  content: "→";
}

/* -----------------------------------------------------------
	.con_cui
----------------------------------------------------------- */
.con_cui {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .con_cui {
    align-items: center;
  }
}
.con_cui.cuisine {
  margin-top: 115px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.cuisine {
    margin-top: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine {
    margin-top: 8%;
  }
}
@media only screen and (min-width: 768px) {
  .con_cui.cuisine {
    flex-direction: row-reverse;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine {
    flex-direction: column;
  }
}
@media only screen and (min-width: 1261px) {
  .con_cui.cuisine .photo {
    width: 84.12698%;
    margin-right: -26.19048%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1720px) and (max-width: 1919px) {
  .con_cui.cuisine .photo {
    width: 76.19048%;
    margin-right: -18.25397%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1520px) and (max-width: 1719px) {
  .con_cui.cuisine .photo {
    width: 68.25397%;
    margin-right: -10.31746%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1320px) and (max-width: 1520px) {
  .con_cui.cuisine .photo {
    width: 60.31746%;
    margin-right: -2.38095%;
  }
}
@media only screen and (min-width: 1261px) and (max-width: 1319px) {
  .con_cui.cuisine .photo {
    width: 60.31746%;
    margin-right: -2.38095%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.cuisine .photo {
    width: calc(58% + 5%);
    margin-right: -5%;
  }
}
.con_cui.cuisine .box_cui {
  padding-right: 6.34921%;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.cuisine .box_cui {
    padding-right: 2em;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine .box_cui {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) {
  .con_cui.cuisine .box_cui {
    width: 42.06349%;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine .box_cui {
    padding: 1.6em 1em 0 1em;
  }
}
.con_cui.cuisine .box_cui .txt_catch {
  margin-top: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.cuisine .box_cui .txt_catch {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine .box_cui .txt_catch {
    margin-top: 0.5em;
  }
}
.con_cui.cuisine .box_cui .txt {
  margin-top: 15px;
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine .box_cui .txt {
    margin-top: 0.5em;
  }
}
.con_cui.cuisine .box_cui .btn_more {
  margin-top: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.cuisine .box_cui .btn_more {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.cuisine .box_cui .btn_more {
    margin-top: 0.5em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.dress {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.dress {
    flex-direction: column;
    margin-top: 12%;
  }
}
.con_cui.dress .photo {
  position: relative;
}
@media only screen and (min-width: 1261px) {
  .con_cui.dress .photo {
    width: 59.52381%;
    margin-left: -17.46032%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1600px) and (max-width: 1699px) {
  .con_cui.dress .photo {
    width: 55.55556%;
    margin-left: -13.49206%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1500px) and (max-width: 1599px) {
  .con_cui.dress .photo {
    width: 51.5873%;
    margin-left: -9.52381%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1400px) and (max-width: 1499px) {
  .con_cui.dress .photo {
    width: 47.61905%;
    margin-left: -5.55556%;
  }
}
@media only screen and (min-width: 1261px) and (min-width: 1200px) and (max-width: 1399px) {
  .con_cui.dress .photo {
    width: 43.65079%;
    margin-left: -1.5873%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.dress .photo {
    width: calc(42% + 5%);
    margin-left: -5%;
  }
}
@media only screen and (min-width: 768px) {
  .con_cui.dress .box_cui {
    padding-left: 7.93651%;
    width: 57.93651%;
    max-width: 460px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.dress .box_cui {
    padding-left: 4%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 767px) {
  .con_cui.dress .box_cui {
    padding-left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .con_cui.dress .box_cui {
    padding: 2em 1em 0 1em;
  }
}
.con_cui.dress .box_cui .txt_catch {
  margin-top: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.dress .box_cui .txt_catch {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.dress .box_cui .txt_catch {
    margin-top: 0.5em;
  }
}
.con_cui.dress .box_cui .txt {
  margin-top: 15px;
}
@media only screen and (max-width: 767px) {
  .con_cui.dress .box_cui .txt {
    margin-top: 0.5em;
  }
}
.con_cui.dress .box_cui .btn_more {
  margin-top: 25px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_cui.dress .box_cui .btn_more {
    margin-top: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .con_cui.dress .box_cui .btn_more {
    margin-top: 0.5em;
  }
}

/* -----------------------------------------------------------
	.con_rep
----------------------------------------------------------- */
.con_rep {
  margin-top: 120px;
  max-width: 1700px;
  width: 92%;
  margin-right: auto;
  margin-left: auto;
  background-color: #f5f5f5;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep {
    margin-top: 18%;
  }
}
@media only screen and (min-width: 768px) {
  .con_rep {
    display: flex;
    align-items: center;
  }
}
.con_rep .box_rep {
  padding: 50px 0;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep {
    padding: 35px 0;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep {
    padding: 8% 0 6%;
  }
}
@media only screen and (min-width: 768px) {
  .con_rep .box_rep {
    width: 59.41176%;
  }
}
.con_rep .box_rep .box_rep_det {
  margin-right: auto;
  margin-left: auto;
  width: 92%;
}
@media only screen and (min-width: 768px) {
  .con_rep .box_rep .box_rep_det {
    max-width: 810px;
  }
}
.con_rep .box_rep .box_rep_det .txt_rep {
  margin-top: 1em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det .txt_rep {
    margin-top: 1em;
  }
}
.con_rep .box_rep .box_rep_det ul {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep .box_rep_det ul {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul {
    margin-top: 6%;
  }
}
.con_rep .box_rep .box_rep_det ul li {
  position: relative;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .con_rep .box_rep .box_rep_det ul li {
    width: 49.38272%;
  }
  .con_rep .box_rep .box_rep_det ul li:nth-child(odd) {
    float: left;
  }
  .con_rep .box_rep .box_rep_det ul li:nth-child(even) {
    float: right;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li:nth-child(2) {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li:nth-child(2) {
    margin-top: 4%;
  }
}

.con_rep .box_rep .box_rep_det ul li a {
  display: block;
}
.con_rep .box_rep .box_rep_det ul li .photo {
  padding-bottom: 62.5%;
  overflow: hidden;
  position: relative;
}
.con_rep .box_rep .box_rep_det ul li .photo.no_img {
  position: relative;
  background-color: rgba(191, 191, 191, 0.25);
  padding-bottom: 62.5%;
}
.con_rep .box_rep .box_rep_det ul li .photo.no_img:before {
  content: "";
  display: block;
  width: 40%;
  max-width: 174px;
  height: 40px;
  background: url(../images/header/h_logo_b.png) no-repeat center center;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.con_rep .box_rep .box_rep_det ul li .photo img {
  position: absolute;
}
.con_rep .box_rep .box_rep_det ul li .photo.thin img {
  left: 0;
  right: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}
.con_rep .box_rep .box_rep_det ul li .photo.wide {
  position: relative;
}
.con_rep .box_rep .box_rep_det ul li .photo.wide img {
  top: 0;
  bottom: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.con_rep .box_rep .box_rep_det ul li .box_new {
  width: 90px;
  left: 20px;
  position: absolute;
  top: -20px;
  z-index: 1;
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep .box_rep_det ul li .box_new {
    width: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_new {
    width: 22%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep .box_rep_det ul li .box_new {
    left: -20px;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_new {
    left: -20px;
  }
}
.con_rep .box_rep .box_rep_det ul li .box_new:before {
  content: "";
  display: block;
  border-radius: 50%;
  height: 0;
  width: 100%;
  background-color: #444444;
  padding-bottom: 100%;
}
.con_rep .box_rep .box_rep_det ul li .box_new em {
  display: block;
  line-height: 1;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  text-align: center;
}
@media only screen and (min-width: 1261px) {
  .con_rep .box_rep .box_rep_det ul li .box_new em {
    font-size: 179%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep .box_rep_det ul li .box_new em {
    font-size: 129%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_new em {
    font-size: 129%;
  }
}
.con_rep .box_rep .box_rep_det ul li .box_new span {
  line-height: 1;
  display: block;
  text-align: center;
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  letter-spacing: -0.05em;
}
@media only screen and (min-width: 1261px) {
  .con_rep .box_rep .box_rep_det ul li .box_new span {
    font-size: 93%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep .box_rep_det ul li .box_new span {
    font-size: 79%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_new span {
    font-size: 72%;
  }
}
.con_rep .box_rep .box_rep_det ul li .box_hov {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s;
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_hov {
    background-color: rgba(0, 0, 0, 0.3);
  }
}
@media only screen and (min-width: 1261px) {
  .con_rep .box_rep .box_rep_det ul li .box_hov .txt_name {
    font-size: 200%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_rep .box_rep .box_rep_det ul li .box_hov .txt_name {
    font-size: 129%;
  }
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_hov .txt_name {
    font-size: 129%;
  }
}
.con_rep .box_rep .box_rep_det ul li .box_hov:before {
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: block;
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_hov:before {
    left: .7em;
    top: .7em;
    right: .7em;
    bottom: .7em;
  }
}
.con_rep .box_rep .box_rep_det ul li:hover .box_hov {
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det ul li .box_hov {
    opacity: 1;
  }
}
.con_rep .box_rep .box_rep_det .box_btn {
  margin-top: 15px;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .con_rep .box_rep .box_rep_det .box_btn {
    margin-top: 6%;
  }
}
.con_rep .box_rep .bnr_repo {
  background-color: gray;
  color: #fff;
  text-align: center;
  padding: 30px 0;
  margin-top: 6%;
}
.con_rep .img_rep {
  width: 47.05882%;
  margin-right: -6.47059%;
}

/* -----------------------------------------------------------
	.con_insta
----------------------------------------------------------- */
.con_insta {
  margin-top: 120px;
  background-color: #96ad59;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .con_insta {
    margin-top: 12%;
  }
}
@media only screen and (min-width: 768px) {
  .con_insta {
    max-width: 1700px;
    width: 92%;
    margin-right: auto;
    margin-left: auto;
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .con_insta {
    padding: 8% 0 4%;
  }
}
.con_insta:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: -110px;
  background-color: #96ad59;
  z-index: -1;
}
.con_insta > a {
  text-decoration: none !important;
}
@media only screen and (min-width: 1261px) {
  .con_insta > a {
    width: 21.17647%;
    margin-left: -6.47059%;
  }
}
@media only screen and (min-width: 768px) {
  .con_insta > a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_insta > a {
    width: 18.70588%;
    margin-left: -4%;
  }
}
.con_insta h3 {
  margin-top: 30px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .con_insta h3 {
    margin-top: 0;
  }
}
.con_insta h3 i {
  color: #fff;
  display: block;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1261px) {
  .con_insta h3 i {
    font-size: 358%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_insta h3 i {
    font-size: 286%;
  }
}
@media only screen and (max-width: 767px) {
  .con_insta h3 i {
    font-size: 229%;
  }
}
.con_insta h3 span {
  font-size: 143%;
}
.con_insta h3 span:before {
  content: "\\";
  margin-right: 0.5em;
}
.con_insta h3 span:after {
  content: "/";
  margin-left: 0.5em;
}
.con_insta h3 span {
  position: relative;
  z-index: 1;
}
.con_insta .box_insta {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .con_insta .box_insta {
    width: 85.29412%;
    min-height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .con_insta .box_insta {
    max-width: 1260px;
    margin: auto;
    margin-top: 6%;
  }
}
@media only screen and (max-width: 767px) and (max-width: 1260px) {
  .con_insta .box_insta {
    width: 92%;
  }
}

.con_insta .box_insta li {
  width: 20%;
  -webkit-backface-visibility: hidden;
  float: left;
  overflow: hidden;
  background-color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 1260px) {
  .con_insta .box_insta li {
    width: 25%;
  }
  .con_insta .box_insta li:nth-child(n + 9) {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .con_insta .box_insta li {
    width: 33.33333%;
  }
}
@media only screen and (max-width: 767px) {
  .con_insta .box_insta li:nth-child(10) {
    display: none;
  }
}
.con_insta .box_insta li a {
  display: block;
  padding-bottom: 100%;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.con_insta .box_insta li a img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}