@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
}
/* タイトル終わり */

/* mail はじまり */
.mail {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.1fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
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 #fff;
}

.mail1 { grid-area: 1 / 1 / 2 / 5;
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.mail2{ grid-area: 2 / 1 / 6 / 6;
}
/* mail おわり */

/* --- 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 / 5;
font-size: 14px;
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 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
}
/* タイトル終わり */

/* mail はじまり */
.mail {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.1fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
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 #fff;
}

.mail1 { grid-area: 1 / 1 / 2 / 5;
text-align: center;
font-size: 32px;
letter-spacing: 5px;
font-weight: bold;
opacity: 0.5;
}
.mail2{ grid-area: 2 / 1 / 6 / 6;
}
/* mail おわり */

    
/* --- レスポンシブおわり ----- */  
}