*,
::after,
::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    letter-spacing: .08em
}

ol li,
ul li {
    list-style: none
}

:root {
    --text-color: #333;
    --border-color: #f3f3f3;
    --border-dark-color: #999;
    --key-color: #d7e2df
}

html {
    font-family: Roboto, "Noto Sans JP", sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

.global-layout {
    display: grid;
    grid-template: "header" auto "contents" 1fr "footer" auto/100%;
    min-height: 100vh
}

.global-layout__header {
    position: fixed;
    top: 0;
    left: 0;
    grid-area: header;
    width: 100%
}

@media screen and (max-width:768px) {
    .global-layout__header {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        background-color: #fff;
        transition: transform .4s;
        transform: translate(-100%)
    }

    .global-layout__header.is-active {
        transform: translate(0)
    }
}

.global-layout__hamburger-button {
    position: fixed;
    top: 12px;
    right: 16px
}

.global-layout__contents {
    grid-area: contents
}

.global-layout__footer {
    grid-area: footer
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px
}

@media screen and (max-width:768px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        background-color: #fff
    }
}

.header__navigation {
    display: flex;
    column-gap: 32px;
    align-items: center;
    justify-content: flex-start;
    list-style: none
}

@media screen and (max-width:768px) {
    .header__navigation {
        position: fixed;
        top: 75px;
        left: 0;
        flex-direction: column;
        column-gap: 0;
        align-items: flex-start;
        width: 100%;
        background-color: #fff
    }

    .header__navigation li {
        width: 100%
    }

    .header__navigation li:first-child a {
        border-top: 1px solid var(--border-dark-color)
    }

    .header__navigation a {
        display: block;
        padding: 16px 32px;
        border-bottom: 1px solid var(--border-dark-color)
    }
}

.hamburger-button {
    width: 48px;
    height: 48px;
    background-color: transparent;
    border: none;
    appearance: none
}

@media screen and (min-width:769px) {
    .hamburger-button {
        display: none
    }
}

.hamburger-button__close,
.hamburger-button__open {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.hamburger-button__open {
    opacity: 1
}

.hamburger-button__close {
    opacity: 0
}

.hamburger-button.is-active .hamburger-button__open {
    opacity: 0
}

.hamburger-button.is-active .hamburger-button__close {
    opacity: 1
}

.hamburger-button__label {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    font-size: .75rem;
    text-align: center
}

.contents-layout {
    display: flex;
    flex-direction: column;
    row-gap: 120px;
    padding-bottom: 120px
}

.footer {
    padding: 16px 0;
    text-align: center;
    background-color: var(--key-color)
}

.section-title {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-color);
    text-align: center
}


.section-title:after,
.section-title:before {
    display: inline-block;
    width: 16px;
    content: "";
    border-bottom: 2px solid var(--text-color)
}

@media screen and (max-width:768px) {
    .alternating-layout {
        display: flex;
        flex-direction: column;
        gap: 64px
    }
}

.alternating-layout__item {
    display: flex
}

@media screen and (min-width:769px) {
    .alternating-layout__item:nth-child(2n) {
        flex-direction: row-reverse
    }
}

@media screen and (max-width:768px) {
    .alternating-layout__item {
        flex-direction: column;
        gap: 24px
    }
}

.alternating-layout__description,
.alternating-layout__image {
    flex-shrink: 0;
    width: 50%
}

@media screen and (max-width:768px) {

    .alternating-layout__description,
    .alternating-layout__image {
        width: 100%;
        height: 300px
    }
}

.alternating-layout__image {
    display: block;
    object-fit: cover
}

.alternating-layout__description {
    display: grid;
    place-items: center
}

.alternating-layout__text {
    max-width: 600px;
    padding: 0 24px;
    font-size: 1.2rem;
    line-height: 1.8
}

.simple-list {
    display: flex;
    flex-direction: column
}

.simple-list__item {
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color)
}

.simple-list__item:last-child {
    border-bottom: none
}

.timeline {
    display: flex;
    column-gap: 16px
}

.card {
    display: flex;
    flex-direction: column;
    row-gap: 8px
}

.card__image {
    display: block;
    width: 100%;
    height: auto
}

.card__title {
    font-size: 1.3rem
}

.card__text {
    font-size: .9rem
}

.card-list {
    display: flex;
    gap: 32px 24px;
    justify-content: center
}

@media screen and (max-width:768px) {
    .card-list {
        flex-direction: column;
        gap: 32px 0
    }
}

.card-list__item {
    width: 360px
}

@media screen and (max-width:768px) {
    .card-list__item {
        width: 100%;
        padding: 0 24px
    }
}

.simple-table {
    display: grid;
    grid-template-columns: 160px auto
}

.simple-table__head {
    padding: 16px 8px;
    font-weight: 700;
    line-height: 2;
    border-bottom: 1px solid var(--border-color)
}

.simple-table__head:last-of-type {
    border: none
}

.simple-table__description {
    padding: 16px 0;
    line-height: 2;
    border-bottom: 1px solid var(--border-color)
}

.simple-table__description:last-of-type {
    border: none
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    justify-content: center
}

.tag-list__item {
    display: block;
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: .85rem;
    border: 1px solid var(--border-dark-color);
    border-radius: 4px
}

.main-visual {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
    /*background-image: url();*/
    background-color: #2ed8eeff;
    background-position: 0 100%;
    background-size: cover
}

.main-visual__title {
    font-size: 14rem;

    text-align: center
}

.main-visual__title_h3 {
    font-size: 3rem;
    text-align: center
}


.missions {
    display: flex;
    flex-direction: column;
    gap: 32px 0
}

.missions__text {
    display: grid;
    place-items: center
}

.missions__text-inner {
    width: 600px;
    font-size: 1.2rem;
    line-height: 1.8
}

@media screen and (max-width:768px) {
    .missions__text-inner {
        width: auto;
        padding: 0 24px
    }
}

.service {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.news {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center
}

.news__list {
    width: 640px
}

@media screen and (max-width:768px) {
    .news__list {
        width: auto;
        padding: 0 24px
    }
}

.works {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.company {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center
}

.company__table {
    width: 640px
}

@media screen and (max-width:768px) {
    .company__table {
        width: auto;
        padding: 0 24px
    }
}

.credits {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center
}

.credits__lead {
    font-size: 1.1rem;
    text-align: center
}

.credits__list {
    width: 800px
}

@media screen and (max-width:768px) {
    .credits__list {
        width: auto;
        padding: 0 24px
    }
}