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

/* メッセージはじまり */
.message {
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: 500px;
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;
}

.message1 { grid-area: 1 / 1 / 3 / 2;
text-align: center;
padding: 10px;
padding-top: 30px;
transform : rotate(-12deg);  
line-height: 2em;
}
.message1 p{
font-size: 28px;
color: #fff;
letter-spacing: 5px;
}
.message2 { grid-area: 1 / 2 / 6 / 6; 
padding: 50px;
padding-left: 200px;
padding-right: 100px;
}

.message2 h3{
font-size: 22px;
color: #fff;
font-weight: bold;
text-align: left;
letter-spacing: 7px;
text-shadow   : 1px 1px 1px #66ccff;
}
.message2 p{
text-align: left;
font-weight: 100;
font-size: 14px;
color: #fff;
letter-spacing: 3px;
line-height: 2em;
}
.message2 h4{
font-size: 16px;
color: #fff;
font-weight: bold;
text-align: right;
letter-spacing: 5px;
font-family: "Yuji Boku", serif;
}
/* メッセージおわり */

/* --- 沿革 はじまり ----- */
.history {
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: 800px;
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;
}
.history a:hover{
opacity: 1;
}
.history1 { grid-area: 1 / 1 / 2 / 4;
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.history2 { grid-area: 1 / 1 / 2 / 2; 
text-align: left;
padding: 0px;
padding-top: 0px;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.history2 p{
font-size: 28px;
color: #fff;
letter-spacing: 5px;  
}
.history3 { grid-area: 2 / 2 / 5 / 5; }
/* --- 沿革 おわり ----- */

/* --- 概要　はじまり ----- */
.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: 800px;
background: #f5f5f5;
background-image:  radial-gradient(#c0c0c0 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;
}
.about1 { grid-area: 1 / 3 / 2 / 6;
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.about2 { grid-area: 1 / 5 / 2 / 6;
text-align: center;
padding: 10px;
padding-top: 0px;
transform : rotate(10deg);  
margin-right: 30px;
line-height: 2em;
}
.about2 p{
font-size: 28px;
color: #494544;
letter-spacing: 5px;  
}
.about3 { grid-area: 2 / 1 / 6 / 5; 
padding: 30px;
}
/* --- 概要 おわり ----- */

/* --- アクセス はじまり ----- */
.map {
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;
}
.map a:hover{
opacity: 1;
}
.map1 { grid-area: 1 / 1 / 2 / 4;
text-align: center;
font-size: 90px;
letter-spacing: 20px;
font-weight: bold;
opacity: 0.5;
}
.map2 { grid-area: 1 / 1 / 2 / 2; 
text-align: left;
padding: 0px;
padding-top: 0px;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.map2 p{
font-size: 28px;
color: #fff;
letter-spacing: 5px;  
}
.map3 { grid-area: 2 / 3 / 6 / 6; 
padding: 30px;
}
.map3 iframe{
width: 100%;
height: 100%;
border-radius: 5px;
}
.map4 { grid-area: 5 / 1 / 6 / 3; 
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 3px;
line-height: 1.5em;
text-align:left;
padding: 20px;
}
.map5 { grid-area: 2 / 1 / 5 / 3; 

text-align: center;
}
.map5 img{
width: 70%;
height: 100%;
}
/* --- アクセス おわり ----- */

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

/* メッセージはじまり */
.message {
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: 500px;
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;
}

.message1 { grid-area: 1 / 1 / 2 / 6;
text-align: right;
padding: 10px;
padding-top: 10px;
transform : rotate(12deg);  
line-height: 2em;
}
.message1 p{
font-size: 18px;
color: #fff;
letter-spacing: 5px;
}
.message2 { grid-area:2 / 1 / 6 / 6; 
padding: 10px;
padding-left: 10px;
padding-right: 10px;
}

.message2 h3{
font-size: 16px;
color: #fff;
font-weight: bold;
text-align: left;
letter-spacing: 2px;
text-shadow   : 1px 1px 1px #66ccff;
}
.message2 p{
text-align: left;
font-weight: 100;
font-size: 12px;
color: #fff;
letter-spacing: 2px;
line-height: 2em;
}
.message2 h4{
font-size: 12px;
color: #fff;
font-weight: bold;
text-align: right;
letter-spacing: 2px;
font-family: "Yuji Boku", serif;
}
/* メッセージおわり */

/* --- 沿革 はじまり ----- */
.history {
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 #000000;
border-radius: 10px;
}
.history a:hover{
opacity: 1;
}
.history1 { grid-area: 1 / 1 / 2 / 4;
text-align: center;
font-size: 48px;
letter-spacing: 10px;
font-weight: bold;
opacity: 0.5;
}
.history2 { grid-area: 1 / 1 / 2 / 2; 
text-align: left;
padding: 0px;
padding-top: 0px;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.history2 p{
font-size: 18px;
color: #fff;
letter-spacing: 5px;  
}
.history3 { grid-area: 2 / 1 / 6 / 6; 
padding: 10px;
}
/* --- 沿革 おわり ----- */

/* --- 概要　はじまり ----- */
.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: 800px;
background: #f5f5f5;
background-image:  radial-gradient(#c0c0c0 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;
}
.about1 { grid-area: 1 / 1 / 2 / 6; 
text-align: center;
font-size: 48px;
letter-spacing: 10px;
font-weight: bold;
opacity: 0.5;
}
.about2 { grid-area: 1 / 3 / 2 / 6;
text-align: right;
padding: 10px;
padding-top: 0px;
transform : rotate(10deg);  
margin-right: 10px;
line-height: 2em;
}
.about2 p{
font-size: 18px;
color: #494544;
letter-spacing: 5px;  
}
.about3 { grid-area: 2 / 1 / 6 / 6; 
padding: 10px;
}
/* --- 概要 おわり ----- */

/* --- アクセス はじまり ----- */
.map {
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;
}
.map a:hover{
opacity: 1;
}
.map1 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
font-size: 48px;
letter-spacing: 10px;
font-weight: bold;
opacity: 0.5;
}
.map2 { grid-area: 1 / 1 / 2 / 4; 
text-align: left;
padding: 0px;
padding-top: 0px;
transform : rotate(-10deg);  
margin-left: 30px;
line-height: 2em;
}
.map2 p{
font-size: 18px;
color: #fff;
letter-spacing: 5px;  
}
.map3 { grid-area: 3 / 1 / 6 / 6;
padding: 10px;
}
.map3 iframe{
width: 100%;
height: 100%;
border-radius: 5px;
}
.map4 { grid-area: 2 / 1 / 3 / 6; 
font-size: 12px;
font-weight: 300;
color: #fff;
letter-spacing: 3px;
line-height: 1.5em;
text-align:left;
padding: 20px;
}
.map5 { grid-area: 2 / 1 / 6 / 3; 
text-align: center;
display: none;
}
.map5 img{
width: 70%;
height: 100%;
}
/* --- アクセス おわり ----- */
  
/* --- 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 おわり ----- */
    
/* --- レスポンシブおわり ----- */  
}