@charset "euc-jp";
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);


button {
border: none;
outline: none;
background: transparent;
}
.fixed_btn{
position: fixed;
bottom: 15px;
right: 15px;
color: #fff;
background-color: #ff9a66;
border-radius: 50%;
width: 154px;
height: 154px;
padding: 0;
font-weight: 700;
z-index:9999;
box-shadow: 2px 4px #8d6532;
cursor: pointer;
}
.fixed_btn p{
text-align: center;
font-size: 1.1em;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  -webkit-text-size-adjust:100%;
}
.btn img{
width:14px;
padding-left: 3px;
}
@media (max-width: 414px) {
.fixed_btn{
bottom: 10px; 
right: 10px;
width: 90px;
height: 90px;
font-size:11px;
}
.btn img{
width:10px;
padding-left: 2px;
}
}

/* slider 
------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
}
.bxslider{   
  margin: 0px;
}
.bx-wrapper {
  background-color: transparent;
  margin: 0px auto;
  border: none;
  box-shadow: none;
  position: relative;
}
.bx-wrapper img {
  display: block;
  margin: 0px auto;
}
.bx-viewport {
  border: none !important;
  left: 0 !important;
}
.box {
  position:relative;
  margin: 0;
  padding: 0;
}
.slogan {
  z-index: 10;
  color: #FFF;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}  
.slogan h1{
  font-size: 4.5em;
  border-bottom: 3px solid #FFF;
  text-shadow:1px 1px 3px #ddd;
}   
.slogan h1 span{
  font-size: 0.7em;
  padding: 0;
  margin-bottom: -20px;
  display: block;
  text-shadow:1px 1px 3px #ddd;
}   
.slogan p{
  font-size: 1.5em;
  line-height: 2;
  margin-top: 20px;
  text-shadow:1px 1px 3px #ddd;
}   
.box .background {
  position: relative;
  z-index: 1;
}
.box .background::after{
  content: '';
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display:block;
} 
.slider {
  height: 100vh;
  top:0;
  left:0;
  margin: auto;
  text-align:center;
  background: radial-gradient(rgba(255,255,255,0.1), #000000);
}
.slider img{
  object-fit:cover;
  width:100%;
  height: 100vh;
  margin: auto;
  opacity: 0.7;
}
@media screen and (max-width: 650px) {
.slogan {
  width: 95%;
}
.slogan h1{
  font-size: 2.5em;
}
.box .slogan h1 span{
  margin-bottom: -5px;
}   
.slogan p{
  font-size: 1.2em;
} 
.slider {
  height: 65vh;
}
.slider img{
  height: 65vh;
} 
}  
@media screen and (max-width: 340px) {
.slogan h1{
  font-size: 2.3em;
}
}  


/* スクロール 動くアニメーション */
.box a {
  z-index: 10;
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 10px 10px 70px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
.box a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 60px;
  background: #fff;
}
.box a::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.online_shop {
  width: 50%;
  padding-bottom: 30px;
  display: inline-block;
}
@media screen and (max-width: 650px) {
.box a {
  padding: 10px 10px 37px;
  font-size: 12px;
}
.box a::after {
  height: 30px;
}
.online_shop {
  width: 100%;
}
}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
  	margin-bottom: 1px;
	color: #1b2538;
}
.cp_qa a {
  text-decoration: none;
}
.cp_qa #sec01 {
      background: url(http://www.pailandfarm.jp/img/sec01_bg.jpg) no-repeat 100% 100%;
      background-position: center left;
}
.cp_qa #sec02 {
      background: url(http://www.pailandfarm.jp/img/sec02_bg.jpg) no-repeat 100% 100%;
      background-position: center left;
}
.cp_qa #sec03 {
	background: url(http://www.pailandfarm.jp/img/sec03_bg.jpg) no-repeat 100% 100%;
      background-position: center left;
}
.cp_qa #sec04 {
	background: url(http://www.pailandfarm.jp/img/sec04_bg.jpg) no-repeat 100% 100%;
      background-position: center left;
}
.cp_qa #sec05 {
	background: url(http://www.pailandfarm.jp/img/sec05_bg.jpg) no-repeat 100% 100%;
      background-position: center left;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
@media screen and (max-width: 650px) {
.cp_qa #sec01,.cp_qa #sec02,.cp_qa #sec03,.cp_qa #sec04,.cp_qa #sec05{
      background-size: cover;
}
}
/* コンテンツ */
.cp_qa .cp_actab label {
        font-size: 5em;
	font-weight: bold;
        color: #FFF;
	line-height: 1.6;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 3em 1em 1.5em;
	cursor: pointer;
  z-index: 100;
}
.cp_qa :hover {
	opacity: 0.9;
}
/* 内容 */
.cp_qa .cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.5s ease;
	        transition: max-height 0.5s ease;
	background: #ffffff;
}
.cp_qa .cp_actab .cp_actab-content p {
        text-align: center;
        padding-bottom: 40px;
        line-height: 23px;
        letter-spacing: 0.05em;
}
/* コンテンツを開いた時の仕様 */

/* --内容の高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 100em;
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
@media screen and (max-width: 650px) {
.cp_qa .cp_actab .cp_actab-content {
  max-width: 90%;
  margin: auto;
}
.cp_qa br {
  display: none;
}
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 200em;
}
.cp_qa .cp_actab label {
  font-size: 3em;
  padding: 1em 0.5em;
}
.cp_actab-content figure {
  margin-top: 30px;
}
h2.news {
  padding-top: 50px;
}
}

/* 新着情報・フェイスブック */
.topics {
  width: 100%;
  margin-top: 20px;
}
.topics dl {
  display: flex;  
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
}
.topics dt {
  padding-bottom: 5px;
  margin-right: 50px;
}
.topics dd {
  text-align: left;
}
.facebook {
  width: 350px;
  height: 500px;
}
@media screen and (max-width: 650px) {
.topics {
  width: 95%;
  margin: auto;
}
.topics dt {
  margin-right: 30px;
}
}

/* YOUTUBE */
#youtube {
  text-align: center;
  background: #ececed;
  padding: 40px 0; 
}
#youtube figure{
  padding: 0 10px;
}
#youtube p{
  padding: 0 30px;
  margin-top: 20px;
}

/* メディア掲載情報 */
#media{
  text-align: center;
  padding: 60px 0; 
}
#media figure{
  width: 360px;
  margin: auto;
}
@media screen and (max-width: 650px) {
#media figure{
  width: 350px;
}
}