body {
margin: 0;
padding: 0;
font-family:'游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
}
li {
list-style: none;
}
header {
background-image: url(img/spring-733507_1280.jpg);
background-position: bottom;
background-size:cover;
height: 80vh;
}
.header-box {
height:80vh;
width: 300px;
background-color: white ;
opacity: 0.8;
margin-left:15%;
}
header h1 {
margin:0;
text-align: center;
line-height: 80vh;
color:rgb(37, 37, 37);
}
.menu-btn .fa-bars{
color:#272322;
text-decoration-color:#272322 ;
float: right;
margin:20px 40px;
}
.fa-bars:hover {
color:white;
cursor: pointer;
}
.menu-btn {
position: fixed;
top: 10px;
right: 10px;
z-index: 2;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin:10px;
}
.menu {
position: fixed;
top:0;
right: 0;
z-index: 1;
width: 50vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #555;
opacity: 0.8;
transform: translateX(100vw);
transition: transform 1s linear;
font-size:40px;
padding-top:30px;
}
.menu.is-active{
transform: translateX(0);
}
.menu a {
color:#4CCC8C;
}
.company-information {
margin-bottom: 110px;
}
.company-information h1 {
text-align: center;
margin-bottom: 50px;
padding-top:50px;
padding-bottom:50px;
}
.company {
width: 60%;
margin: 0 auto;
}
.company th, .company td {
border-bottom: 1px solid #4CCC8C;
padding: 20px 20px 20px 20px;
}
.company th {
font-weight: bold;
background-color:#4CCC8C;
color:white;
border-bottom:1px solid white;
text-align: center;
}
.company-information div{
text-align: center;
padding:80px 0 30px 0;
}
footer {
width: 100%;
height: 60px;
background-color:#4CCC8C;
color:white;
align-items: center;
font-size: 16px;
font-weight: bold;
}
.container3 {
width:100%;
margin:0 auto;
}
footer ul {
display:flex;
justify-content: center;
align-items: center;
padding:0;
margin: 0;
}
footer li {
padding:15px;
}
footer a {
color:white;
text-decoration-style:solid;
}
@media screen and (max-width: 767px) {
.company,
.company tr,
.company td,
.company th {
display:block;
text-align: center;
}
.company th {
width:auto;
text-align: center
}
footer {
font-size: 0.8em;
}
}
FRIENDLY COMPANY
