@charset "utf-8";

/* タイトルはじまり */
.title {
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: 250px;
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 #fff;
}
.title1 { grid-area: 2 / 1 / 5 / 6; 
padding: 30px;
font-size: 32px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 0.5em;
text-align: right;
}
.title1 h6{
font-size: 16px;
color: #66ccff
}
/* タイトル終わり */

/* biz01はじまり */
.biz1 {
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;
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 #000;
}
.biz1 img{
width: 100%;
height: 100%;
}
.biz1 a{
color: #fff;
}
.biz1-1 { grid-area: 1 / 1 / 9 / 7; }
.biz1-2 { grid-area: 1 / 7 / 3 / 13;  
text-align: right;
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing: 3px;
line-height: 1.5em;
padding: 10px;
}
.biz1-3 { grid-area: 9 / 1 / 13 / 7;
font-size: 38px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 1.5em;
padding: 10px;
padding-left: 50px;
}
.biz1-4 { grid-area: 4 / 7 / 12 / 13; 
padding: 20px;
letter-spacing: 3px;
line-height: 1.5em;
font-size: 14px;
color: #fff;
}
.biz1-5 { grid-area: 7 / 7 / 9 / 10; }
.biz1-6 { grid-area: 7 / 10 / 9 / 13; }
.biz1-7 { grid-area: 9 / 7 / 11 / 10; }
.biz1-8 { grid-area: 9 / 10 / 11 / 13; }
.biz1-9 { grid-area: 11 / 7 / 13 / 10; }
.biz1-10 { grid-area: 11 / 10 / 13 / 13; }
.biz1-5s { grid-area: 7 / 7 / 9 / 10;
display: none;
}
.biz1-6s { grid-area: 7 / 10 / 9 / 13; 
display: none;
}
.biz1-7s { grid-area: 9 / 7 / 11 / 10;
display: none;
}
.biz1-8s { grid-area: 9 / 10 / 11 / 13;
display: none;
}
.biz1-9s { grid-area: 11 / 7 / 13 / 10; 
display: none;
}
.biz1-10s { grid-area: 11 / 10 / 13 / 13; 
display: none;
}
/* biz01おわり */

/* --- biz02 はじまり ----- */
.biz2 {
display: grid;
grid-template-columns: repeat(4, 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 #000;
}
.biz2 img{
width: 100%;
height: 100%;
}
.biz2-1 { grid-area: 1 / 1 / 2 / 3; 
text-align:left;
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing: 3px;
line-height: 1.5em;
padding: 10px;
}
.biz2-2 { grid-area: 1 / 3 / 5 / 6;
margin: 20px;
}
.biz2-3 { grid-area: 2 / 1 / 5 / 3; 
padding: 20px;
letter-spacing: 3px;
line-height: 1.5em;
font-size: 14px;
color: #fff;
}
.biz2-4 { grid-area: 5 / 1 / 6 / 6; 
font-size: 38px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 1.5em;
padding: 10px;
padding-left: 50px;
}
/* --- biz02 おわり ----- */

/* --- biz03　はじまり ----- */
.biz3 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 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 #fff;
}
.biz3 img{
width: 100%;
}

.biz3-1 { grid-area: 1 / 1 / 6 / 2; }
.biz3-1s {
display: none;
}
.biz3-2 { grid-area: 2 / 2 / 3 / 4; 
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 1.5em;
text-align: center;
padding: 20px;
}
.biz3-3 { grid-area: 3 / 2 / 6 / 4; 
font-size: 14px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
text-align: left;
padding: 20px;
}
.biz3-4 { grid-area: 2 / 4 / 7 / 5;}
.biz3-4s{
display: none;
}
.biz3-5 { grid-area: 3 / 5 / 4 / 7; 
font-size: 24px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 1.5em;
text-align: center;
padding: 20px;
}
.biz3-6 { grid-area: 4 / 5 / 7 / 7;
font-size: 14px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
text-align: left;
padding: 20px;
}
/* --- biz03 おわり ----- */

/* --- アクセス はじまり ----- */
/* --- アクセス おわり ----- */

/* --- 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){

/* タイトルはじまり */
.title {
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: 150px;
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 #fff;
}
.title1 { grid-area: 2 / 1 / 5 / 6; 
padding: 10px;
font-size: 20px;
font-weight: bold;
color: #fff;
letter-spacing: 3px;
line-height: 0.5em;
text-align: right;
}
.title1 h6{
font-size: 12px;
color: #66ccff
}
/* タイトル終わり */

