@charset "utf-8";

/* ヘッダー背景 */
.top-bg01{
width: 100%;
height: 100vh;
}

.top-bg02{
text-align: center;
padding-top: 25%;
padding-right:0%;
}

.top-bg02 h3{
color:#494544;
font-size: 3.5vw;
text-align: center;
letter-spacing: 15px;
transform : rotate(0deg);  
}

.top-bg02 h1{
color:#494544;
text-align: center;
font-size: 1.5vw;
letter-spacing: 5px;
font-weight: bold;
}

.index-bg {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
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: #f3f3f3;
background-image: url(../image/bg03.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.index-bg li:nth-child(2) {
background: #fff;
background-image: url(../image/bg02.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.index-bg li:nth-child(3) {
background: #fff;
background-image: url(../image/bg03.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.index-bg li:nth-child(4) {
background: #fff;
background-image: url(../image/bg04.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-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 }
}
/* ヘッダー背景終わり */

/* --- 会社概要　はじまり ----- */
.about {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 140vh;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}

.about1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.about2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.about2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.about2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.about3 { grid-area: 2 / 1 / 6 / 6; 
text-align: center;
padding: 20px;
margin-left: 15%;
margin-right: 15%;
}
/* --- 会社概要　おわり ----- */

/* --- 沿革　はじまり ----- */
.history {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 140vh;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}

.history1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.history2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.history2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.history2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.history3 { grid-area: 2 / 1 / 6 / 6; 
text-align: center;
padding: 20px;
margin-left: 10%;
margin-right: 10%;
}
/* --- 沿革　おわり ----- */

/* --- 交通アクセス　はじまり ----- */
.access {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 140vh;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}

.access1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.access2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.access2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.access2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.access3 { grid-area: 2 / 1 / 5 / 6; 
text-align: center;
padding: 20px;
}
.access3 iframe{
width: 100%;
height: 100%;
border-radius: 5px;
}
.access4 { grid-area: 5 / 1 / 6 / 6; 
text-align: center;
padding: 20px;
}
.access4 h3{
font-size: 18px;
font-weight: bold;
color: #494544;
letter-spacing: 3px;
line-height: 0.3em;
}
.access4 p{
font-size: 14px;
font-weight: 300;
color: #494544;
letter-spacing: 3px;
line-height: 1.5em;
}
/* --- 交通アクセス　おわり ----- */

/* --- お知らせ　はじまり ----- */
.news {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 90vh;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}
.news a{
color: blue;
}
.news a:hover{
opacity: 0.5;
}
.news1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.news2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.news2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.news2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.news3 { grid-area: 2 / 1 / 6 / 6; 
text-align: center;
padding: 20px;
}
/* --- お知らせ　おわり ----- */

/* --- お問い合わせ　はじまり ----- */
.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: 60vh;
border-radius: 10px;
background: rgba(82,215,97,0.8);
opacity: 0.9;
box-shadow: 0px 0px 0px #000000;
border-radius: 5px;
}
.top-contact a:hover{
opacity: 1;
}
.top-contact1 { grid-area: 1 / 1 / 4 / 5;
padding: 10px;
}
.top-contact1 p{
color: #fff;
font-weight: bold;
font-size: 5vw;
padding: 10px;
letter-spacing: 10px;
line-height: 0.2em;
}
.top-contact2 { grid-area: 4 / 4 / 5 / 6;
font-size: 2vw;
color: #fff;
letter-spacing: 2px;
font-weight: bold;
}
.top-contact3 { grid-area: 4 / 1 / 6 / 4; 
text-align: center;
}
.top-contact3 p{
color: #fff;
line-height: 0.5em;
letter-spacing: 2px;
font-size: 2vw;
font-weight: bold;
}
.top-contact3 h6{
font-size: 1vw;
font-weight: bold;
}
.top-contact4 { grid-area: 5 / 5 / 6 / 6; 
}
/* --- お問い合わせ　おわり ----- */

/* --- レスポンシブはじまり ----- */

@media (max-width: 768px){

/* ヘッダー背景 */
.top-bg01{
width: 100%;
height: 100vh;
}

.top-bg02{
text-align: center;
padding-top: 75%;
padding-right:0%;
}

.top-bg02 h3{
color:#494544;
font-size: 6vw;
text-align: center;
letter-spacing: 5px;
transform : rotate(0deg);  
font-weight: bold;
}

.top-bg02 h1{
color:#494544;
text-align: center;
font-size: 2.5vw;
letter-spacing: 5px;
font-weight: bold;
}

.index-bg {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
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: #f3f3f3;
background-image: url(../image/bg03.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.index-bg li:nth-child(2) {
background: #fff;
background-image: url(../image/bg02.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.index-bg li:nth-child(3) {
background: #fff;
background-image: url(../image/bg03.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.index-bg li:nth-child(4) {
background: #fff;
background-image: url(../image/bg04.png);
background-attachment:fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
-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 }
}
/* ヘッダー背景終わり */


/* --- 会社概要　はじまり ----- */
.about {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 800px;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}

.about1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.about2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.about2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.about2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.about3 { grid-area: 2 / 1 / 6 / 6; 
text-align: center;
padding: 5px;
margin-left: 0%;
margin-right: 0%;
}
/* --- 会社概要　おわり ----- */

/* --- 沿革　はじまり ----- */
.history {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 800px;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}

.history1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.history2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.history2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.history2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.history3 { grid-area: 2 / 1 / 6 / 6; 
text-align: center;
padding: 5px;
margin-left: 0%;
margin-right: 0%;
}
/* --- 沿革　おわり ----- */

/* --- 交通アクセス　はじまり ----- */
.access {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 800px;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}

.access1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.access2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 5px;
border-bottom: 2px solid red;
}
.access2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.access2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.access3 { grid-area: 2 / 1 / 5 / 6; 
text-align: center;
padding: 5px;
}
.access3 iframe{
width: 100%;
height: 100%;
border-radius: 5px;
}
.access4 { grid-area: 5 / 1 / 6 / 6; 
text-align: left;
padding: 5px;
}
.access4 h3{
font-size: 18px;
font-weight: bold;
color: #494544;
letter-spacing: 3px;
line-height: 0.3em;
}
.access4 p{
font-size: 14px;
font-weight: 300;
color: #494544;
letter-spacing: 3px;
line-height: 1.5em;
}
/* --- 交通アクセス　おわり ----- */  

/* --- お知らせ　はじまり ----- */
.news {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 0.3fr repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: auto;
height: 500px;
opacity: 0.99;
border-radius: 0px;
background-image: url(../image/bg10.png);
background-repeat: no-repeat;
background-position:center center;
background-size: cover;
border: 0px solid red;
}
.news a{
color: blue;
}
.news a:hover{
opacity: 0.5;
}
.news1 { grid-area: 1 / 1 / 6 / 6;
background: rgba(255,255,255,0.8);
}
.news2 { grid-area: 1 / 1 / 2 / 6;
text-align: center;
padding: 20px;
border-bottom: 2px solid red;
}
.news2 p{
font-size: 24px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.news2 h6{
font-size: 12px;
color: #494544;
letter-spacing: 3px;
font-weight: bold;
line-height: 0.5em;
}
.news3 { grid-area: 2 / 1 / 6 / 6; 
text-align: center;
padding: 5px;
}
/* --- お知らせ　おわり ----- */

/* --- お問い合わせ　はじまり ----- */
.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: rgba(82,215,97,0.8);
opacity: 0.9;
box-shadow: 0px 0px 0px #000000;
border-radius: 5px;
}
.top-contact a:hover{
opacity: 1;
}
.top-contact1 { grid-area: 1 / 1 / 3 / 6;
padding: 10px;
}
.top-contact1 p{
color: #fff;
font-weight: bold;
font-size: 10vw;
padding: 10px;
letter-spacing: 10px;
line-height: 0.2em;
}
.top-contact2 { grid-area: 3 / 1 / 4 / 6;
font-size: 3vw;
color: #fff;
letter-spacing: 2px;
font-weight: bold;
padding-left: 10px;
}
.top-contact3 { grid-area: 4 / 1 / 5 / 6; 
text-align: center;
}
.top-contact3 p{
color: #fff;
line-height: 0.5em;
letter-spacing: 2px;
font-size: 5vw;
font-weight: bold;
}
.top-contact3 h6{
font-size: 3vw;
font-weight: bold;
}
.top-contact4 { grid-area: 5 / 1 / 6 / 6; 
text-align: center;
}
/* --- お問い合わせ　おわり ----- */
    
}
/* --- レスポンシブおわり ----- */