@charset "utf-8";

/* top image */
.top-image {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: 90vh;
background: #000;
}

.top-image1 { grid-area: 3 / 1 / 9 / 2; 
background: #ffcc00
}
.top-image2 { grid-area: 1 / 2 / 9 / 9;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
border-bottom: 5px solid #000;
}
.top-image2 .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite; }

.top-image2 .src1 {
background-image : url(../image/bg1.png);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../image/bg2.png); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 5s;
}
.top-image2 .src3 {
background-image : url(../image/bg3.png); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 10s;
}
.top-image2 .src4 {
background-image : url(../image/bg4.png); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 1; transform: scale(1, 1);z-index: 9 }
   5% { opacity: 1; transform: scale(1, 1);z-index: 9 }
  25% { opacity: 1; transform: scale(1, 1);z-index: 10 }
  30% { opacity: 1; transform: scale(0.1, 0.1);z-index: 10 }
  31% { opacity: 0; }
 100% { opacity: 0; }
}
.top-image3 { grid-area: 6 / 1 / 8 / 7;
text-align: left;
padding-left: 50px;
z-index: 100;
}
.top-image3 p{
font-size: 48px;
font-weight: bold;
color: #fff;
letter-spacing: 10px;
line-height: 1em;
}
.head-space{
width: auto;
height: 100px;
}
/* top image */

/* --- あいさつ　はじまり ----- */
.greeting {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 90vh;
opacity: 0.99;
border-radius: 0px;
background: rgba(255,255,255);
border-left: 5px solid rgba(255,204,0);
}

.greeting1 { grid-area: 1 / 1 / 9 / 3; 
padding: 20px;
display: none;
}
.greeting img{
width: 100%;
}
.greeting2 { grid-area: 1 / 3 / 9 / 8;
padding: 20px;
padding-top: 100px;   
}
.greeting2 p{
font-size: 14px;
letter-spacing: 3px;
line-height: 2em;
color: #494544;
font-weight: 500;
}
.greeting3 { grid-area: 1 / 8 / 3 / 9;
background: #000;
}
.greeting4 { grid-area: 3 / 8 / 9 / 9;
background: #ffcc00;
}
.greeting5 { grid-area: 8 / 7 / 9 / 9;}
.greeting5 p{
font-size: 24px;
color: #494544;
font-weight: bold;
letter-spacing: 2px;
font-family: "Yuji Boku", serif; 
}
/* --- あいさつ　おわり ----- */

/* --- case　はじまり ----- */
.case {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 800px;
opacity: 0.99;
border-radius: 0px;
}
.case a:hover{
opacity: 1;
}
.case img{
width: 250px;
}
.case1 { grid-area: 1 / 1 / 3 / 2;
background: #000;
}
.case2 { grid-area: 3 / 1 / 9 / 2;
background: #ffcc00;
}
.case3 { grid-area: 1 / 2 / 3 / 9; 
text-align: right;
padding: 10px;
padding-right: 50px;
border-top: 5px solid #ffcc00;
}
.case3 p{
font-size: 32px;
letter-spacing: 5px;
color: #494544;
line-height: 0.2em;
}
.case3 h4{
line-height: 0.5em;
letter-spacing: 3px;
font-size: 14px;
}
.case4 { grid-area: 3 / 2 / 9 / 9;
background: #000
}
.case5 { grid-area: 2 / 2 / 5 / 4; 
padding: 10px;
text-align: center;
color: #fff;
font-size: 14px;
letter-spacing: 5px;
}
.case6 { grid-area: 2 / 4 / 5 / 6; 
padding: 10px;
text-align: center;
color: #fff;
font-size: 14px;
letter-spacing: 5px;
}
.case7 { grid-area: 2 / 6 / 5 / 8; 
padding: 10px;
text-align: center;
color: #fff;
font-size: 14px;
letter-spacing: 5px;
}
.case8 { grid-area: 5 / 2 / 8 / 4; 
padding: 10px;
text-align: center;
color: #fff;
font-size: 14px;
letter-spacing: 5px;
}
.case9 { grid-area: 5 / 4 / 8 / 6; 
padding: 10px;
text-align: center;
color: #fff;
font-size: 14px;
letter-spacing: 5px;
}
.case10 { grid-area: 5 / 6 / 8 / 8; 
padding: 10px;
text-align: center;
color: #fff;
font-size: 14px;
letter-spacing: 5px;
}
.case11 { grid-area: 8 / 2 / 9 / 8; 
text-align: center;
padding:10px;
}
/* --- case　おわり ----- */

