@charset "UTF-8";

/* レイアウトをリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.about {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 2rem;
}    
    @media screen and (min-width: 744px) {
        .about {
            padding: 0 2.5rem;
        }   
    }

    @media screen and (min-width: 1024px) {
        .about {
            padding: 0 3.5rem;
            gap: 6rem;
        }   
    }

.about-us,
.profile {
    display: flex;
    flex-direction: column;
}
    @media screen and (min-width: 744px) {
        .about-us,
        .profile {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .about-us,
        .profile {
            gap: 3.5rem;
        }   
    }

.origin-of-tmaa {
    display: flex;
    flex-direction: column;
}
    @media screen and (min-width: 744px) {
        .origin-of-tmaa {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5rem;
        }

        /*---左右反転---*/
        .origin-of-tmaa img {
            order: 2;
        }

        .origin-of-tmaa-conttent {
            order: 1 ;
        }
    }

    @media screen and (min-width: 1024px) {
        .origin-of-tmaa {
            row-gap: 3.5rem;
        }
    }

.about-us img {
    width: 100%;
}

.about-section-tile-container {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
}
    @media screen and (min-width: 744px) {
        .about-section-tile-container {
            padding-bottom:1.75rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .about-section-tile-container {
            padding-bottom:2rem;
        }
    }

.about-section-tile-container h2 {
    font-family: var(--en-font);
    font-weight: 300;
    color: var(--main-color);

    font-size: 1.5rem;
}
    @media screen and (min-width: 744px) {
        .about-section-tile-container h2 {
            font-size: 1.75rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .about-section-tile-container h2 {
            font-size: 2rem;
        }
    }

.about-section-tile-container p {
    font-family: var(--jp-font);
    font-weight: 300;
    color: var(--sub-color);

    font-size: 0.875rem;
}
    @media screen and (min-width: 1024px) {
        .about-section-tile-container p {
            font-size: 1rem;
        }
    }

.about-us-item,
.origin-of-tmaa-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
    @media screen and (min-width: 744px) {
        .about-us-item,
        .origin-of-tmaa-item {
            gap: 1.25rem;
        }
    }

    @media screen and (min-width: 1024px) {
        .about-us-item,
        .origin-of-tmaa-item {
            gap: 1.5rem;
        }
    }

.origin-of-tmaa img {
    width: 100%;
    height: auto;
}

.profile-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile img {
    width: 60%;
    justify-self: end;
}

.about-us-item p,
.origin-of-tmaa-item p {
    font-family: var(--jp-font);
    font-weight: 300;
    color: var(--main-color);
    font-size: 1rem;
}

.profile-item-details {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    font-family: var(--jp-font);
    font-weight: 300;
    color: var(--main-color);
}