@charset "utf-8";

/* top image */
.top-image {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: 80vh;
background:rgba(0,101,172);
}

.top-image1 { grid-area: 1 / 1 / 13 / 2;
background: #fff;
}
.top-image2 { grid-area:1 / 10 / 13 / 13;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}
.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(../image/top-bg01.png);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2 .src3 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2 .src4 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}
.top-image2a { grid-area: 1 / 7 / 13 / 10;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}
.top-image2a .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2a .src1 {
background-image : url(../);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2a .src2 {
background-image : url(../image/top-bg02.jpeg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2a .src3 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2a .src4 {
background-image : url(../image/top-bg04.jpeg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}

.top-image2b { grid-area: 1 / 4 / 13 / 7; 
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}
.top-image2b .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2b .src1 {
background-image : url(../);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2b .src2 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2b .src3 {
background-image : url(../image/top-bg03.jpeg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2b .src4 {
background-image : url(../); 
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: 8 / 2 / 11 / 7; 
text-align: left;
padding-left: 10px;
z-index: 100;
}
.top-image3 p{
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 2em;
}
.head-space{
width: auto;
height: 100px;
}
/* top image */

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

.index-about a{
text-decoration: none;
}
.index-about1 { grid-area: 3 / 2 / 13 / 13;
padding: 30px;
background: #fff;
}
.index-about1 h1{
font-size: 32px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 1.5em;
font-family: 'Roboto', sans-serif;
}
.index-about1 p{
font-size: 14px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 2em;
}
.index-about1 h3{
text-align: center;
}
.index-about2 { grid-area:1 / 1 / 13 / 2;
background:rgba(0,101,172);
}
/* index aboutおわり */

/* --- hover　はじまり ----- */
.hover {
position: relative;
width: 100%;
height: 100%;
}
.hover .hover-img {
margin: 0;
padding: 0;
}
.hover-img img {
width: 100%;
height: 100%;
}

.hover-img p{
text-align: left;
padding-top: 55%;
padding-left: 20px;
font-size: 24px;
letter-spacing: 2px;
font-weight: bold;
color: #fff;
}
.hover .hover-text {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #fff;
background:rgba(0,101,172,0.7);
opacity: 0;
transition: .3s ease-in-out;
}
.hover .hover-text .text1 {
padding:10px;
font-size: 18px;
letter-spacing: 3px;
text-align:left;
color: #fff;
padding-top: 50px;
font-weight: bold;
}

.hover .hover-text .text2 {
font-size: 24px;
letter-spacing: 5px;
text-align: center;
padding-right: 0%;
padding-top: 50%;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}

.hover .hover-text .text2 a{
text-decoration-line: none;
color: #fff;
}

.hover .hover-text .text2 a:hover{
opacity: 0.5;
}

.hover:hover .hover-text {
opacity: 1;
}
/* --- hover　おわり ----- */

/* --- works はじまり ----- */
.case{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 0.3fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 500px;
background:#fff;;
margin-left: 0%;
margin-right: 0%;
opacity: 1;
border-radius: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.case img{
width: 100%;
}
.case1 { grid-area: 1 / 1 / 2 / 2;
background-image: url(../image/top-case03.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid #fff;
}
.case2 { grid-area:1 / 2 / 2 / 3;
background-image: url(../image/top-case02.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid #fff;
}
.case3 { grid-area: 1 / 3 / 2 / 4; 
background-image: url(../image/top-case04.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid #fff;
}
.case4 { grid-area: 2 / 1 / 3 / 4;
text-align: center;
padding-top: 20px;
}
.case4 a{
text-decoration: none;
}
/* --- worksおわり ----- */

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

.news1 { grid-area: 1 / 1 / 13 / 2;
background:rgba(0,101,172);
}
.news2 { grid-area: 1 / 2 / 13 / 13;
}
.news2 th{
width:0px;
}

.news2 td{
width: 100%;
font-size: 14px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 2em;
background: #fff;
padding-top: 0px;
padding-left: 50px;
border-radius: 0px;
height: 65px;
border-bottom: 1px solid rgba(0,101,172);
}
.news3{
margin-left: 8.33%;
text-align: center;
padding: 30px;
}
.news3 a{
text-decoration: none;
}
/* --- newsおわり ----- */

/* --- recruitはじまり ----- */
.recruit {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
}
.recruit img{
width: 100%;
}
.recruit a{
text-decoration: none;
}
.recruit1 { grid-area: 1 / 1 / 7 / 2;
background: rgba(0,101,172);
}
.recruit2 { grid-area: 1 / 2 / 7 / 5;}
.recruit3 { grid-area: 5 / 4 / 8 / 7;
}
.recruit4 { grid-area: 2 / 7 / 8 / 13;  
padding: 20px;
}
.recruit4 h1{
font-size: 28px;
color: #494544;
text-align: left;
letter-spacing: 5px;
line-height: 1.5em;
}
.recruit4 p{
font-size: 14px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 2em;
}
.recruit4 h3{
text-align: center;
}
/* --- recruitおわり ----- */

@media (max-width: 768px){ 

/* top image */
.top-image {
display: grid;
grid-template-columns: 0.8fr repeat(11, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: 80vh;
background:rgba(0,101,172);
}

.top-image1 { grid-area: 1 / 1 / 13 / 2;
background:rgba(0,101,172);
}
.top-image2 { grid-area:1 / 2 / 13 / 13;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}
.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(../image/top-bg01.png);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2 .src2 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2 .src3 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2 .src4 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}
.top-image2a { grid-area: 1 / 2 / 13 / 13;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}
.top-image2a .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2a .src1 {
background-image : url(../);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2a .src2 {
background-image : url(../image/top-bg02.jpeg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2a .src3 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2a .src4 {
background-image : url(../image/top-bg04.jpeg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 18s;
}

.top-image2b { grid-area:1 / 2 / 13 / 13;
  position   : relative;
 width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}
.top-image2b .bgimage {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 24s infinite; }

.top-image2b .src1 {
background-image : url(../);  
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.top-image2b .src2 {
background-image : url(../); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 6s;
}
.top-image2b .src3 {
background-image : url(../image/top-bg03.jpeg); 
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation-delay  : 12s;
}
.top-image2b .src4 {
background-image : url(../); 
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: 8 / 1 / 11 / 13;
text-align: left;
padding-left: 5px;
z-index: 100;
}
.top-image3 p{
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
}
.head-space{
width: auto;
height: 100px;
}
/* top image */

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

.index-about a{
text-decoration: none;
}
.index-about1 { grid-area: 2 / 2 / 13 / 13;
padding: 5px;
background: #fff;
}
.index-about1 h1{
font-size: 18px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 1.5em;
font-family: 'Roboto', sans-serif;
}
.index-about1 p{
font-size: 14px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 2em;
}
.index-about1 h3{
text-align: center;
}
.index-about2 { grid-area:1 / 1 / 13 / 2;
background:rgba(0,101,172);
}
/* index aboutおわり */

/* --- works はじまり ----- */
.case{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr) 0.5fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 800px;
background:#fff;;
margin-left: 0%;
margin-right: 0%;
opacity: 1;
border-radius: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.case img{
width: 100%;
}
.case1 { grid-area: 1 / 1 / 2 / 2;
background-image: url(../image/top-case03.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid #fff;
}
.case2 { grid-area:2 / 1 / 3 / 2;
background-image: url(../image/top-case02.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid #fff;
}
.case3 { grid-area: 3 / 1 / 4 / 2;  
background-image: url(../image/top-case04.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 1px solid #fff;
}
.case4 { grid-area: 4 / 1 / 5 / 2;
text-align: center;
padding-top: 10px;
}
.case4 a{
text-decoration: none;
}
/* --- worksおわり ----- */

/* --- hover　はじまり ----- */
.hover {
position: relative;
width: 100%;
height: 100%;
}
.hover .hover-img {
margin: 0;
padding: 0;
}
.hover-img img {
width: 100%;
height: 100%;
}

.hover-img p{
text-align: left;
padding-top: 50%;
padding-left: 10px;
font-size: 20px;
letter-spacing: 2px;
font-weight: bold;
color: #fff;
}
.hover .hover-text {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #fff;
background:rgba(0,101,172,0.7);
opacity: 0;
transition: .3s ease-in-out;
}
.hover .hover-text .text1 {
padding:10px;
font-size: 18px;
letter-spacing: 3px;
text-align:left;
color: #fff;
padding-top: 10px;
font-weight: bold;
}

.hover .hover-text .text2 {
font-size: 24px;
letter-spacing: 5px;
text-align: center;
padding-right: 0%;
padding-top: 20%;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}

.hover .hover-text .text2 a{
text-decoration-line: none;
color: #fff;
}

.hover .hover-text .text2 a:hover{
opacity: 0.5;
}

.hover:hover .hover-text {
opacity: 1;
}
/* --- hover　おわり ----- */

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

.news1 { grid-area: 1 / 1 / 13 / 2;
background:rgba(0,101,172);
}
.news2 { grid-area: 1 / 2 / 13 / 13;
}
.news2 th{
width:0px;
}

.news2 td{
width: 100%;
font-size: 14px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 2em;
background: #fff;
padding-top: 0px;
padding-left: 10px;
border-radius: 0px;
height: 65px;
border-bottom: 1px solid rgba(0,101,172);
}
.news3{
margin-left: 8.33%;
text-align: center;
padding: 20px;
}
.news3 a{
text-decoration: none;
}
/* --- newsおわり ----- */

/* --- recruitはじまり ----- */
.recruit {
display: grid;
grid-template-columns: 0.8fr repeat(11, 1fr);
grid-template-rows: 0.5fr 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
}
.recruit img{
width: 100%;
}
.recruit a{
text-decoration: none;
}
.recruit1 { grid-area: 1 / 1 / 13 / 2; 
background: rgba(0,101,172);
}
.recruit2 { grid-area: 1 / 2 / 7 / 5;
display: none;
}
.recruit3 { grid-area: 1 / 2 / 2 / 13;
border-left: 2px solid #fff;
}
.recruit4 { grid-area: 2 / 2 / 3 / 13; 
padding: 10px;
}
.recruit4 h1{
font-size: 20px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 1.5em;
}
.recruit4 p{
font-size: 14px;
color: #494544;
text-align: left;
letter-spacing: 2px;
line-height: 2em;
}
.recruit4 h3{
text-align: center;
}
/* --- recruitおわり ----- */
    
}

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