@charset "UTF-8";

/*
SP ～519px
tab 520px～959px
pc 960px～
*/



/* -----story----- */

.story {
    background-color: var(--color-beige);
    background-image: url(../../img/back_texture.png);
    background-repeat: repeat;
    width: 100%;
    padding: 80px 0;
    font-family: var(--font-ryo-mincho);
    font-weight: 500;
}

@media screen and (min-width:729px) {
    .story {
        padding: 160px 0;
    }
}

/* storyのコンテンツ */

.story .story_contents_flex img {
    margin-bottom: var(--gutter-40px);
    order: 1;
}

.story .story_headline {
    font-size: var(--size-18px);
    margin-bottom: var(--gutter-40px);
    font-weight: 500;
}

@media screen and (min-width:729px) {
    .story .story_contents_flex {
        display: flex;
        gap: var(--gutter-60px);
        align-items: flex-start;
        height: 100%;
    }

    .story .story_contents_flex img {
        max-width: 470px;
        position: sticky;
        top: 0;
    }

    .story .story_headline {
        font-size: var(--size-20px);
        margin-bottom: var(--gutter-48px);
    }
}


/* -----development----- */

/* 背景の設定 */
.development.section {
    padding: 0;
}

.development .center {
    padding-top: 60px;
    padding-bottom: var(--gutter-80px);
}

@media screen and (min-width:729px) {
    .development.section {
        padding: 0;
    }

    .development .center {
        padding-top: 80px;
        padding-bottom: var(--gutter-120px);
    }
}

/* developmentのコンテンツ */

.development ul {
    display: grid;
    gap: var(--gutter-48px);
}

.development ul li {
    position: relative;
}

.development ul .deve_count {
    /* 位置 */
    position: absolute;
    top: -32px;
    left: 17px;
    /* フォント */
    font-family: var(--font-ryo-mincho);
    font-size: var(--size-32px);
    text-shadow: 0px 0px 3px var(--color-white);
}

.development ul img {
    margin-bottom: var(--gutter-16px);
}

.development ul .deve_title {
    margin-bottom: var(--gutter-16px);
    /* フォント */
    font-family: var(--font-ryo-mincho);
    font-size: var(--size-18px);
    font-weight: 500;
    line-height: 1;
}

.development ul .deve_text {
    font-size: var(--size-14px);
}


@media screen and (min-width:729px) {
    .development ul {
        grid-template-columns: 1fr 1fr;
        gap: var(--gutter-60px);
    }

    .development ul .deve_count {
        /* 位置 */
        position: absolute;
        top: -32px;
        /* フォント */
        font-size: var(--size-32px);
    }
}

/* -----company----- */

.company .company_contents_flex {
    display: grid;
    gap: var(--gutter-80px);
}

@media screen and (min-width:729px) {
    .company .company_contents_flex {
        grid-template-columns: 1fr 1fr;
        gap: var(--gutter-60px);
    }
}

/* company_about */

.company_about p {
    margin-bottom: var(--gutter-24px);
    /* フォント */
    font-family: var(--font-ryo-mincho);
    font-size: var(--size-18px);
    line-height: 1;
}

.company_about dl {
    display: flex;
    justify-content: start;
    padding-top: var(--gutter-24px);
    padding-bottom: var(--gutter-24px);
    border-bottom: 1px solid rgba(189, 182, 174, 80%);
}

.company_about dl:first-of-type {
    padding-top: 0;
}

.company_about dl dt {
    width: 40%;
    margin-bottom: 0px;
}

.company_about dl dd {
    width: 60%;
}

@media screen and (min-width:729px) {
    .company_about p {
        font-size: var(--size-20px);
        margin-bottom: var(--gutter-32px);
    }

    .company_about dl {
        padding: var(--gutter-32px) 0;
    }
}

/* company_to */

.company_to p:first-child {
    margin-bottom: var(--gutter-24px);
    /* フォント */
    font-family: var(--font-ryo-mincho);
    font-size: var(--size-18px);
    line-height: 1;
}

@media screen and (min-width:729px) {
    .company_to p:first-child {
        font-size: var(--size-20px);
        margin-bottom: var(--gutter-32px);
    }
}