/* biz01はじまり */
.biz1 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(7, 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 #000;
}
.biz1 img{
width: 100%;
height: 100%;
}
.biz1 a{
color: #fff;
}
.biz1-1 { grid-area: 2 / 1 / 4 / 5;  }
.biz1-2 { grid-area: 1 / 1 / 2 / 5;
text-align: left;
font-size: 16px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
padding: 5px;
}
.biz1-3 { grid-area: 1 / 5 / 4 / 7;
font-size: 18px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
padding: 10px;
padding-left: 15px;
padding-top: 30px;
}
.biz1-4 { grid-area: 4 / 1 / 5 / 7; 
padding: 10px;
letter-spacing: 2px;
line-height: 1.5em;
font-size: 12px;
color: #fff;
}
.biz1-5 { grid-area: 5 / 1 / 6 / 4;  
display: none;
}
.biz1-6 { grid-area: 5 / 4 / 6 / 7;
display: none;
}
.biz1-7 { grid-area: 6 / 1 / 7 / 4;  
display: none;
}
.biz1-8 { grid-area: 6 / 4 / 7 / 7;
display: none;
}
.biz1-9 { grid-area: 7 / 1 / 8 / 4;  
display: none;
}
.biz1-10 { grid-area:7 / 4 / 8 / 7;
display: none;
}
.biz1-5s { grid-area: 5 / 1 / 6 / 4; 
display: block;
}
.biz1-6s { grid-area: 5 / 4 / 6 / 7; 
display: block;
}
.biz1-7s { grid-area: 6 / 1 / 7 / 4;
display: block;
}
.biz1-8s { grid-area: 6 / 4 / 7 / 7;
display: block;
}
.biz1-9s { grid-area: 7 / 1 / 8 / 4; 
display: block;
}
.biz1-10s { grid-area:7 / 4 / 8 / 7; 
display: block;
}
    
/* biz01おわり */

/* --- biz02 はじまり ----- */
.biz2 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr repeat(2, 2fr) repeat(2, 1fr) 0.5fr;
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 #000;
}
.biz2 img{
width: 100%;
height: 100%;
}
.biz2-1 { grid-area: 1 / 1 / 2 / 6; 
text-align:left;
font-size: 16px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
padding: 10px;
}
.biz2-2 { grid-area: 2 / 1 / 4 / 6;
margin: 20px;
}
.biz2-3 { grid-area:4 / 1 / 6 / 6; 
padding: 10px;
letter-spacing: 2px;
line-height: 1.5em;
font-size: 12px;
color: #fff;
}
.biz2-4 { grid-area: 5 / 1 / 6 / 6; 
font-size: 18px;
font-weight: bold;
color: #fff;
letter-spacing: 5px;
line-height: 1.5em;
padding: 10px;
padding-left: 0px;
padding-top: 50px;
text-align: center;
}
/* --- biz02 おわり ----- */
    
/* --- biz03　はじまり ----- */
.biz3 {
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: 750px;
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 transparent;
}
.biz3 img{
width: 100%;
}

.biz3-1 { 
display: none;
}
.biz3-1s {grid-area: 1 / 1 / 2 / 6; 
display: block;
    }
.biz3-2 { grid-area: 2 / 1 / 3 / 6;
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
text-align: center;
padding: 10px;
}
.biz3-3 { grid-area: 3 / 1 / 4 / 6; 
font-size: 10px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
text-align: left;
padding: 5px;
}
.biz3-4 { 
display: none;
}
.biz3-4s { grid-area: 4 / 1 / 5 / 6;
display: block;
}
.biz3-5 { grid-area: 5 / 1 / 6 / 6; 
font-size: 14px;
font-weight: bold;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
text-align: center;
padding: 5px;
}
.biz3-6 { grid-area: 6 / 1 / 7 / 6;
font-size: 10px;
font-weight: 300;
color: #fff;
letter-spacing: 2px;
line-height: 1.5em;
text-align: left;
padding: 10px;
}
/* --- biz03 おわり ----- */
    
/* --- 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 おわり ----- */
    
}
/* --- レスポンシブおわり ----- */