@charset "utf-8";

/* ヘッダー背景 */
.top-bg01{
width: 100%;
height: 100vh;
}

.top-bg02{
text-align: center;
padding-top: 20%;
padding-right:0%;
color:#fff;
letter-spacing: 5px;
}

.top-bg02 h3{
font-size: 48px;
text-align: center;
line-height: 1em;
font-weight:600;
text-shadow: 
       2px  2px 1px #a9a9a9,
      -2px  2px 1px #a9a9a9,
       2px -2px 1px #a9a9a9,
      -2px -2px 1px #a9a9a9,
       2px  0px 1px #a9a9a9,
       0px  2px 1px #a9a9a9,
      -2px  0px 1px #a9a9a9,
       0px -2px 1px #a9a9a9; 
}

.top-bg02 h4{
font-size: 24px;
text-align: center;
line-height: 1em;
font-weight:500;
color: #fff;
text-shadow: 
       2px  2px 1px #a9a9a9,
      -2px  2px 1px #a9a9a9,
       2px -2px 1px #a9a9a9,
      -2px -2px 1px #a9a9a9,
       2px  0px 1px #a9a9a9,
       0px  2px 1px #a9a9a9,
      -2px  0px 1px #a9a9a9,
       0px -2px 1px #a9a9a9; 
}

