@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: #fff;
}

.top-image1 { grid-area: 3 / 1 / 9 / 2; 
background: rgba(11,96,147);
}
.top-image2 { grid-area: 1 / 2 / 9 / 9;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
border-bottom: 5px solid #fff;
}
.top-image2 .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2 .src1 {
background-image : url(../images-home/sample01.jpg);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../images-home/sample02.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2 .src3 {
background-image : url(../images-home/sample03.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2 .src4 {
background-image : url(../images-home/sample04.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}

@keyframes bgAnime {
   0% { opacity: 0; transform: scale(1.1, 1.1); }
   1% { opacity: 1; transform: scale(1.1, 1.1); }
   5% { opacity: 1; transform: scale(1.1, 1.1); }
  21% { opacity: 1; transform: scale(1.0, 1.0); }
  25% { opacity: 1; transform: scale(1.0, 1.0); }
  26% { 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: 32px;
font-weight: bold;
color: #fff;
letter-spacing: 10px;
line-height: 1.5em;
}
.head-space{
width: auto;
height: 100px;
}
/* top image */

/* index aboutはじまり */
.index-about {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-about a{
text-decoration: none;
}

.index-about img{
width: 100%;
}
.index-about1 { grid-area: 1 / 4 / 7 / 7;
padding: 20px;
}
.index-about2 { grid-area: 1 / 1 / 2 / 4;
font-size: 48px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 20px;
}
.index-about2 h5{
font-size: 20px;
color: #494544;
text-align: left;
letter-spacing: 5px;
}
.index-about3 { grid-area: 2 / 1 / 6 / 4;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-about3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-about3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-about4 { grid-area: 3 / 1 / 7 / 4;
background: #f5f5f5;
}
.index-about5 { grid-area: 6 / 1 / 7 / 4;
text-align: center;
}
/* index aboutおわり */

/* index productはじまり */
.index-product {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-product a{
text-decoration: none;
}

.index-product img{
width: 100%;
}
.index-product1 { grid-area: 1 / 1 / 7 / 4;
padding: 20px;
}
.index-product2 { grid-area: 1 / 4 / 3 / 7;
font-size: 48px;
color: #494544;
text-align: right;
letter-spacing: 5px;
line-height: 0.2em;
padding: 20px;
}
.index-product2 h5{
font-size: 20px;
color: #494544;
text-align: right;
letter-spacing: 5px;
}
.index-product3 { grid-area: 2 / 4 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-product3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-product3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-product4 { grid-area: 3 / 4 / 7 / 7;
background: #f5f5f5;
}
.index-product5 { grid-area: 6 / 4 / 7 / 7;
text-align: center;
}
/* index productおわり */

/* index brandはじまり */
.index-brand {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-brand a{
text-decoration: none;
}

.index-brand img{
width: 100%;
}
.index-brand1 { grid-area: 1 / 1 / 7 / 4;
padding: 20px;
}
.index-brand2 { grid-area: 1 / 4 / 3 / 7;
font-size: 48px;
color: #494544;
text-align: right;
letter-spacing: 5px;
line-height: 0.2em;
padding: 20px;
}
.index-brand2 h5{
font-size: 20px;
color: #494544;
text-align: right;
letter-spacing: 5px;
}
.index-brand3 { grid-area: 2 / 4 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-brand3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-brand3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-brand4 { grid-area: 3 / 4 / 7 / 7;
background: #f5f5f5;
}
.index-brand5 { grid-area: 6 / 4 / 7 / 7;
text-align: center;
}
/* index brandおわり */


/* index newsはじまり */
.index-news {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-news a{
text-decoration: none;
}

.index-news img{
width: 100%;
}
.index-news1 { grid-area: 1 / 3 / 6 / 7;
padding: 20px;
background: #f5f5f5;
}
.index-news2 { grid-area: 1 / 1 / 3 / 3;
font-size: 48px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 20px;
}
.index-news2 h5{
font-size: 20px;
color: #494544;
text-align: left;
letter-spacing: 5px;
}
.index-news3 { grid-area: 6 / 3 / 7 / 7;
text-align: center;
display: none;
}
.index-news1 th{
padding-top: 0px;
width:150px;
background: rgba(192,228,242,0);
color: #494544;
font-size: 14px;
font-weight:bold;
text-align: center;
border-radius: 0px;
border-bottom: 1px dotted rgba(11,96,147);
height: 65px;
letter-spacing: 2px;
}

.index-news1 td{
width: 500px;
font-size: 14px;
font-weight: ;
color: #494544;
text-align: left;
background: rgba(192,228,242,0);
padding-top: 0px;
padding-left: 50px;
border-radius: 0px;
height: 65px;
border-bottom: 1px dotted rgba(11,96,147);
letter-spacing: 2px;
}
/* index newsおわり */

/* index recruitはじまり */
.index-recruit {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-recruit a{
text-decoration: none;
}

.index-recruit img{
width: 100%;
}
.index-recruit1 { grid-area: 1 / 1 / 7 / 4;
padding: 20px;
}
.index-recruit2 { grid-area: 1 / 4 / 3 / 7;
font-size: 48px;
color: #494544;
text-align: right;
letter-spacing: 5px;
line-height: 0.2em;
padding: 20px;
}
.index-recruit2 h5{
font-size: 20px;
color: #494544;
text-align: right;
letter-spacing: 5px;
}
.index-recruit3 { grid-area: 2 / 4 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-recruit3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-recruit3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-recruit4 { grid-area: 3 / 4 / 7 / 7;
background: #f5f5f5;
}
.index-recruit5 { grid-area: 6 / 4 / 7 / 7;
text-align: center;
}
/* index recruitおわり */

@media (max-width: 768px){ 

/* 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: #fff;
}

.top-image1 { grid-area: 3 / 1 / 9 / 2; 
background: rgba(11,96,147);
}
.top-image2 { grid-area: 1 / 2 / 9 / 9;
  position   : relative;
 width  : 100%;

  margin     : auto;
  overflow   : hidden;
border-bottom: 5px solid #fff;
}
.top-image2 .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2 .src1 {
background-image : url(../images-home/sample01.jpg);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../images-home/sample02.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2 .src3 {
background-image : url(../images-home/sample03.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2 .src4 {
background-image : url(../images-home/sample04.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}

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

/* index aboutはじまり */
.index-about {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 0.3fr 0.35fr 0.5fr 1fr repeat(2, 0.5fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-about a{
text-decoration: none;
}

.index-about img{
width: 100%;
}
.index-about1 { grid-area: 2 / 1 / 4 / 7;
padding: 20px;
}
.index-about2 { grid-area: 1 / 1 / 2 / 7;
font-size: 32px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 10px;
}
.index-about2 h5{
font-size: 16px;
color: #494544;
text-align: left;
letter-spacing: 2px;
}
.index-about3 { grid-area: 4 / 1 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-about3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-about3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-about4 { grid-area: 4 / 1 / 7 / 7;
background: #f5f5f5;
}
.index-about5 { grid-area: 6 / 1 / 7 / 7;
text-align: center;
}
/* index aboutおわり */

/* index productはじまり */
.index-product {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 0.3fr repeat(2, 0.5fr) 1fr repeat(2, 0.5fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-product a{
text-decoration: none;
}

.index-product img{
width: 100%;
}
.index-product1 { grid-area: 2 / 1 / 4 / 7;
padding: 20px;
}
.index-product2 { grid-area: 1 / 1 / 2 / 7;
font-size: 32px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 10px;
}
.index-product2 h5{
font-size: 16px;
color: #494544;
text-align: left;
letter-spacing: 2px;
}
.index-product3 { grid-area: 4 / 1 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-product3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-product3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-product4 { grid-area: 4 / 1 / 7 / 7;
background: #f5f5f5;
}
.index-product5 { grid-area: 6 / 1 / 7 / 7;
text-align: center;
}
/* index productおわり */
    
/* index brandはじまり */
.index-brand {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 0.3fr 0.35fr 0.5fr 1fr repeat(2, 0.5fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-brand a{
text-decoration: none;
}

.index-brand img{
width: 100%;
}
.index-brand1 { grid-area: 2 / 1 / 4 / 7;
padding: 20px;
}
.index-brand2 { grid-area: 1 / 1 / 2 / 7;
font-size: 32px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 10px;
}
.index-brand2 h5{
font-size: 16px;
color: #494544;
text-align: left;
letter-spacing: 2px;
}
.index-brand3 { grid-area: 4 / 1 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-brand3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-brand3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-brand4 { grid-area: 4 / 1 / 7 / 7;
background: #f5f5f5;
}
.index-brand5 { grid-area: 6 / 1 / 7 / 7;
text-align: center;
}
/* index brandおわり */

/* index recruitはじまり */
.index-recruit {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 0.3fr repeat(2, 0.5fr) 1fr repeat(2, 0.5fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-recruit a{
text-decoration: none;
}

.index-recruit img{
width: 100%;
}
.index-recruit1 { grid-area: 2 / 1 / 4 / 7;
padding: 20px;
}
.index-recruit2 { grid-area: 1 / 1 / 2 / 7;
font-size: 32px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 10px;
}
.index-recruit2 h5{
font-size: 16px;
color: #494544;
text-align: left;
letter-spacing: 2px;
}
.index-recruit3 { grid-area: 4 / 1 / 6 / 7;
padding: 30px;
z-index: 100;
background: #f5f5f5;
}
.index-recruit3 h2{
font-size: 24px;
font-weight: bold;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-recruit3 p{
font-size: 14px;
font-weight: 500;
color: #494544;
letter-spacing: 2px;
line-height: 2em;
z-index: 100;
}
.index-recruit4 { grid-area: 4 / 1 / 7 / 7;
background: #f5f5f5;
}
.index-recruit5 { grid-area: 6 / 1 / 7 / 7;
text-align: center;
}
/* index recruitおわり */

/* index newsはじまり */
.index-news {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 0.3fr repeat(2, 0.5fr) 1fr repeat(2, 0.5fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
background:#fff;
}

.index-news a{
text-decoration: none;
}

.index-news img{
width: 100%;
}
.index-news1 { grid-area: 2 / 1 / 6 / 7;
padding: 20px;
background: #f5f5f5;
}
.index-news2 { grid-area: 1 / 1 / 2 / 7;
font-size: 32px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 0.2em;
padding: 10px;
}
.index-news2 h5{
font-size: 16px;
color: #494544;
text-align: left;
letter-spacing: 2px;
}
.index-news3 { grid-area: 6 / 1 / 7 / 7;
text-align: center;
display: none;
}
.index-news1 th{
padding-top: 0px;
width:auto;
background: rgba(192,228,242,0);
color: #494544;
font-size: 14px;
font-weight:500;
text-align: center;
border-radius: 0px;
border-bottom: 1px dotted rgba(11,96,147);
height: 65px;
letter-spacing: 2px;
}

.index-news1 td{
width: auto;
font-size: 14px;
font-weight:500;
color: #494544;
text-align: left;
background: rgba(192,228,242,0);
padding-top: 0px;
padding-left: 10px;
border-radius: 0px;
height: 65px;
border-bottom: 1px dotted rgba(11,96,147);
letter-spacing: 2px;
}
/* index newsおわり */
    
}

@media (min-width:768px) and (max-width:991px){

/* 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: 50vh;
background: #fff;
}

.top-image1 { grid-area: 3 / 1 / 9 / 2; 
background: rgba(11,96,147);
}
.top-image2 { grid-area: 1 / 2 / 9 / 9;
  position   : relative;
 width  : 100%;

  margin     : auto;
  overflow   : hidden;
border-bottom: 5px solid #fff;
}
.top-image2 .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2 .src1 {
background-image : url(../images-home/sample01.jpg);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../images-home/sample02.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2 .src3 {
background-image : url(../images-home/sample03.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2 .src4 {
background-image : url(../images-home/sample04.jpg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}

@keyframes bgAnime {
   0% { opacity: 0; transform: scale(1.1, 1.1); }
   1% { opacity: 1; transform: scale(1.1, 1.1); }
   5% { opacity: 1; transform: scale(1.1, 1.1); }
  21% { opacity: 1; transform: scale(1.0, 1.0); }
  25% { opacity: 1; transform: scale(1.0, 1.0); }
  26% { opacity: 0; }
 100% { opacity: 0; }
}
.top-image3 { grid-area: 4 / 1 / 7 / 9;
text-align: left;
padding-left: 5px;
padding: 5px;
z-index: 100;
}
.top-image3 p{
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing:3px;
line-height: 2em;
}
.head-space{
width: auto;
height: 100px;
}
/* top image */
}