@charset "UTF-8";

html {
    /* max-width: 1440px; */
    background-color: white;
    color: black;
}
.header {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 120px;
}
.header img {
    height: 120px;
}
.header nav {
    width: 30%;
    display: flex;
    align-items: center;
}
.header ul {
    width: 700px;
    display: flex;
    justify-content: space-evenly;
}
.header li {
    padding: 1%;
}
.header a {
    color: white;
    text-decoration: none;
}
.fv {
    height: 100vh;
    background-image: url(../img/hekikai-12.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   
    font-size: 50px; 
}
.fv span {
    color: aquamarine;
}
.fv p {
    margin-top: 50px;
    font-size: 30px;
}
.news {
    background-color: aquamarine;
}
.news-contents {
    display: flex;
    justify-content: space-between;
}
.news-title {
    display: flex;
    flex-direction: column;
    margin: 1%;
    font-size: 30px;
}
.news-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 22px;
}
.news-slide-title {
    background-color: white;
    color: aquamarine;
    width: 100px;
    text-align: center;
    margin: 1%;
}
.news-date {
    display: flex;
    color: black;
}
.news-date p {
    margin-right: 100px;
}
.news-more {
    width: 20%;
    text-align: center;
    background-color: white;
    font-size: 30px;
    color: aquamarine;
    padding: 1%;
}
:where(button) {
    border-style: solid;
    background-color: white;
}
.concept {
    width: 80%;
    display: flex;
    margin: 10% auto;
}
.concept > div {
    width: 50%;
    display: flex
;
    flex-direction: column;
    justify-content: center;
}
.concept h2 {
    margin: 5%;
    font-size: 38px;
}
.concept span {
    color: aquamarine;
}
.concept p {
    font-size: 20px;
    text-align: left;
    margin: 5%;
}
.concept img {
    width: 100%;
}
.more {
    padding: 1%;
    width: 30%;
    text-align: center;
    margin: 5%;
    font-size: 20px;
    background-color: aquamarine;
}
.more a {
    text-decoration: none;
    color: white;
    font-size: 20px;
}
.service {
    display: flex;
    justify-content: center;
}
.service img {
    margin-left: 10%;
    width: 30%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.service div {
    width: 40%;
    margin-left: 10%;
    display: flex;
    flex-direction: column;
}
.service h2 {
    font-size: 50px;
}
.service h4 {
    font-size: 20px;
    color: aquamarine;
}
.service p {
    margin: 3% 3% 3% 0;
    font-size: 30px;
}

.reason {
    width: 100%;
    padding: 5%;
}
.reason > div {
    display: flex;
    flex-direction: column;
}
.reason h2 {
    display: flex;
    justify-content: center;
    font-size: 30px;
}
.reason-reason {
    width: 33%;
    text-align: center;
    padding: 3%;
}
.reason-reason span {
    color: aquamarine;
    display: flex;
    justify-content: center;
    font-size: 30px;
    font-weight: 600;
}
.reason > div > div {
    display: flex;
    justify-content: space-around;
}
.reason-reason img {
    height: 300px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
.reason-reason p {
    text-align: left;
}

.works {
    width: 100%;
    height: 600px;
}
.works > div {
    display: flex;
}
.works img {
    max-width: 720px;
    position: absolute;
    margin-left: 15%;
}
.works-1 {
    position: relative;
    width: 20%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    align-items: center;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    top: 100px;
    left: 800px;
}
.works-title {
    display: flex;
    gap: 40px;
    align-items: center;
}
.works-1 h2 {
    color: aquamarine;
}
.works-1 h4 {
    color: aquamarine;
}


.pickup {
    padding: 5%;
    background-color: aquamarine;
}
.pickup h2 {
    color: white;
    text-align: center;
    font-size: 50px;
}
.pickup h3 {
    color: white;
    text-align: center;
    font-size: 30px;
    margin: 10px;
}
.pickup > div {
    display: flex;
    flex-direction: column;
}
.pickup-content-block {
    display: flex;
}
.pickup-content {
    background-color: white;
    width: 33%;
    margin: 3%;
}
.pickup-content img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.pickup-txt {
    padding: 5%;
}
.more2 {
    display: flex;
    padding: 1%;
    text-align: center;
    margin: 0 40%;
    font-size: 20px;
    background-color: white;
    justify-content: center;
}
.more2 a {
    text-decoration: none;
    color: aquamarine;
    font-size: 20px;
    font-weight: 600;
}

.footer {
    display: flex;
    justify-content: space-around;
}
.footer img {
    width: 100px;
    margin-bottom: 50%;
}
.footer > div {
    padding: 5%;
    display: flex;
    flex-direction: column;
}
.footer ul {
    width: 100px;
}
.footer li {
    padding: 5%;
}
.footer a {
    color: black;
    text-decoration: none;
}