@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
}

img {
  border: 0;
}

body > img {
  display: none;
}

header.sp {
  height: 52px;
}
header.sp .kagome_logo {
  width: 65px;
  height: 38px;
  margin-left: 12px;
}

#content {
  position: relative;
  width: 100%;
  color: #FFF;
  font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;
}
@media screen and (max-width: 640px) {
  #content {
    font-size: 12px;
    line-height: 2em;
  }
}
@media screen and (min-width: 641px) {
  #content {
    font-size: 11px;
    line-height: 2em;
  }
}
@media screen and (min-width: 959px) {
  #content {
    font-size: 13px;
    line-height: 2em;
  }
}

@media screen and (max-width: 640px) {
  #content a.blank_icon {
    background: url(/ys100/chisan/sub_common/images/blank_icon.png?v=160531) no-repeat;
    background-position: right center;
    background-size: 10px;
    padding-right: 14px;
  }
}
@media screen and (min-width: 641px) {
  #content a.blank_icon {
    background: url(/ys100/chisan/sub_common/images/blank_icon.png?v=160531) no-repeat;
    background-position: right center;
    background-size: 12px;
    padding-right: 15px;
  }
}

.header_wrap {
  background: #FFF;
  width: 100%;
}

.footer_wrap {
  width: 100%;
}

#wrap {
  position: relative;
  width: 100% !important;
  padding: 0;
}
@media screen and (max-width: 640px) {
  #wrap {
    margin-bottom: 156px;
  }
}

div#ff02 .u01 {
  display: none;
}

div#ff02 {
  margin-top: 0;
}

div.sp .to_top {
  display: none;
}

.base, .title_area, .farmers {
  position: relative;
}
.base img, .title_area img, .farmers img {
  width: 100%;
}
@media screen and (max-width: 640px) {
  .base .wide, .title_area .wide, .farmers .wide {
    display: none;
  }
}
@media screen and (min-width: 641px) {
  .base .narrow, .title_area .narrow, .farmers .narrow {
    display: none;
  }
}

.effect {
  opacity: 0;
}

.effect.appear {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  opacity: 1;
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
body {
  background-color: #40a6cf;
}

.background {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1000;
}
@media screen and (max-width: 640px) {
  .background {
    background: #40a6cf url("/ys100/chisan/sub_common/images/bg_narrow.jpg?v=160531") center bottom no-repeat;
    background-size: cover;
  }
}
@media screen and (min-width: 641px) {
  .background {
    background: #40a6cf url("/ys100/chisan/sub_common/images/bg_wide.jpg?v=160531") center bottom no-repeat;
    background-size: cover;
  }
}

@media screen and (max-width: 640px) {
  .scroll_top_area {
    position: relative;
    width: 100%;
  }
  .scroll_top_area .scroll_top_inner {
    position: relative;
    width: 100%;
    text-align: right;
  }
  .scroll_top_area .scroll_top_inner a.scroll_top_btn {
    position: relative;
    display: inline-block;
    width: 10.4%;
    margin-right: 3.86667%;
    margin-bottom: 3.86667%;
  }
  .scroll_top_area .scroll_top_inner a.scroll_top_btn img {
    width: 100%;
  }
}
@media screen and (min-width: 641px) {
  .scroll_top_area {
    position: relative;
    width: 100%;
    top: 0;
    text-align: right;
  }
  .scroll_top_area .scroll_top_inner {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 960px;
    text-align: right;
  }
  .scroll_top_area .scroll_top_inner a.scroll_top_btn {
    position: relative;
    display: inline-block;
    width: 5.83333%;
    margin-right: 2.08333%;
    margin-bottom: 2.08333%;
    cursor: pointer;
  }
  .scroll_top_area .scroll_top_inner a.scroll_top_btn img {
    width: 100%;
  }
}

.farmer_btn, .farmers a.farmer {
  text-decoration: none;
}
.farmer_btn .date, .farmers a.farmer .date {
  font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #FFF;
  text-align: center;
  margin-bottom: 5.55556%;
  line-height: 1em;
  letter-spacing: 1px;
}
.farmer_btn .figure, .farmers a.farmer .figure {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 5.55556%;
  border-radius: 26.22222% 26.22222% 26.22222% 26.22222% / 50% 50% 50% 50%;
  z-index: 1;
}
.farmer_btn .figure img, .farmers a.farmer .figure img {
  border-radius: 26.22222% 26.22222% 26.22222% 26.22222% / 50% 50% 50% 50%;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.farmer_btn .name, .farmers a.farmer .name {
  position: relative;
  width: 100%;
  margin: 0 auto 0;
}
@media screen and (min-width: 641px) {
  .farmer_btn .date, .farmers a.farmer .date {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
  }
  .farmer_btn .name, .farmers a.farmer .name {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
  }
  .farmer_btn:hover .date, .farmers a.farmer:hover .date {
    opacity: 0.6;
  }
  .farmer_btn:hover .figure img, .farmers a.farmer:hover .figure img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.15);
    transform: scale(1.1, 1.1);
  }
  .farmer_btn:hover .name, .farmers a.farmer:hover .name {
    opacity: 0.6;
  }
}

