@charset "utf-8";
/* CSS Document */

/*--------------------------------------------------------

基本設定

--------------------------------------------------------*/
* {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
  list-style: none;
  -webkit-text-size-adjust: none;
  text-decoration: none;
  list-style: none;
  -moz-appearance: none;
  box-sizing: border-box;
  background-color: transparent;
  line-height: 1;
  font-weight: 400;
  font-family: 'Lora', 'Shippori Mincho', serif;
  font-feature-settings: "palt";
  letter-spacing: 0.75px;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
}
body {
  font-family: 'Lora', 'Shippori Mincho', serif;
  color: #331e13;
  font-size: 16px;
  -webkit-appearance: none;
}
img {
  max-width: 100%;
  height: auto;
  border: 0px;
}

a, a img {
  max-width: 100%;
  border: 0px;
  height: auto;
}
h2{font-size: 5vw;text-align: center;}
h2 span{display: block; font-size: 2vw;text-align: center;}
h3 {}

/*--------------------------------------------------------

表示設定

--------------------------------------------------------*/
.pc_only{
display: block;
}
.sp_only{
  display: none;
}
.mb_only{
  display: none;
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 560px) {
.mb_only{
  display: block;
}
}
/*==================================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:3.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fade_right{
    opacity: 0;
}

/*==================================================
ふわっ
===================================*/
.fadeUp_left{
animation-name:fadeAnime_left;
animation-duration:3.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeAnime_left{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUp_left{
    opacity: 0;
}
/*==================================================
ふわっ
===================================*/
.fadeUp_bottom{
animation-name:fadeAnime_bottom;
animation-duration:3.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeAnime_bottom{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUp_bottom{
    opacity: 0;
}


@media screen and (max-width: 1024px) {
.fadeUp,
.fadeUp_left,
.fadeUp_bottom{
animation-name:fadeAnime_bottom;
animation-duration:3.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeAnime_bottom{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUp_bottom{
    opacity: 0;
}
}




/*--------------------------------------------------------

大枠設定

--------------------------------------------------------*/

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top:5vw;
}

#main{
padding: 0;
margin: 0 auto;
}

.anchor {
  height: 130px;
  margin-top: -130px;
}







/*--------------------------------------------------------

ヘッダー設定

--------------------------------------------------------*/
#head{
}
@media screen and (max-width: 1024px) {
#head{
 position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 12vw;
  text-align: center;
  background-color: #FFFFFF;
      padding: 3vw 3vw 3vw 2vw;
  display: flex;
    justify-content: space-between;
    align-items: center;
}
}
@media screen and (max-width: 560px) {
#head{
  height: 75px;
}
}
.headLogo{
  position: fixed;
  top: 20px;
  left: 30px;
  z-index: 9999;
  max-width: 150px;
}
@media screen and (max-width: 1024px) {
.headLogo{
  max-width: 15vw;
  position: static;
}
}
@media screen and (max-width: 560px) {
.headLogo{
  max-width: 23vw;
}
}
.headLogo a img{
}










/*--------------------------------------------------------

メニューボタン設定

--------------------------------------------------------*/
.acMenu{
    position:fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}
  #menuButton {
    width: 50px;
    height: 50px;
  }
  #menuButton span {
    display: block;
    background: #151515;
    width: 30px;
    height: 3px;
    position: absolute;
    left: 12px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
  }
  #menuButton span:first-child {
    top: 14px;
  }
  #menuButton span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
  }
  #menuButton span:last-child {
    bottom: 13px;
  }
  #menuButton.active span:first-child {
    -webkit-transform: translateY(10px) rotate(45deg);
    -moz-transform: translateY(10px) rotate(45deg);
    -ms-transform: translateY(10px) rotate(45deg);
    transform: translateY(10px) rotate(45deg);
  }
  #menuButton.active span:nth-child(2) {
    opacity: 0;
  }
  #menuButton.active span:last-child {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
    }
@media screen and (max-width: 1024px) {
.acMenu{
position: relative;
    top: 0;
    right: 0;
}
}
.acMenu_inner{
display: none;
background-color: #FFFFFF;
    position: fixed;
    width: 290px;
    right: 0px;
    z-index: 999;
    top: 75px;
    border: #dddddd 1px solid;
}
.acMenu_inner a{
display: block;
    padding: 20px;
    border-bottom: #dddddd 1px solid;
}
.acMenu_inner a:last-child{
    border-bottom:none;
}
.acMenu_inner span{
display: block;
padding: 10px;
}
.acMenu_inner span:first-child{
padding-bottom: 0;
}
.acMenu_inner span:last-child{
padding-top: 8px;
}
.kuenstl1 {
  font-size: 0.65em;
}





