@charset "UTF-8";

.page-template-page-cowlife{
  background-color: #eef0d5;
}
.container{
    height: 90vh;
    width: 100vw;
    display: flex;
    scroll-snap-type: x mandatory;
    overflow: auto;
    overflow-y:hidden;
}
section{
    height: 90vh;
    width: 100vw;
    flex: none;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* nav */
nav{
  height: 111px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.page-template-page-cowlife h1{
	text-align: center;
  margin: 18px 0 !important;
}
h1 span {
	display: inline-flex;
  color: #ffffff;
  font-size: 2.25rem;
  font-weight: 700;
  background-color: #fa7b7b;
  border: 3px solid #f54646;
  border-radius: 50px;
  padding: 5px 5px 8px;
  width: 400px;
  height: 75px;
  align-items: center;
  justify-content: center;
}

/* 牛の生活を見る */
.swiper{
  width: calc(100% - 80px);
  height: 657px;
  margin: 0 auto;
}
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  width: 100%;
  text-align: center;
  text-align: center;
}
.swiper-slide img {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  width: 100%;
  vertical-align: bottom;
}
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{
  position:static !important;
  position: fixed !important;
  bottom: 0 !important;
  height: 10px;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background-color: #107580 !important;
}

.swiper-button-next::after{
  color: #107580 !important;
}

.swiper-button-prev::after{
  color: #107580 !important;
}

.container section:nth-child(2){
  background: #e2fcff;
}
.container section:nth-child(3){
  background: #d0eaff;
}
.container section:nth-child(4){
  background: #fce824;
}
.container section:nth-child(5){
  background: #107580;
}

.container section .content{
  max-width: 800px;
  text-align: center;
}

.container section .content h2{
  font-size: 4em;
  color: #111;
  text-align: center;
}
.container section .content p{
  font-size: 1.3em;
  line-height: 1.4em;
  text-align: center;
}