.product_farmer_btn {
  text-decoration: none;
}
.product_farmer_btn.coming_soon {
  pointer-events: none;
}
.product_farmer_btn .word {
  position: relative;
  width: 100%;
  margin: 0 auto 6.27063%;
}
.product_farmer_btn .figure {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 3.46535%;
  border-radius: 17.49175% 17.49175% 17.49175% 17.49175% / 50% 50% 50% 50%;
  z-index: 1;
}
.product_farmer_btn .figure img {
  border-radius: 17.49175% 17.49175% 17.49175% 17.49175% / 50% 50% 50% 50%;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.product_farmer_btn .balloon {
  position: absolute;
  width: 23.92739%;
  top: 0;
  z-index: 1;
}
.product_farmer_btn .name {
  position: relative;
  width: 100%;
  margin: 0 auto 0;
}
@media screen and (max-width: 640px) {
  .product_farmer_btn .balloon {
    margin-left: -7.09571%;
    margin-top: 12.37624%;
  }
}
@media screen and (min-width: 641px) {
  .product_farmer_btn .word {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
  }
  .product_farmer_btn .name {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
  }
  .product_farmer_btn .balloon {
    margin-left: -11.22715%;
    margin-top: 9.92167%;
  }
  .product_farmer_btn:hover .word {
    opacity: 0.6;
  }
  .product_farmer_btn:hover .figure img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.15);
    transform: scale(1.1, 1.1);
  }
  .product_farmer_btn:hover .name {
    opacity: 0.6;
  }
}

a.hoverScale {
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
@media screen and (min-width: 641px) {
  a.hoverScale {
    cursor: pointer;
  }
  a.hoverScale:hover {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.15);
    transform: scale(1.1, 1.1);
  }
}

a.hoverBtn {
  position: relative;
}
a.hoverBtn .up {
  -webkit-transition: opacity 0.20s ease-out;
  -moz-transition: opacity 0.20s ease-out;
  -ms-transition: opacity 0.20s ease-out;
  -o-transition: opacity 0.20s ease-out;
  transition: opacity 0.20s ease-out;
}
a.hoverBtn .hover {
  position: absolute;
  top: 0;
  left: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.20s ease-out;
  -moz-transition: opacity 0.20s ease-out;
  -ms-transition: opacity 0.20s ease-out;
  -o-transition: opacity 0.20s ease-out;
  transition: opacity 0.20s ease-out;
}
@media screen and (min-width: 641px) {
  a.hoverBtn:hover .up {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  a.hoverBtn:hover .hover {
    opacity: 1;
  }
}

.title_area {
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .title_area .title {
    position: relative;
    width: 87.73333%;
    margin: 22.13333% auto 13.73333%;
  }
}
@media screen and (min-width: 641px) {
  .title_area {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 0;
  }
  .title_area .title {
    width: 45.625%;
    margin: 13.54167% auto 6.66667%;
  }
}

.farmers {
  padding-bottom: 1px;
}
@media screen and (max-width: 640px) {
  .farmers {
    width: 60%;
    margin: 0 auto 8.53333%;
  }
  .farmers .list {
    position: relative;
    width: 100%;
    padding-bottom: 8.53333%;
    overflow: hidden;
  }
  .farmers .list a.farmer {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 16.66667%;
  }
  .farmers .list a.farmer.hidden {
    opacity: 0;
    display: none;
  }
  .farmers .more_button {
    display: block;
    margin: 0 auto;
    background: url("../../assets/images/common/more_button.png") top left no-repeat;
    background-size: contain;
    padding-top: 11.11111%;
    margin-bottom: 44.44444%;
    width: 92%;
  }
  .farmers .more_button img {
    width: 100%;
    opacity: 0;
    transition: opacity cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms;
  }
  .farmers .more_button.hidden {
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
  }
}
@media screen and (min-width: 641px) {
  .farmers {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 0;
  }
  .farmers .list {
    position: relative;
    width: 88.125%;
    margin: 0 auto 1.77305%;
    overflow: hidden;
    letter-spacing: -.40em;
  }
  .farmers .list a.farmer {
    position: relative;
    display: inline-block;
    letter-spacing: normal;
    width: 27.89598%;
    margin-right: 8.15603%;
    margin-bottom: 5.43735%;
  }
  .farmers .list a.farmer:nth-child(3n), .farmers .list a.farmer:last-child {
    margin-right: 0;
  }
  .farmers .list a.farmer.hidden {
    opacity: 0;
    display: none;
  }
  .farmers .more_button {
    display: block;
    margin: 0 auto;
    background: url("../../assets/images/common/more_button.png") top left no-repeat;
    background-size: contain;
    margin-bottom: 9.45626%;
    width: 236px;
  }
  .farmers .more_button img {
    width: 100%;
    opacity: 0;
    transition: opacity cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms;
  }
  .farmers .more_button:hover img {
    opacity: 1;
  }
  .farmers .more_button.hidden {
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
  }
}
/* IPAD */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .farmers .list{ display: flex; flex-flow: row wrap;}
}