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

/* お知らせ　はじまり */
.info {
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: 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;
}
.info1 { grid-area: 1 / 1 / 2 / 6;
text-align: left;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
padding-left: 30px;
}
.info2{ grid-area: 2 / 1 / 6 / 6;
padding: 50px;
}
/* お知らせ　おわり */

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

/* お知らせ　はじまり */
.info {
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: 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 #fff;
}
.info1 { grid-area: 1 / 1 / 2 / 6;
text-align: left;
font-size: 48px;
letter-spacing: 10px;
font-weight: bold;
opacity: 0.5;
padding-left: 30px;
}
.info2{ grid-area: 2 / 1 / 6 / 6;
padding: 10px;
}
/* お知らせ　おわり */
    

/* --- 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 おわり ----- */
    
}
/* --- レスポンシブ終わり ----- */