@charset "utf-8";

.blank{
width: auto;
height: 85px;
background: #fff;
}
/* ヘッダー背景 */
.top-bg01{
width: 100%;
height: 100vh;
background:rgba(73,69,68,0);
}

.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:bold;
  text-shadow    : 
       2px  2px 1px #494544,
      -2px  2px 1px #494544,
       2px -2px 1px #494544,
      -2px -2px 1px #494544,
       2px  0px 1px #494544,
       0px  2px 1px #494544,
      -2px  0px 1px #494544,
       0px -2px 1px #494544; 
}


.top-bg02 h4{
font-size: 24px;
text-align: center;
line-height: 1em;
font-weight:bold;
color: #fff;
  text-shadow    : 
       2px  2px 1px #494544,
      -2px  2px 1px #494544,
       2px -2px 1px #494544,
      -2px -2px 1px #494544,
       2px  0px 1px #494544,
       0px  2px 1px #494544,
      -2px  0px 1px #494544,
       0px -2px 1px #494544;
}
.index-bg {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
background: transparent;
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/bg01.png);
}

.index-bg li:nth-child(2) {
background-image: url(../images-home2/bg02.png);
-webkit-animation-delay: 10s;
animation-delay: 10s;
}

.index-bg li:nth-child(3) {
background-image:url(../images-home2/bg03.png);
-webkit-animation-delay: 20s;
animation-delay: 20s;
}

.index-bg li:nth-child(4) {
background-image: url(../images-home2/bg04.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-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: 700px;
background: #fafafa;
background-image:  radial-gradient(#f0f0f0 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-news a{
color: blue;
}
.top-news a:hover{
opacity: 0.5;
}
.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;
padding: 0px;
padding-top: 0px;
transform : rotate(0deg);  
margin-left: 30px;
line-height: 2em;
}
.top-news2 p{
font-size: 28px;
color: #494544;
letter-spacing: 5px;  
}
.top-news3 { grid-area: 2 / 2 / 5 / 5; }
.top-news4 { grid-area: 5 / 5 / 6 / 6;
padding: 20px;
}
/* --- リリース おわり ----- */

/* --- 概要　はじまり ----- */
.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: #fafafa;
background-image:  radial-gradient(#f0f0f0 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;
}
.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(0deg);  
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: #fafafa;
background-image:  radial-gradient(#f0f0f0 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;
}
.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(0deg);  
margin-left: 30px;
line-height: 2em;
}
.map2 p{
font-size: 28px;
color: #494544;
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; 

}
.map5 { grid-area: 2 / 1 / 5 / 3; 
font-size: 14px;
font-weight: 300;
color: #494544;
letter-spacing: 3px;
line-height: 1.5em;
text-align:left;
padding: 20px;
}
/* --- アクセス おわり ----- */

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

/* top 背景はじまり */
.top-bg02{
text-align: center;
padding-top: 60%;
padding-right:0%;
color:#fff;
letter-spacing: 2px;
}

.top-bg02 h3{
font-size: 18px;
text-align: center;
line-height: 2em;
font-weight:bold;
  text-shadow    : 
       2px  2px 1px #494544,
      -2px  2px 1px #494544,
       2px -2px 1px #494544,
      -2px -2px 1px #494544,
       2px  0px 1px #494544,
       0px  2px 1px #494544,
      -2px  0px 1px #494544,
       0px -2px 1px #494544; 
}
/* top 背景はじまり */

/* --- リリース はじまり ----- */
.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: #fafafa;
background-image:  radial-gradient(#f0f0f0 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-news a:hover{
opacity: 1;
}
.top-news1 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
font-size: 36px;
letter-spacing: 5px;
font-weight: bold;
opacity: 0.5;
}
.top-news2 { grid-area: 1 / 1 / 2 / 4; 
text-align: left;
padding: 0px;
padding-top: 0px;
transform : rotate(0deg);  
margin-left: 10px;
line-height: 2em;
}
.top-news2 p{
font-size: 16px;
color: #494544;
letter-spacing: 2px;  
}
.top-news3 { grid-area: 2 / 1 / 6 / 6; }
.top-news4 { grid-area: 5 / 5 / 6 / 6;
padding: 10px;
display: none;
}
/* --- リリース おわり ----- */

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

/* --- アクセス はじまり ----- */
.map {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 0.3fr repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 500px;
background: #fafafa;
background-image:  radial-gradient(#f0f0f0 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;
}
.map a:hover{
opacity: 1;
}
.map1 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
font-size: 36px;
letter-spacing: 5px;
font-weight: bold;
opacity: 0.5;
}
.map2 { grid-area: 1 / 1 / 2 / 4; 
text-align: left;
padding: 0px;
padding-top: 0px;
transform : rotate(0deg);  
margin-left: 10px;
line-height: 2em;
}
.map2 p{
font-size: 16px;
color: #494544;
letter-spacing: 2px; 
}
.map3 { grid-area: 3 / 1 / 6 / 6; 
padding: 10px;
}
.map3 iframe{
width: 100%;
height: 100%;
border-radius: 5px;
}
.map4 { grid-area: 3 / 1 / 6 / 6; 
display: none;
}
.map5 { grid-area: 2 / 1 / 3 / 6; 
font-size: 12px;
font-weight: 300;
color: #494544;
letter-spacing: 2px;
line-height: 1.5em;
text-align:left;
padding: 10px;
}
/* --- アクセス おわり ----- */

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