/* --- farm　はじまり ----- */
.farm {
display: grid;
grid-template-columns: repeat(8, 1fr) 1.25fr;
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 700px;
opacity: 0.99;
border-radius: 0px;
background: rgba(255,255,255);
border-left: 5px solid rgba(255,204,0);
}

.farm1 { grid-area: 1 / 1 / 3 / 3; 
background-image : url(../image/farm01.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.farm2 { grid-area: 1 / 5 / 3 / 7;
background-image : url(../image/farm02.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.farm3 { grid-area: 3 / 3 / 5 / 5; 
background-image : url(../image/farm03.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.farm4 { grid-area: 3 / 7 / 5 / 9; 
background-image : url(../image/farm07.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;}

.farm5 { grid-area: 5 / 1 / 7 / 3;
background-image : url(../image/farm08.jpg); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.farm6 { grid-area: 5 / 5 / 7 / 7; 
background-image : url(../image/farm05.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;}

.farm7 { grid-area: 7 / 3 / 9 / 5; 
background-image : url(../image/farm06.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.farm8 { grid-area: 1 / 9 / 3 / 10;
background: #000;
padding: 5px;
}
.farm8 p{
font-size: 28px;
font-weight: bold;
text-align: center;
letter-spacing: 5px;
color: #fff;
line-height: 0.5em;
}
.farm8 h4{
line-height: 0.5em;
letter-spacing: 3px;
font-size: 14px;
color: #fff;
text-align: center;
}
.farm9 { grid-area: 3 / 9 / 9 / 10; 
background: #ffcc00;
}
.farm10 { grid-area: 7 / 5 / 9 / 8; 
text-align: left;
padding: 10px;
padding-left: 50px;
color: #494544;
letter-spacing: 3px;
line-height: 1.5em;
font-size: 14px;
}
.farm11 { grid-area: 8 / 8 / 9 / 10; }

.farm2 p{
font-weight: 14px;
letter-spacing: 3px;
line-height: 2em;
color: #494544;
font-weight: 500;
}
/* --- farm　おわり ----- */

/* --- news　はじまり ----- */
.news {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 600px;
opacity: 0.99;
border-radius: 0px;
}
.news a:hover{
opacity: 1;
}
.news img{
width: 250px;
}
.news1 { grid-area: 1 / 1 / 3 / 2;
background: #000;
}
.news2 { grid-area: 3 / 1 / 9 / 2;
background: #ffcc00;
}
.news3 { grid-area: 1 / 2 / 3 / 9; 
text-align: right;
border-top: 5px solid rgba(255,204,0);
}
.news3 p{
padding: 10px;
padding-right: 50px;
font-size: 32px;
letter-spacing: 5px;
color: #494544;
}
.news4 { grid-area: 3 / 2 / 8 / 9;
background: #000;
padding: 20px;
padding-top: 50px;
}
.news5 { grid-area: 8 / 2 / 9 / 9; 
padding: 10px;
text-align: center;
background: #000;
}
/* --- news　おわり ----- */

/* --- access　はじまり ----- */
.access {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 90vh;
opacity: 0.99;
border-radius: 0px;
background: rgba(255,255,255);
border-left: 5px solid rgba(255,204,0);
}

.access1 { grid-area: 3 / 1 / 9 / 8;
padding: 10px;
border-bottom: 5px solid rgba(255,204,0);
}
.access1 iframe{
width: 100%;
height: 100%;
}
.access2 { grid-area: 1 / 1 / 3 / 8;
color: #494544;
font-size: 14px;
font-weight: 300;
letter-spacing: 3px;
line-height: 1.5em;
padding: 20px;
text-align: left;
}
.access3 { grid-area: 1 / 8 / 3 / 9; 
background: #000;
}
.access3sp {
display: none;
}
.access3 p{
padding: 10px;
font-size: 32px;
letter-spacing: 5px;
text-align: center;
color: #fff;   
}
.access4 { grid-area: 3 / 8 / 9 / 9; 
background: #ffcc00;
}
/* --- access　はじまり ----- */

/* --- レスポンシブはじまり ----- */  
@media (max-width: 768px){

/* top image */
.top-image {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: 500px;
background: #000;
}

.top-image1 { grid-area: 3 / 1 / 9 / 2; 
background: #ffcc00
}
.top-image2 { grid-area: 1 / 2 / 9 / 13;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
border-bottom: 5px solid #000;
}
    
.top-image2 .src1 {
background-image : url(../image/bg1-sp.png);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../image/bg2-sp.png); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 5s;
}
.top-image2 .src3 {
background-image : url(../image/bg3-sp.png); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 10s;
}
.top-image2 .src4 {
background-image : url(../image/bg4-sp.png); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 15s;
}

.top-image3 { grid-area: 5 / 1 / 8 / 7;
text-align: left;
padding-left: 10px;
z-index: 100;
}
.top-image3 p{
font-size: 44px;
font-weight: bold;
color: #fff;
letter-spacing: 8px;
line-height: 1em;
}
/* --- あいさつ　はじまり ----- */
.greeting {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 800px;
opacity: 0.99;
border-radius: 0px;
background: rgba(255,255,255);
border-left: 5px solid rgba(255,204,0);
}

.greeting1 { grid-area: 1 / 1 / 3 / 12; 
padding: 5px;
text-align: center;
}
.greeting img{
width: 150px;
}
.greeting2 { grid-area:3 / 1 / 8 / 12;
padding: 5px;
padding-top:75px;   
}
.greeting2 p{
font-size: 12px;
letter-spacing:2px;
line-height: 2em;
color: #494544;
font-weight: 500;
}
.greeting3 { grid-area: 1 / 12 / 3 / 13; 
background: #000;
}
.greeting4 { grid-area: 3 / 12 / 9 / 13;
background: #ffcc00;
}
.greeting5 { grid-area:8 / 1 / 9 / 12;
text-align: right;
padding: 10px;
}
.greeting5 p{
font-size: 14px;
color: #494544;
font-weight: bold;
letter-spacing: 2px;
font-family: "Yuji Boku", serif; 
}
/* --- あいさつ　おわり ----- */

/* --- case　はじまり ----- */
.case {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 700px;
opacity: 0.99;
border-radius: 0px;
}
.case a:hover{
opacity: 1;
}
.case img{
width: 140px;
}
.case1 { grid-area: 1 / 1 / 3 / 2;
background: #000;
}
.case2 { grid-area: 3 / 1 / 13 / 2;
background: #ffcc00;
}
.case3 { grid-area: 1 / 2 / 3 / 13;
text-align: right;
padding: 10px;
padding-right: 10px;
border-top: 5px solid #ffcc00;
}
.case3 p{
font-size: 24px;
letter-spacing: 5px;
color: #494544;
line-height: 0.2em;
}
.case3 h4{
line-height: 0.5em;
letter-spacing: 1px;
font-size: 12px;
}
.case4 { grid-area:3 / 2 / 13 / 13;
background: #000
}
.case5 { grid-area: 3 / 3 / 6 / 7;
padding: 5px;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.case6 { grid-area: 3 / 8 / 6 / 12; 
padding: 5px;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.case7 { grid-area: 6 / 3 / 9 / 7; 
padding: 5px;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.case8 { grid-area: 6 / 8 / 9 / 12;
padding: 5px;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.case9 { grid-area: 9 / 3 / 12 / 7; 
padding: 5px;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.case10 { grid-area: 9 / 8 / 12 / 12; 
padding: 5px;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.case11 { grid-area: 12 / 2 / 13 / 13;
text-align: center;
padding:10px;
}
/* --- case　おわり ----- */
  
/* --- farm　はじまり ----- */
.farm {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 600px;
opacity: 0.99;
border-radius: 0px;
background: rgba(255,255,255);
border-left: 5px solid rgba(255,204,0);
}

.farm1 { grid-area: 3 / 1 / 7 / 6;  
background-image : url(../image/farm01.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: none;
border: 1px solid #fff;
}
.farm2 { grid-area: 3 / 1 / 7 / 6; 
background-image : url(../image/farm02.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: none;
}
.farm3 { grid-area: 7 / 6 / 11 / 11;
background-image : url(../image/farm03.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #fff;
}
.farm4 { grid-area: 3 / 6 / 7 / 11;
background-image : url(../image/farm07sp.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #fff;
}

.farm5 { grid-area: 5 / 1 / 7 / 3;
background-image : url(../image/farm04.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: none;
}
.farm6 { grid-area: 3 / 1 / 7 / 6; 
background-image : url(../image/farm05.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #fff;
}

.farm7 { grid-area: 7 / 1 / 11 / 6;
background-image : url(../image/farm06.png); 
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #fff;
}
.farm8 { grid-area: 1 / 1 / 3 / 12;
background: #fff;
padding: 15px;
}
.farm8 p{
font-size: 18px;
font-weight: bold;
text-align: left;
letter-spacing: 3px;
color: #494544;
line-height: 0.5em;
}
.farm8 h4{
line-height: 0.5em;
letter-spacing: 1px;
font-size: 12px;
text-align: left;
color: #494544;
}
.farm9 { grid-area: 3 / 12 / 13 / 13;
background: #ffcc00;
}
.farm9sp { grid-area: 1 / 12 / 3 / 13;
background: #000;
}
.farm10 { grid-area: 11 / 1 / 13 / 10;
text-align: left;
padding: 2px;
padding-left: 5px;
color: #494544;
letter-spacing: 2px;
line-height: 1.5em;
font-size: 12px;
}
.farm11 { grid-area: 12 / 6 / 13 / 13;}

.farm2 p{
font-weight: 12px;
letter-spacing: 2px;
line-height: 1.5em;
color: #494544;
font-weight: 500;
}
/* --- farm　おわり ----- */

/* --- news　はじまり ----- */
.news {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 400px;
opacity: 0.99;
border-radius: 0px;
}
.news a:hover{
opacity: 1;
}
.news img{
width: 250px;
}
.news1 { grid-area: 1 / 1 / 3 / 2;
background: #000;
}
.news2 { grid-area: 3 / 1 / 13 / 2;
background: #ffcc00;
}
.news3 { grid-area: 1 / 2 / 3 / 13;  
text-align: right;
border-top: 5px solid rgba(255,204,0);
}
.news3 p{
padding: 10px;
padding-right: 10px;
font-size: 18px;
letter-spacing: 5px;
color: #494544;
}
.news4 { grid-area: 3 / 2 / 12 / 13;
background: #000;
padding: 10px;
padding-top: 50px;
}
.news5 { grid-area:12 / 2 / 13 / 13;
padding: 10px;
text-align: center;
background: #000;
}
/* --- news　おわり ----- */
    
/* --- access　はじまり ----- */
.access {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 500px;
opacity: 0.99;
border-radius: 0px;
background: rgba(255,255,255);
border-left: 5px solid rgba(255,204,0);
}

.access1 { grid-area: 5 / 1 / 13 / 12; 
padding: 10px;
border-bottom: 5px solid rgba(255,204,0);
}
.access1 iframe{
width: 100%;
height: 100%;
}
.access2 { grid-area: 3 / 1 / 5 / 12;
color: #494544;
font-size: 12px;
font-weight: 300;
letter-spacing: 2px;
line-height: 1.5em;
padding: 5px;
text-align: left;
}
.access3sp { grid-area: 1 / 1 / 3 / 12;
background: #fff;
display: inherit;
}
.access3{
display: none;
}
.access5 { grid-area:  1 / 12 / 3 / 13; 
background: #000;
}
.access3sp p{
padding: 10px;
font-size: 18px;
letter-spacing: 3px;
text-align: left;
color: #494544;   
}
.access4 { grid-area: 3 / 12 / 13 / 13;
background: #ffcc00;
}
/* --- access　はじまり ----- */
    
/* --- レスポンシブおわり ----- */  
}