.index-bg {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

.index-bg li {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
-webkit-animation: anime 40s linear 0s infinite ;
animation: anime 40s linear 0s infinite ;
}
.index-bg li:nth-child(1) { 
background-image:url(../images-home2/bg04.png);
}
.index-bg li:nth-child(2) {
background-image: url(../images-home2/bg07.png);
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.index-bg li:nth-child(3) {
background-image:url(../images-home2/bg05.png);
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.index-bg li:nth-child(4) {
background-image: url(../images-home2/bg06.png);
-webkit-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes anime { 
0% {
-webkit-animation-timing-function: ease-in;
opacity: 0;
}
10% {
-webkit-transform: scale(1.1);
opacity: 1;
}
40% {
-webkit-transform: scale(1.2);
-webkit-animation-timing-function: ease-out;
opacity: 1;
}
50% {
-webkit-transform: scale(1.3);
opacity: 0;
}
100% { opacity: 0 }
}
@keyframes anime { 
0% {
animation-timing-function: ease-in;
opacity: 0;
}
10% {
transform: scale(1.1);
opacity: 1;
}
40% {
transform: scale(1.2);
animation-timing-function: ease-out;
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0;
}
100% { opacity: 0 }
}
/* ヘッダー背景終わり */

/* --- top about　はじまり ----- */
.top-about {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 700px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size: 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #494544;
border-radius: 10px;
}
.top-about1 { grid-area: 1 / 1 / 6 / 3; 
text-align: left;
padding: 1px;
}
.top-about1 img{
width: 100%;
}
.top-about2 { grid-area: 1 / 3 / 2 / 6; 
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.top-about3 { grid-area: 1 / 5 / 2 / 6;
text-align: right;
transform : rotate(10deg);  
margin-right: 30px;
line-height: 2em;
}
.top-about3 p{
font-size: 28px;
color: #fff;
letter-spacing: 5px;  
}
.top-about4 { grid-area: 2 / 3 / 5 / 6;
padding: 50px;
color: #fff;
letter-spacing: 3px;
font-size: 14px;
}
.top-about4 h3{
font-weight: 300;
font-size: 24px;
}
.top-about5 { grid-area: 5 / 4 / 6 / 6;
}
.top-about a:hover{
opacity: 1;
}
/* --- top about おわり ----- */

/* --- top service　はじまり ----- */
.top-service {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 850px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size: 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.top-service img{
width:100%;
}
.top-service a:hover{
opacity: 0.5;
}
.top-service1 { grid-area: 1 / 1 / 2 / 4; 
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.top-service2 { grid-area: 1 / 1 / 2 / 2; 
text-align: left;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.top-service2 p{
font-size: 28px;
color: #fff;
letter-spacing: 5px;  
}
.top-service3 { grid-area: 5 / 5 / 6 / 7;
text-align: center;
padding: 50px;
}
.top-service3 a:hover{
opacity: 1;
}
.top-service4 { grid-area: 2 / 1 / 5 / 2; }
.top-service5 { grid-area: 2 / 2 / 5 / 3; }
.top-service6 { grid-area: 2 / 3 / 5 / 4; }
.top-service7 { grid-area: 2 / 4 / 5 / 5; }
.top-service8 { grid-area: 2 / 5 / 5 / 6;}
.top-service9 { grid-area: 2 / 6 / 5 / 7; }
.top-service4s {
display: none;
}
.top-service5s {
display: none;
}
.top-service6s { 
display: none;
}
.top-service7s { 
display: none;
}
.top-service8s {
display: none;
}
.top-service9s {
display: none;
}
/* --- top service おわり ----- */

/* --- top news はじまり ----- */
.top-news {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 600px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size: 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.top-news a:hover{
opacity: 1;
}
.top-news1 { grid-area: 1 / 1 / 2 / 4;
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.top-news2 { grid-area: 1 / 1 / 2 / 2; 
text-align: left;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.top-news2 p{
font-size: 28px;
color: #fff;
letter-spacing: 5px;  
}
.top-news3 { grid-area: 2 / 2 / 5 / 5; }
.top-news4 { grid-area: 5 / 5 / 6 / 6;
padding: 20px;
}
/* --- top news おわり ----- */

/* --- top recruit はじまり ----- */
.top-recruit {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 600px;
border-radius: 10px;
}
.top-recruit a:hover{
opacity: 1;
}
.top-recruit img{
width: 100%;
}
.top-recruit1 { grid-area: 1 / 1 / 4 / 3; 
padding: 3px;
}
.top-recruit2 { grid-area: 1 / 3 / 4 / 6;
transform : rotate(-2deg);
text-align: center;
font-weight: bold;
font-size: 100px;
letter-spacing: 20px;
margin-right: 20px;
line-height: 1em;
}
.top-recruit3 { grid-area: 5 / 5 / 6 / 6; 
padding: 20px;
}
.top-recruit4 { grid-area: 4 / 1 / 6 / 5;
text-align: left;
padding: 30px;
font-weight: bold;
font-size: 32px;
letter-spacing: 5px;
line-height: 1.5em;
}
/* --- top recruit おわり ----- */

/* --- top contact はじまり ----- */
.top-contact {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 400px;
border-radius: 10px;
background: #66ccff;
opacity: 0.98;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.top-contact a:hover{
opacity: 1;
}
.top-contact1 { grid-area: 1 / 1 / 4 / 5;
color: #fff;
font-weight: bold;
font-size: 100px;
padding: 10px;
letter-spacing: 10px;
line-height: 0.2em;
}
.top-contact2 { grid-area: 4 / 4 / 5 / 6;
font-size: 16px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
font-weight: bold;
}
.top-contact3 { grid-area: 4 / 1 / 6 / 4; 
text-align: center;
color: #fff;
line-height: 0.5em;
letter-spacing: 2px;
font-size: 32px;
font-weight: bold;
}
.top-contact3 h6{
font-size: 14px;
font-weight: bold;
}
.top-contact4 { grid-area: 5 / 5 / 6 / 6; 
}
.top-contact5 { grid-area: 5 / 4 / 6 / 5; 
padding: 20px;
text-align: center;
}
.top-contact5 img{
width: 60px;
}
.top-contact5 a:hover{
opacity: 0.5;
}
/* --- top contact おわり ----- */

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

/* ヘッダー背景 */
.top-bg02{
text-align: center;
padding-top: 60%;
padding-right:0%;
color:#fff;
letter-spacing: 2px;
}

.top-bg02 h3{
font-size: 24px;
text-align: center;
line-height: 1em;
font-weight:600;
text-shadow: 
       2px  2px 1px #a9a9a9,
      -2px  2px 1px #a9a9a9,
       2px -2px 1px #a9a9a9,
      -2px -2px 1px #a9a9a9,
       2px  0px 1px #a9a9a9,
       0px  2px 1px #a9a9a9,
      -2px  0px 1px #a9a9a9,
       0px -2px 1px #a9a9a9; 
}

.top-bg02 h4{
font-size: 18px;
text-align: center;
line-height: 1em;
font-weight:500;
color: #fff;
text-shadow: 
       2px  2px 1px #a9a9a9,
      -2px  2px 1px #a9a9a9,
       2px -2px 1px #a9a9a9,
      -2px -2px 1px #a9a9a9,
       2px  0px 1px #a9a9a9,
       0px  2px 1px #a9a9a9,
      -2px  0px 1px #a9a9a9,
       0px -2px 1px #a9a9a9; 
}
/* ヘッダー背景終わり */

/* --- top about　はじまり ----- */
.top-about {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 700px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size: 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #494544;
border-radius: 10px;
}
.top-about1 { grid-area: 2 / 1 / 4 / 6;
text-align: left;
padding: 1px;
}
.top-about1 img{
width: 100%;
height: 100%;
}
.top-about2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
font-size: 48px;
letter-spacing: 5px;
font-weight: bold;
opacity: 0.6;
}
.top-about3 { grid-area: 1 / 3 / 2 / 6;
text-align: right;
transform : rotate(10deg);  
margin-right: 30px;
line-height: 1.5em;
}
.top-about3 p{
font-size: 20px;
color: #fff;
letter-spacing: 5px;  
}
.top-about4 { grid-area: 4 / 1 / 5 / 6;
padding: 7px;
color: #fff;
letter-spacing: 2px;
font-size: 12px;
}
.top-about4 h3{
font-weight: 300;
font-size: 14px;
}
.top-about5 { grid-area: 5 / 1 / 6 / 6;
text-align: center;
padding: 30px;
}
.top-about a:hover{
opacity: 1;
}
/* --- top about おわり ----- */

/* --- top service　はじまり ----- */
.top-service {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8,1fr);
grid-column-gap: 0px;
grid-row-gap: 2px;
width: auto;
height: 1400px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size: 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.top-service img{
width:100%;
}
.top-service a:hover{
opacity: 0.5;
}
.top-service1 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
font-size: 48px;
letter-spacing: 5px;
font-weight: bold;
opacity: 0.6;
}
.top-service2 { grid-area:1 / 1 / 2 / 4;
text-align: left;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.top-service2 p{
font-size: 20px;
color: #fff;
letter-spacing: 5px;  
}
.top-service3 { grid-area: 8 / 1 / 9 / 6;
text-align: center;
padding: 50px;
}
.top-service3 a:hover{
opacity: 1;
}
.top-service4 { grid-area: 2 / 1 / 5 / 2;
display: none;
}
.top-service5 { grid-area: 2 / 2 / 5 / 3;
display: none;
}
.top-service6 { grid-area: 2 / 3 / 5 / 4; 
display: none;
}
.top-service7 { grid-area: 2 / 4 / 5 / 5; 
display: none;
}
.top-service8 { grid-area: 2 / 5 / 5 / 6;
display: none;
}
.top-service9 { grid-area: 2 / 6 / 5 / 7; 
display: none;
}
.top-service4s { grid-area: 2 / 1 / 3 / 6;
display: inherit;
}
.top-service5s { grid-area: 3 / 1 / 4 / 6;
display: inherit;
}
.top-service6s { grid-area: 4 / 1 / 5 / 6;
display: inherit;
}
.top-service7s { grid-area: 5 / 1 / 6 / 6;
display: inherit;
}
.top-service8s { grid-area: 6 / 1 / 7 / 6;
display: inherit;
}
.top-service9s { grid-area: 7 / 1 / 8 / 6;
display: inherit;
}
/* --- top service おわり ----- */
 
/* --- top news はじまり ----- */
.top-news {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 600px;
background: #101010;
background-image:  radial-gradient(#494544 50%, transparent 70%);
background-position: 0 0, 2px 2px;
background-size: 1.9px 1.7px;
opacity: 0.99;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.top-news a:hover{
opacity: 1;
}
.top-news1 { grid-area:  1 / 1 / 2 / 6;
text-align: center;
font-size: 48px;
letter-spacing: 5px;
font-weight: bold;
opacity: 0.6;
}
.top-news2 { grid-area: 1 / 1 / 2 / 4;
text-align: left;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.top-news2 p{
font-size: 20px;
color: #fff;
letter-spacing: 5px;  
}
.top-news3 { grid-area: 2 / 1 / 5 / 6;  }
.top-news4 { grid-area: 5 / 1 / 6 / 6;
text-align: center;
padding: 20px;
}
/* --- top news おわり ----- */

/* --- top recruit はじまり ----- */
.top-recruit {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 2fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 600px;
border-radius: 10px;
}
.top-recruit a:hover{
opacity: 1;
}
.top-recruit img{
width: 100%;
}
.top-recruit1 { grid-area: 2 / 1 / 4 / 6;
padding: 3px;
}
.top-recruit2 { grid-area: 1 / 1 / 2 / 4;
transform : rotate(-2deg);
text-align: center;
font-weight: bold;
font-size: 48px;
letter-spacing: 5px;
margin-right: 20px;
line-height: 1em;
}
.top-recruit3 { grid-area: 6 / 1 / 7 / 6;
text-align: center;
padding: 20px;
}
.top-recruit4 { grid-area: 4 / 1 / 6 / 6; 
text-align: left;
padding: 10px;
font-weight: bold;
font-size: 24px;
letter-spacing: 3px;
line-height: 1.5em;
}
/* --- top recruit おわり ----- */

/* --- top contact はじまり ----- */
.top-contact {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 400px;
border-radius: 10px;
background: #66ccff;
opacity: 0.98;
box-shadow: 1px 2px 29px #000000;
border-radius: 10px;
}
.top-contact a:hover{
opacity: 1;
}
.top-contact1 { grid-area: 1 / 1 / 3 / 6; 
color: #fff;
font-weight: bold;
font-size: 64px;
padding: 10px;
letter-spacing: 5px;
line-height: 0.2em;
}
.top-contact2 { grid-area: 3 / 1 / 4 / 6;
font-size: 16px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
font-weight: bold;
padding: 10px;
}
.top-contact3 { grid-area: 4 / 1 / 5 / 6;
text-align: center;
color: #fff;
line-height: 0.5em;
letter-spacing: 2px;
font-size: 18px;
font-weight: bold;
}
.top-contact3 h6{
font-size: 14px;
font-weight: bold;
}
.top-contact4 { grid-area: 5 / 3 / 6 / 6;
text-align: center;
}
.top-contact5 { grid-area: 5 / 1 / 6 / 3; 
padding: 10px;
text-align: center;
}
.top-contact5 img{
width: 50px;
}
.top-contact5 a:hover{
opacity: 0.5;
}
/* --- top contact おわり ----- */
    
/* --- レスポンシブおわり ----- */  
}