/*--------------------------------------------------------

スライド画像

--------------------------------------------------------*/
.full div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  text-decoration: none;
}
@media screen and (max-width: 560px) {
.full div {
  height: 70vh;
      margin-top: 25px;
}
}
.full div.img01 {
  background-image: url("http://fattoriegarofalo.jp/images/2000x1200_01.jpg");
}
.full div.img02 {
  background-image: url("http://fattoriegarofalo.jp/images/2000x1200_02.jpg");
}
.full div.img03 {
  background-image: url("http://fattoriegarofalo.jp/images/2000x1200_03.jpg");
}
.full .slick-dots {
    bottom: 4%;
    z-index: +1;
}





/*------------------------------------------

ブランド説明部分

------------------------------------------*/
.no_left_cerest_template{
max-width: 1400px;
margin: 0 auto;
text-align: center;
box-sizing: border-box;
font-feature-settings: "palt";
letter-spacing: 0.85px;
font-size: 18px;
line-height: 1.6;
text-align:center;
color: #151515;
}
.section01 {
background-color: #FFFFFF;
}
.sec01_inner{
text-align: center;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
justify-content: flex-start;
padding-top: 12vw;
position: relative;
overflow: hidden;
}
.title{
padding-top: 100px;
text-align: center;
font-weight: bold;
font-size: 12vw;
color: #EEEEEE;
text-transform: uppercase;
letter-spacing: 0.25vw;
-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
text-orientation: sideways;
line-height: 1.5;
position: sticky;
height: 100vh;
}
@media screen and (max-width: 1024px) {
.sec01_inner {
display: block;
}
.title{
padding-top: 0;
font-size: 10vw;
letter-spacing: 0.25vw;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
height: auto;
}
}
.flex_wrap{
width: 100%;
}
.flex_box{
display: flex;
position: relative;
padding-bottom: 15vw;
}
.flex_box:nth-of-type(2n){
    flex-direction: row-reverse;
}
.img_left{
max-width: 1200px;
width: 100%;
}
.img_left img{
width: 100%;
}
.text_right{
background-color: #FFFFFF;
opacity: 0.95;
padding: 80px 50px 80px 150px;
max-width: 900px;
width: 100%;
position: absolute;
top:400px;
right: 0px;
}
.flex_box:nth-of-type(2n) .text_right{
max-width: 1050px;
width: 100%;
   left: 0;
    padding: 80px 150px 80px 220px;
}
.no_left_title{
font-size:clamp(1.375rem, -0.875rem + 4.5vw, 2.5rem);
line-height: calc( 150% + 3.2 * (100vw - 1200px) / (320 - 1200) );
font-size:36px;
line-height:1.4;
font-weight: bold;
text-align: center;
margin-bottom: 1vw;
}
p{
font-size:clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
text-align: justify;
line-height: calc( 210% + 3.5 * (100vw - 1200px) / (320 - 1200) );
font-size:20px;
line-height:2em;
}
@media screen and (max-width: 1440px) {
.flex_box{
padding-bottom: 30vw;
}
.no_left_title{
font-size:32px;
}
p{
font-size:18px;
line-height:2em;
}
}
@media screen and (max-width: 1024px) {
.flex_box{
display: block;
padding-bottom: 5vw;
}
.img_left{

}
.img_left img{
object-fit: cover;
    height: 50vh;
    width: 100vw;
}
.text_right {
    opacity: 0.95;
    padding: 8vw ;
    max-width: 100%;
    width: 100%;
    position:static;
}
.flex_box:nth-of-type(2n) .text_right{
max-width: 100%;
width: 100%;
    padding: 8vw ;
}

}

@media screen and (max-width: 768px) {
.no_left_title{
font-size:28px;
}
p{
font-size:16px;
line-height:2em;
}
}
@media screen and (max-width: 560px) {
.no_left_title{
font-size:24px;
}
p{
font-size:14px;
line-height:2em;
}

}







/*--------------------------------------------------------

パララックス部分

--------------------------------------------------------*/

/* 背景画像の見えている高さ */
.parallax {
 display: block;
 height: 80vh;
}
/* 背景画像 */
.parallax::before {
  background-image: url(http://fattoriegarofalo.jp/images/intro01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}
.parallax_sp{
display: none;
}
@media screen and (max-width: 1024px) {
.parallax {
display: none;
}
.parallax_sp{
display: block;
  height: 100vh;
}
/* 背景画像 */
.parallax_sp::before {
  background-image: url(http://fattoriegarofalo.jp/images/intro02.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}
}












/*--------------------------------------------------------

商品紹介

--------------------------------------------------------*/
.section02{
background-color: #FFFFFF;
padding: 5vw;
}
.section02_h2{
padding-top: 0;
    text-align: center;
    font-weight: bold;
    color: #EEEEEE;
    text-transform: uppercase;
    letter-spacing: 0.25vw;
    line-height: 1.5;
    font-size: 9vw;
    height: auto;
    margin-bottom: 5vw;
}
.item_block_wrap{
max-width: 1200px;
margin: 40px auto 200px;
}
.midashi_wrap{
text-align: center;
}
.item_block{
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 40px;
}
.link_img{width: 55%;}
.link_img img{width: 100%;}
.link_text{width: 40%; line-height: 1.8; font-size: 18px;}
.item_catch{background-color: #CC0000; color: #FFFFFF; padding:5px 20px; display: inline-block; line-height: 2; margin-bottom: 20px; letter-spacing: -1px;}
.item_name{font-size: 48px;font-weight: bold;margin-bottom: 20px;line-height: 1.4;}
.sub_catch{font-size: 28px; font-weight: bold;margin-bottom: 0px;}
.item_btn{ margin-top: 0px;    text-align: center;}
.item_btn a{background-color: #498A0F;padding:35px; border-radius: 50px; text-align: center; color: #FFFFFF; max-width: 800px;
    width: 80%;
    display: block;
    margin: 0 auto; font-size: 26px;}

@media screen and (max-width: 1480px) {
.item_block{display: block;}
.link_img{ max-width: 800px; width: 100%; margin: 0 auto;}
.link_text{max-width: 650px; width: 90%; margin: 3vw auto; }
.item_name{font-size: 32px;}
.sub_catch{font-size: 22px;}
.link_text{font-size: 17px;}
.item_btn a{font-size: 22px;}
}

@media screen and (max-width: 768px) {
.item_block{margin: 0 auto 20px;}
.item_catch {padding: 5px 10px; margin-bottom: 5px;}
.item_name{font-size: 28px; margin-top: 10px;}
.sub_catch{font-size: 20px;}
.link_text{font-size: 14px;}
.item_btn a{font-size: 16px;padding:25px;}
}


.item_main_images{width: 100%;text-align: center;}
.item_main_images img{width: 100%;}
@media screen and (max-width: 1480px) {
.item_main_images img{
    object-fit: cover;
    height: 400px;
    width: 100vw;}
}



/*--------------------------------------------------------

会社概要

--------------------------------------------------------*/
.section03{
padding: 10vw 0;
background-image: url("http://fattoriegarofalo.jp/images/bg.png");
background-color: rgba(0, 0, 0, .75);
background-blend-mode: overlay;
color: #FFFFFF !important;
}
.section03 .container{
max-width: 860px;
width: 80%;
margin: 0 auto;
font-size: 14px;
padding: 0;
}
.section03 .companyTxt01{
font-size: 1.25em;
}
.section03 .companyTxt02{
    margin: 50px auto;
    max-width: 800px;
}
.section03 .companyTxt02 strong {
    display: block;
    text-align: center;
    margin-bottom: 1em;
font-size: 1.25em;
}
.section03 ul{
    width: 60%;
    margin: 0 auto;
    counter-reset: count 0;
}
.section03 li{
    line-height: 1.6;
    font-size: 1.2em;
    margin-bottom: 20px;
    list-style-position: inside;
margin-left: 20px;
    text-indent: -20px;
    text-align: justify;
}
.section03 li:before {
  content: counter(count) ". ";
  counter-increment: count 1;
      position: relative;
    left: -0.25em;
}
.companyTable{
    font-size: 14px;
}
.companyTable th,.companyTable td{
    padding: 15px 0 15px 0;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    min-width: 100px;
}
.companyTable td p{
line-height: 1.25;
margin-bottom: 1.2em;
font-size: 14px;
}
.flex_td{
display: flex;
flex-wrap: wrap;
}
.flex_td p{
width: calc(95% / 2);
margin:0 5% 20px 0;
}
.flex_td p:nth-of-type(even){
margin:0 0 20px 0;
}
@media screen and (max-width: 768px) {
.section03{
padding: 15vw 0;
}
.section03 .container{
font-size: 12px;
}
.section03 .companyTxt01{
font-size: 1em;
}
.section03 ul{
    width: 90%;
}
.flex_td{
display: block;
}
.flex_td p{
width: 100%;
margin:0 0 20px 0;
}
}





/*--------------------------------------------------------

ページトップ

--------------------------------------------------------*/
.pagetop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 999999;
}
.pagetop a {
	display: block;
	color: #f8f8f8;
	padding: 15px 16px;
	background-color: #515151;
}
.pagetop a i {
	color: #f8f8f8;
	font-size: 24px;
}
.pagetop a:hover {
	background-color: #989898;
}





/*--------------------------------------------------------

フッター

--------------------------------------------------------*/
footer{
background-color: #FFFFFF;
}
footer .container{
padding-top: 3vw;
}
footer ul{
    text-align: center;
}
footer ul li{
    display: inline-block;
    font-size: 1.1rem;
}
footer ul li a{
    padding: 5px 25px;
}
footer ul li a:hover{
    background: url(images/icon.png) no-repeat center left;
}
.copy{
    font-size: 1rem;
    margin: 30px 0 0;
    text-align: center;
}
@media screen and (max-width: 768px) {
footer .container{
padding-top: 10vw;
}
footer ul li{
    display: block;
    line-height: 2;
}
.copy {
    font-size: 0.8em;
    margin: 30px 0 0;
}
}